h6 {
    	font-size: 1.8rem;
    	line-height: 1.6;
   	 	letter-spacing: 0;
		color: royalblue;
	}
		
	h4 {
			color: royalblue;
		}

    h2 {
			color: royalblue;
		}

    .buttonS {
	  background-color: coral; /* Green */
	  opacity: 1;
	  border: none;
	  color: white;
	  padding: 15px 32px;
	  text-align: center;
	  text-decoration: none;
	  display: inline-block;
	  font-size: 24px;
	  width: 220px;
	  margin-bottom: 10px;
	}

	/* Create three equal columns that floats next to each other */
	.row
	{
		width:80%;	
		margin:auto;
		margin-top: 30px; 
		margin-bottom: 30px;
	}

	.column {
	  float: left;
	  width: 100%;
	  display: block;
	}
		
	.left {
	  width: 40%;
	  text-align: right;
	  padding-right: 20px;
	  padding-top: 5px;
	  margin-top:5px
		
	}

	.right {
	  width: 60%;
	  text-align: left;
	  padding-left: 30px;
	  padding-top: 0px;
	  padding-bottom: 13px; 
	  font-size: 24px; 
	  color:#333399;
	  margin-bottom:30px;
	}

	.button-container {
  		display: flex;
	}

	.plan {
  		width: 430px;
		height: 360px;
		cursor: pointer;
	}
	
	.plan:hover {
		box-shadow: 0px 0px 32px -15px rgba(135,95,199,1);
		 transition: all 0.2s ease-in-out;
	}

    .plan:before,


	.view-title {
		
		margin-top: 20px;
		margin-bottom: 0px;
		color: #333399;
		font-size: 36px;
	}

.image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Creates 3 equal columns */
  gap: 20px; /* Gap between the images */
  max-width: 1280px; /* Optional: Limit max width */
  margin: 0 auto; /* Center the grid container */
  padding: 20px;
}

.image-grid img {
  width: 100%; /* Ensure images scale down to fit within the grid */
  max-width: 400px; /* Prevent image from becoming larger than 75% of the original width */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Ensure images fit nicely without distortion */
}

.image-grid.image-grid-two {
  grid-template-columns: repeat(2, 1fr); /* override for 2-column layout */
  gap: 20px; /* Reduce from 20px to 10px */
  justify-items: center;
  max-width: 900px;
  margin: 0 auto;
}

.plan-with-cbadge {
  position: relative;
  display: inline-block;
}


.cbadge {
  width: 250px;           
  text-align: center;     
  padding: 3px 0;          
  background-color:#003399;
  color:white;
  font-weight:500;
  font-size: 22px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  /*border: 2px solid white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.3);*/
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
}

.kidsafe-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* space between image and text */
  flex-wrap: wrap;
  margin: 0px auto;
  max-width: 100%; /* allow full width */
  padding: 0 10px;
  text-align: center;
}

.kidsafe-banner img {
  width: 180px; /* reduce slightly to fit large text */
  height: auto;
  flex-shrink: 0;
}

.one-col-note {
  display: flex;
  flex-wrap: wrap;
  background-color: #FFFFFF;
  color: #333399;
  margin-bottom: 0px;
  gap: 40px;
  justify-content: center;
  text-align: left;
  padding: 20px;
}

/*

.two-col-note {
  display: flex;
  flex-wrap: wrap;
  background-color: #FFFFFF;
  color: #333399;
  font-size: 24px;
  margin-bottom: 20px;
  gap: 40px;
  justify-content: center;
  text-align: left;
  padding: 20px;
}
*/
.note-box {
  flex: 1 1 400px;
  min-width: 300px;
  max-width: 1200px;
  border: 4px solid #0099cc;
  border-radius: 12px;
  padding: 0px 0px 20px 0px;
  /*box-shadow: 0 4px 12px rgba(0, 153, 204, 0.2);*/
  background-color: rgba(255, 127, 80, 0.15); /* 10% coral tint */
}

.note-title {
  font-size: 32px;
  text-align: center;
  color: #FFFFFF; /*#0099cc;*, *#003399;*/
  background-color:  #0099cc;
  margin-bottom: 20px;
}

.note-box ul {
  list-style: none;
  padding: 0 0px; /* adjust 20px to taste */
  margin: 0;
}

.note-box li {
  margin-bottom: 15px;
}

.feature-list {
  list-style: none;
  padding: 0 0;
  color: #333399;
  text-align: left;
  margin: 0 auto;
  max-width: 1200px;
}

.feature-list li {
  margin-bottom: 12px;
  display: block;
  text-align:left;   /* was center */               
}

