body { font-family: 'Arial', sans-serif; margin: 0; background: #fff; color: #333; }
    header { display: flex; justify-content:  space-evenly; align-items: center;  background: black; }
    
    .btn { padding: .75rem 2rem; background: white; color: #35c837; font-weight: bold; border: 1px solid #35c837; border-radius: 0.5rem; cursor: pointer; }
    .btn:hover { background: #35c837; color: #fff;}

    .hero { display: flex; flex-direction: column; align-items: left; justify-content: center; ; background: #000; text-align: center; }
    .hero h2 { font-size: 2.5rem; font-weight: 800; color: #fff; margin-bottom: 1rem; }
    .hero h2 span { color: #35c837; }
    .hero p { font-size: 1.2rem; color: #fff; margin-bottom: 1rem; }
    .checkbox p { font-size: .75rem; color: #000; margin-bottom: 0rem; }
    .hero img { width: 300px; margin-top: 1rem; margin-left: 0px; border-radius: 0.5rem; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }

    section { padding: 4rem 2rem; }
    section h2 { text-align: left; font-size: 2rem; font-weight: 700; margin-bottom: 3rem; }
    section h3 { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 3rem; }
    .hero h5 { text-align: left; font-size: 1.5rem; color: #fff; font-weight: 700; margin-bottom: 0rem; }

    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; max-width: 1200px; margin: 0 auto; }
    .card { background: white; padding: 1.5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
    .review-card { background: white; padding: 1.5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
    .devices-card { background: white; padding: 1.5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
    .how-card { background: #1b1e28; padding: 1.5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
    .why-us-card { background: #1b1e28; padding: 1.5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
    .why-us-card h4, p{ color: #f7f8fd; }
    .faq-card { background: white; padding: 1.5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
    .card img { width: 150px; height: 150px; object-fit: contain; margin-bottom: 1rem; border-radius: 0.25rem; }
    .devices-card img { width: 150px; height: 150px; object-fit: contain; margin-bottom: 1rem; border-radius: 0.25rem; }
    .how-card img { width: 100px; height: 100px; object-fit: contain; margin-bottom: 1rem; border-radius: 0.25rem; }
    .how-card h4, p{ color: #f7f8fd; }
    .faq-card img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 0rem; border-radius: 0.25rem; }
    .why-us-card img { width: 50px; height: 50px; object-fit: contain; margin-bottom: 0rem; border-radius: 0.25rem; }
	.faq-card h4 { color:#35c837; font-size:1.5rem;}
	.faq-card h6 { color:#c6c6c6; font-size:.75rem;}
	.faq-card p { color:#000; font-size: 1rem;}
    .card p { font-weight: 400; }
    .devices-card p { color:black;}
    .review-card p { color:black;}

	.hero-device-img img {height: 225px; width: auto; margin-top: 2rem; margin-left: 0px;}
	

    .devices { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; }
    .contact { text-align: center; background: #000; color: white; }
    .contact p { margin: 0.5rem 0; }
	.devices-card:hover{box-shadow: 0 3px 10px #2196f3;}
	
    footer { text-align: center; padding: 1rem; background: #000; color: #fff; }
	
	.logo { height: 125px; width: auto;}
	
	.footer-logo { height: 200px; width: auto; }
	.faq-img { height: 50px; width: auto; }
	
	.reviews {left:0px;}
	
	#testimonials h4 {color: gold;}
	
	/* form css */
	.form-container {
  background: #fff;
  max-width: 500px;
  margin: 0px;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #cdcdcd;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
  label {
    display: block;
    font-weight: bold;
    margin-top: 5px;
  }
  
  .checkbox-wrapper label {
    font-weight:normal;
    font-size:.85rem;
  }
  
  input, select, textarea {
    width: 100%;
    padding: 7px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 10px;
  }
  .checkbox-wrapper {
    display: grid;
      grid-template-columns:  1fr; /* One column for the checkbox, one for the label */
      gap: 5px; /* Space between the checkbox and label */
      align-items: left; 
  }
  
  .checkbox-wrapper input[type="checkbox"] {
      margin-right: 5px; /* Add some space between checkbox and label */
    }
  
  .checkbox-wrapper input {
    width: auto;
    margin-top: 13px;
  }
  
  .checkbox {
    display: flex;
    align-items: flex-start;
    margin-top: 10px;
  }
  .checkbox input {
    width: auto;
    margin-right: 7px;
    margin-top: 17px;
  }

  #call {
    background: #00d4ff;
    border: 2px solid #00d4ff;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    width: 200px;
    margin-top: 20px;
    transition: background 0.3s;
  }
  
  button {
    margin: 0 auto;
    padding:10px 30px;
    background:#00d4ff;
    color:#fff;
    border:none;
    border-radius:50px;
    font-size:20px;
    font-weight:300;
    cursor:pointer;
    box-shadow:0 15px 50px rgba(0,212,255,.6);
    transition:all .4s;
  }
  
  fieldset {
            width: 250px;
            margin: auto;
            border:none;
        }
  
 #quote {
  display: block;
  margin: 0 auto;
  padding: 10px 30px;
  background: #00d4ff;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  box-shadow: 0 15px 50px rgba(0, 212, 255, 0.6);
  transition: all 0.4s ease;
}

#quote:hover {
  background: #fff;
  color: #00d4ff;
  border: 2px solid #00d4ff;
}

  
  button:hover {
    background: #fff;
    color:#00d4ff;
    border:2px solid #00d4ff;
    transition: background 0.3s;
    transition: border 0.1s;
  }
  
  #call:hover {
    background: #000;
    color:#00d4ff;
    border:2px solid #00d4ff;
    transition: background 0.3s;
    transition: border 0.1s;
    cursor: pointer;
  }
  
  #call:hover a {
    color: #00d4ff;
    cursor: pointer;
  }

a { text-decoration: none; color: #fff;}

textarea {
    resize: vertical; }/* Allows only vertical resizing */
	
    @media (min-width: 767px){
      .hero { flex-direction: row; text-align: left; }
      .hero .hero-text { max-width: 500px; }
    }
    .divider {								/* minor cosmetics */
            display: table; 
            font-size: 24px; 
            text-align: center; 
            width: 75%; 						/* divider width */
            margin: 0px auto;					/* spacing above/below */
        }
        .divider span { display: table-cell; position: relative; }
        .divider span:first-child, .divider span:last-child {
            width: 50%;
            top: 40px;							/* adjust vertical align */
            -moz-background-size: 100% 2px; 	/* line width */
            background-size: 100% 2px; 			/* line width */
            background-position: 0 0, 0 100%;
            background-repeat: no-repeat;
        }
        .divider span:first-child {				/* color changes in here */
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#35c837));
            background-image: -webkit-linear-gradient(180deg, transparent, #35c837);
            background-image: -moz-linear-gradient(180deg, transparent, #35c837);
            background-image: -o-linear-gradient(180deg, transparent, #35c837);
            background-image: linear-gradient(90deg, transparent, #35c837);
        }
        .divider span:nth-child(2) {
            color: #000; padding: 0px 50px; width: auto; white-space: nowrap;
        }
        .divider span:last-child {				/* color changes in here */
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#35c837), to(transparent));
            background-image: -webkit-linear-gradient(180deg, #35c837, transparent);
            background-image: -moz-linear-gradient(180deg, #35c837, transparent);
            background-image: -o-linear-gradient(180deg, #35c837, transparent);
            background-image: linear-gradient(90deg, #35c837, transparent);
        }
    

    @media (max-width: 767px){
      .hero h5 { text-align: center; font-size: 1.5rem; font-weight: 700; margin-bottom: 0rem; }
      .hero h2 { text-align: center;  }
      #quote { width: 225px;}
      .hero-device-img img {display:none;}
    }