@charset "utf-8";
/* CSS Document */


.poppins-thin {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-extrabold {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: normal;
}

.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.poppins-thin-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.poppins-extralight-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: italic;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.poppins-medium-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.poppins-semibold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: italic;
}

.poppins-bold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.poppins-extrabold-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-style: italic;
}

.poppins-black-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: italic;
}
  body {
   font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
            margin: 0px;
	  padding: 0px;
	 background-color: #f4f4f4;
        }

div.body {
	font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

p {margin: 8px 0px;}

pre {
   font-family: 'Poppins', sans-serif;
   font-size: 11px;
   white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
            background-color: #F5F5F5;
            padding: 5px;
            border-radius: 5px;
            border: 1px solid #ddd;
			text-align:left;
	color: #333;
        }

.indexpre {
	max-width: 350px;
	margin: 5px;
}



@media (min-width: 701px) {
input:valid, textarea:valid {
	padding: 3px 6px;
	 border-radius: 5px;
     border: 1px solid #ddd;
	background-color: #f4f4f4;
	font-size: 11px;
}

input:invalid, textarea:invalid {
	padding: 3px 6px;
	 border-radius: 5px;
     border: 1px solid #ddd;
	background-color: #f4f4f4;
	font-size: 11px;
}	
	
	

/*buttons*/
input.button, button.button {
  padding: 0.3rem 1.25rem; /* thinner top/bottom, wider left/right */
  font-size: 0.80rem;
  margin: 5px 0px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

button.button {
  margin: 5px 10px;
}

a.button {
  display: block;
  margin: 10px;
  text-align: center;
  padding: 0.3rem 1.25rem; /* add padding consistent with inputs/buttons */
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Keep the rest of your CSS exactly the same */


div.button {
  width: 100px;
  text-align: center;
  margin: 5px 0px;
  /* No hover effect assumed */
}

p.button {
  margin: 10px;
  padding: 8px 0px;
  /* No hover effect assumed */
}

a {
  color: inherit;
  text-decoration: none;
}

/* Color variants with hover states */

.white {
  background-color: #FFFFFF;
  color: #333;
  border: 1px solid #333;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.white:hover {
  background-color: #f0f0f0;
  color: #000;
  border-color: #000;
}

.red {
  background-color: #dc3545;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.red:hover {
  background-color: #c53040; /* Slightly darker red */
  border-color: #fff;
  color: #fff !important;
}

.green {
  background-color: #289813;
  color: #FFFFFF !important;
  border: 1px solid #FFFFFF;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.green:hover {
  background-color: #1f7010; /* Darker green */
  border-color: #fff;
  color: #fff !important;
}

.orange {
  background-color: #FFA400;
  color: #fff !important;
  border: 1px solid #FFFFFF;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.orange:hover {
  background-color: #cc8400; /* Darker orange */
  border-color: #fff;
  color: #fff !important;
}

.blue {
  background-color: #1657E1;
  color: #fff;
  border: 1px solid #FFFFFF;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.blue:hover {
  background-color: #0f46b8; /* Darker blue */
  border-color: #fff;
  color: #fff;
}

.lightblue {
  background-color: #56C2FD;
  color: #fff;
  font-weight: 400;
  border: 1px solid #FFFFFF;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.lightblue:hover {
  background-color: #3bb3fd; /* Slightly darker light blue */
  border-color: #fff;
  color: #fff;
}

.pink {
  background-color: #E40BF0;
  color: #fff;
  border: 1px solid #FFFFFF;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pink:hover {
  background-color: #b70acc; /* Darker pink */
  border-color: #fff;
  color: #fff;
}
	
/*BUTTONS ENDS*/
	

img {object-fit: cover;}

}



@media (max-width: 700px) {
input:valid,  textarea:valid {
	padding: 3px 6px;
	 border-radius: 5px;
     border: 1px solid #ddd;
	background-color: #f4f4f4;
	font-size: 16px;
}

	

input:invalid, textarea:invalid {
	padding: 3px 6px;
	 border-radius: 5px;
     border: 1px solid #ddd;
	background-color: #f4f4f4;
	font-size: 16px;
}
	
	
	
img {object-fit: cover;}
	
	
}
.text {
	font-size: 10px;
}