.feature-text {
  flex: 1 1 auto;
  font-size: 27px; /* match your note section */
  padding: 0 20px; /* adjust 20px to taste */
  display: block;  /* ensures padding applies properly */
}

.feature-text b {
  color: coral; /* pick any color you like */
  font-weight: 700; /* keep it bold */
}

/*
.feature-note {
  margin: 0px auto;
  padding: 0px 0px 20px 0px;
  border: 4px solid #0099cc;
  border-radius: 12px;
  min-width: 300px;
  max-width: 1200px;
  text-align: left;
  background-color: rgba(255, 127, 80, 0.15); 
  color: #333399;
  font-size: 27px;
}

.feature-note b { color: coral; font-weight: 700; }
.feature-note a { color: coral; text-decoration: underline; }

.feature-note-title {
  font-size: 32px;
  text-align: center;
  color: #FFFFFF; 
  background-color:  #0099cc;
  margin-bottom: 20px;
}
*/

.checkmark, .star {
  color: #0099cc;
  font-weight: bold;
  font-size: 32px;
  line-height: 1;            /* avoids extra vertical space */
  flex: 0 0 auto;            /* icon stays its natural size */
  margin-right: 0;           /* gap now handles spacing */
  /* remove the positioning hack */
  position: static;          /* was relative */
  top: auto;                 /* was -3px */
  /* optional micro-nudge if you want it a hair lower */
  transform: translateY(2px);
}

.bottomLineSeparator {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.quote-request-box {
  background-color: #ffffff;
  color: #333399;
  font-size: 24px;
  text-align: left;
  padding: 20px;
  margin: 10px auto 30px auto;
  max-width: 900px;
  border: 2px solid #0099cc;
  border-radius: 12px;


}

.quote-request-box a {
  color: orangered;
  text-decoration: underline;
}

.quote-request-box ol {
  padding-left: 20px;
  margin: 10px 0;
}




	@media screen and (max-width: 1399px) {
		
		.feature-text {
			font-size: 24px;
		  }
		/*
		.checkmark,
		  .star {
			font-size: 22px;
			margin-right: 6px;
		  }
		*/
		.note-title {
			font-size: 28px;
			margin-bottom: 14px;
		  }
		/*
		.left {
		  width: 40%;
		  text-align: right;
		  padding-right: 80px;
		  padding-top: 5px;
		  margin-top:5px

		}

		.right {
		  width: 60%;
		  text-align: left;
		  padding-left: 0px;
		  padding-top: 0px;
		  padding-bottom: 13px; 
		  font-size: 24px; 
		  color:#333399;
		  margin-bottom:30px;
		}
		*/
	}

	@media screen and (max-width: 1024px) {

	  .feature-text {
		font-size: 20px;
	  }

	  .note-title {
		font-size: 24px;
		margin-bottom: 10px;
		text-align: center;
	  }

	  .note-box {
		display: block;
		width: 100%;
	  }
	  /*
	  .note-box.note-left,
	  .note-box.note-right {
		padding: 10px 20px;
		margin-bottom: 20px;
		box-sizing: border-box;
	  }
	  */
	  /*
	  .right {
		width: 100%;
		padding-left: 0;
		text-align: left;
		font-size: 22px;
	  }

	  .checkmark,
	  .star {
		font-size: 18px;
		margin-right: 6px;
	  }
	  */


	  .column {
		width: 100%;
	  }
	  /*
	  .left {
		width: 100%;
		text-align: center;
	    padding-right: 0px;
	  }	
	  .right {
		width: 100%;
		text-align: center;	
	  }	
	  */
		.row
	  {
		width:100%;	
		margin:auto;
	  }
		.plan {
			width: 387px;
			height: 324px;
			margin-bottom: 30px;

		}
		
		.view-title {
		
		margin-top: 20px;
		margin-bottom: 0px;
		color: #333399;
		font-size: 36px;
	}
		
	  .image-grid {
    grid-template-columns: 1fr; /* Stack images in 1 column */
    justify-items: center; /* Center images in the container */
  }

  .image-grid img {
    max-width: 90%; /* Scale down to 75% of their original size */
  }
		
	.image-grid.image-grid-two {
    grid-template-columns: 1fr;        /* Switch to 1 column */
    justify-items: center;             /* Optional: center items in the column */
  }

  .image-grid.image-grid-two img {
    width: 90%;                        /* Optional: slightly smaller images */
    
  }
		
  .quote-request-box {
    font-size: 20px;
    padding: 12px;
    margin: 10px 5px;
    text-align: left;
  }
		
}