* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Poppins', sans-serif;
}

body.dark {
	background-color: #ed3121;
}

body::-webkit-scrollbar {display: none;}

h1.title {
    margin: 2.25rem auto 3rem auto;
    font-size: 3.5em;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	letter-spacing: .05em;
    width: fit-content;
    position: relative;
	text-align: center;
}

body.dark h1.title {
	color: #212529;
}

h1.title::after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 2px;
    border-radius: 30px;
    background-color: #c5191d;
}

h1.title span {
   font-weight: 300;
   letter-spacing: .02em;
   font-size: 3rem;
}

h2.title {
	margin: 1rem auto;
    font-size: 2em;
	font-family: 'Oswald', sans-serif;
	font-weight: 400;
	letter-spacing: .05em;
    width: fit-content;
    position: relative;
	text-align: center;
	color: #00b4d8; 
}

h3.title {
	margin: 1rem auto .25rem auto;
    font-size: 1.75em;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	letter-spacing: .05em;
    position: relative;
	color: #333;
}

h4.title {
	font-family: "Oswald", sans-serif;
	font-size: 1.5em;
	font-weight: 600;
	letter-spacing: .05em;
	color: #d71321;
	margin-bottom: 1rem;
}

p {
	font-family: "Roboto", sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: .03em;
	line-height: 150%;
	color: #444;
}

p span {
	font-size: 1.25rem;
	font-weight: 500;
	color: #212529;
}

button.btn, button.btn2, button.cntctbtn, button.closemsgbox {
    font-size: 1em;
	font-weight: 600;
    font-family: "Poppins", serif;
    width: 160px;
    height: 40px;
    border: 2px solid #d71321;
    border-radius: 30px;
    background-color: transparent;
	color: #d71321;
    cursor: pointer;
    transition: .25s;
}

button.btn2, button.closemsgbox {
	background: linear-gradient(to bottom, #ed3121, #d71321);
    color: #f9f9f9;
	border: none;
	transition: all .3s ease-in-out;
}

button.btn:hover, button.cntctbtn:hover {
    background: linear-gradient(to bottom, #ed3121, #d71321);
    color: #f9f9f9;
	border: none;
}

button.savebtn {
	background: transparent;
	border: none;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

button.savebtn:hover {
	transform: scale(1.25);
}

@media (hover: hover) {
	button.btn2:hover {
		transform: scale(1.25);
	}
}

/* __________ Start PreLoader __________ */

.preloader {
	background-color: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}

.preloader.dark_preloader{
	background-color: #d71321; /* was #fff */
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;	
}

body.dark .preloader.dark_preloader {
	background-color: #000;
}

.spinner {
	width: 50px;
	height: 50px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	font-size: 10px;
	text-indent: -12345px;
	z-index: 10000;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #d71321;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

body.dark .double-bounce1, .double-bounce2 {
	background-color: #000;
}

.dark_preloader .double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #d71321;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/* __________ End PreLoader __________ */



/* __________ Start Header __________ */

header {
	position: absolute;
	display: flex;
    width: 100%;
    height: 8rem;
    top: 0;
	left: 0;
    right: 0;
    align-items: center;
    background: repeating-linear-gradient(to bottom, #b71a1a, #ed3121);
    z-index: 10;
}

.navbar {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
	
}

.navbar .logo {
    text-decoration: none;
    font-size: 1.25em; /** E47C05 original orange **/
    font-weight: 500;
    color: #fff; /** E47C05 original orange **/
}

.logo img {
	margin-top: .5em;
	width: 6em;
	height: 4em;
}

.navbar .cntctinfo {
	width: 100%;
	padding: 0em 1.5em;
	text-align: right;
}

.navbar .cntctinfo h2 {
	margin: 1em 0em .25em 0;
	font-size: 1.15em;
	font-family: "Roboto", sans-serif;
	font-weight: 600;
	letter-spacing: .085em;
	text-shadow: 1px 1px 2px rgba(0,0,0, 0.7);
	color: #fff;
}

.navbar .cntctinfo h3 {
	font-size: .75em;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	letter-spacing: .08em;
	text-shadow: 1px 1px 2px rgba(0,0,0, 0.7);
	color: #fff;
	margin-bottom: 1.5em;
}

.navbar .cntctinfo i {
	font-size: .85em;
}

.navbar .cntcticonbx {
	display: flex;
	flex-direction: row;
	margin: 0;
	padding: 0;
	width: 6em;
	height: 3em;
	justify-content: center;
	align-items: center;
	gap: 1em;
}
.navbar .cntcticonbx a {
	text-decoration: none;
}
.navbar .cntcticonbx .iconbx {
	display: flex;
	width: 2em;
	height: 2em;
	justify-content: center;
	align-items: center;
	background-color: #5f7e9e;
	border: none;
	border-radius: 50%;
	font-size: 1.25em;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: .3s ease-in-out;
}
.navbar .cntcticonbx img {
	width: 29.25rem;
}
.navbar .cntcticonbx .iconbx:hover {
	color: #5f7e9e;
	background-color: transparent;
	border: 2pt solid #5f7e9e;
	transition: .3s ease-in-out;
}

.navbar .list {
    display: flex;
    align-items: center;
    list-style: none;
}

.navbar .list li {
    padding: 10px 15px;
}

.navbar .list a {
    text-decoration: none;
    color: #000;
    font-size: 1em;
    font-weight: 600;
    transition: .25s;
    position: relative;
}

.list .dropdown {
	position: relative;
}

.list .submenu {
  display: none;        /* Hidden by default */
  position: absolute;   /* Positions it relative to the parent LI */
  top: 100%;            /* Places it right below the parent */
  left: 1rem;
  background: transparent;
  background-image: linear-gradient(to bottom, rgba(207,207,207,.9), rgba(151,151,151,0.9));
  list-style: none;
  min-width: 12em;
  box-shadow: 0em .5em .75em rgba(0, 0, 0, 0.35);
  border-radius: .25em;
  padding: 0;
  color: #444;
  opacity: 0;
  z-index: 99999;
  transition: opacity 1s ease-in-out, display 1s ease-in-out allow-discrete;
}

.list .submenu li {
  width: 100%;          /* Stack submenu items vertically */
  padding: .25em .125em .25em .5em;
}

.list .submenu li:hover {
	width: 100%;
	background: #ef3023; /* FB red */
	border-radius: .25rem;
}

body.dark .navbar .submenu li > a {
	padding:  0  0 .125em 0;
	color: #000; /* #232323 but allows for .75 transparent bckgnd  */
	font-size: .8em;
	font-weight: 500;
	letter-spacing: .05em;
	/* text-shadow: 1px 1px 2px rgba(0,0,0, 0.9); */
	transition: .3s ease-in-out;
}

body.dark .navbar .submenu li > a:hover {
	color: #fff; /*  to emulate #1666ef in order to allow for the .75 transparency  */
	font-weight: 600;
}

/* Hover Effect to Show Submenu */
.list .dropdown:hover .submenu {
  display: block;       /* Shows submenu when parent li is hovered */
  opacity: 1;
  transition: opacity 1s ease-in-out, display 1s ease-in-out allow-discrete;
}

body.dark .navbar .list a {
	color: #1b1b1b;
}

body.dark .navbar .list a img {
	width: 1.125em;
	transition: all .2s ease-in-out;
}

#adminbtn:hover img {
	  filter: invert(1);
}

body.dark .navbar .list a:hover {
	color: #fff;
	/* text-shadow: -1px 1px 2px rgba(0,0,0, 0.7); */
}

.navbar .list a::before, .navbar .list a::after, .navbar .submenu li > a::before, .navbar .submenu li > a::after { /* the underline */
    content: "";
    width: 0;
    height: 3px;
    position: absolute;
    bottom: 0;
    background-color: #f9f9f9; /** orig orange e47c05 **/
    transition: .25s;
}

.navbar .submenu li > a::before, .navbar .submenu li > a::after {
	background-color: #fff;
}

.navbar .list a::before, .navbar .submenu li > a::before {
    left: 50%;
}

.navbar .list a::after, .navbar .submenu li > a::after {
    right: 50%;
}

.navbar .list a:hover::before, .navbar .list a.active::before, .navbar .submenu li > a:hover::before, .navbar .submenu li > a.active::before {
    width: 50%;
}

.navbar .list a:hover::after, .navbar .list a.active::after, .navbar .submenu li > a:hover::after, .navbar .submenu li > a.active::after {
    width: 50%;
}

.navbar .list a:hover {
    color: #000;
}

#menu-btn {
    display: none;
}

#navbar-sticky {
    position: fixed;
    top: 0;
    background-color: white;
    height: 15vh;
    animation: fadeInDown 1s both 0.2s;
}

#nav-open {
	overflow: visible !important;
	height: auto !important;
	
}

body.dark #navbar-sticky {
	background-color: #d71321;
}

/* __________ End Header __________ */

/* __________ Start Hero __________ */

section.hero, section.herohdr {
	position: relative;
	display: flex;
    width: 100%;
    height: 95vh;
    margin: auto;
    align-items: center;
    justify-content: center;
    background: url("../img/pgs/heroimage.webp");
	background-size: contain;
    background-position: 0px 120px;
	background-repeat: no-repeat;
    background-attachment: fixed;
}

body.dark section.herohdr {
	height: 60vh;
	margin-top: 6.125rem;
}

#contacthdr, #loginhdr, #adminprtlhdr, #rfqhdr {
	background: url("../img/pgs/contactus.webp");
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
}

#serviceshdr {
	background: url("../img/pgs/services.webp");
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

#aboutushdr {
	background: url("../img/pgs/aboutuspic.webp");
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
}

.hero .container, .herohdr .container {
	position: relative;
    width: 80%;
    margin: auto;
}

.hero .greeting, .herohdr .greeting {
    position: relative;
    z-index: 1;
}

.socnetbx {
	position: absolute;
	display: flex;
	flex-direction: row;
	width: 12em;
	height: 4em;
	margin: 0;
	padding: 0;
	justify-content: center;
	align-items: center;
	right: 8%;
	bottom: 2em;
	background: transparent;
	z-index: 20;
	gap: .5em;
}

.socneticon {
	display: flex;
	flex-direction: column;
	width: 3em;
	height: 3em;
	justify-content: center;
	align-items: center;
	background: transparent;
}
.socneticon a {
	cursor: pointer;
}

.socneticon img {
	width: 2em;
	background: transparent;
	border: none;
	border-radius: .25em;
	box-shadow: 0 .25em .3em .05em rgba(255, 255, 255, .25);
}

.hero .greeting::before, .herohdr .greeting::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-40%, -20%);
    width: 2rem;
    height: 2rem;
    background-color: #097ec2;
    border-radius: 50%;
    z-index: -1;
}

.hero .slogan, .herohdr .slogan {
	display: flex;
	margin-left: 60%;
	width: 50%;
	font-family: "Roboto", sans-serif; /** was Mulish  **/
    font-size: 4em; /** 46px **/
	font-weight: 700;
	color: #2b2b2b;
}

.herohdr .slogan {
	margin-left: 0;
	margin-top: 2.5em;
	font-size: 3em;
	line-height: 150%;
	letter-spacing: .125rem;
	color: #f1f1f1;
	text-shadow: 5px 5px 10px rgba(0, 0, 0, .99);
}

.hero .name, .herohdr .name {
	font-family: Mulish, sans-serif;
    font-size: 4em; /** 46px 88 **/
	font-weight: 300;
	color: #fff;
	text-shadow: 1px 1px 2px  #000;
}

body.dark .hero .greeting,
body.dark .hero .profession,
body.dark .herohdr .greeting,
body.dark .herohdr .profession {
	color: #ccc;
	text-shadow: 1px 1px 2px #000;
}

.hero .profession, .herohdr .profession {
    font-size: 24px;
}

.hero .description, .herohdr .description {
    margin-top: 1em;
    width: 50%;
    line-height: 150%;
    letter-spacing: 0.5px;
    color: black;
}

body.dark .hero .description, body.dark .herohdr .description {
	color: #ddd;
	text-shadow: 1px 1px  #000;
}

body.dark .hero .description span, body.dark .herohdr .description span {
	color: #fff;
	font-weight: 500;
	font-style: italic;
	text-shadow: 1px 1px  #000;
}

.hero button, .herohdr button {
	position: absolute;
	top: 14em;
	left: 57.5em;
}

#prof {
    color: #43d2fe; /** 097ec2 lt blue f69f89 bright coral **/
}

/* __________ End Hero __________ */

/* __________ Start About __________ */

section.intro, section.about {
    width: 100%;
    margin-bottom: 200px;
}

section.intro, section.contactus, section.quoterequest {
	background-color: #f8f9fa;
	padding: 20px 0px 30px 0;
	margin-bottom: 0;
}

.intro .container, .contactus .container, .quoterequest .container {
	width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
	flex-wrap: wrap;
}

.contactus .container {
	margin-top: 2em;
}

.quoterequest .container .subtitle {
	display: block;
	width: 100%;
	text-align: center;
}

.quoterequest .container .calltoaction {
	display: block;
	width: 70%;
	text-align: justify;
}

.intro .container p, .contactus .container p, .quoterequest .container p {
	width: 70%;
	margin: 0 auto;
	text-align: justify;
}

.intro .container p span, .contactus .container p span {
	font-weight: 700;
	color: #232323;
}

.intro .selectionbx {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 3em 0;
	padding: 1em;
	width: 100%;
	justify-content: center;
	align-items: stretch;
	gap: 3em;
}

.intro .card {
	display: flex;
	flex-direction: column;
	flex: 1;
	flex-grow: 1;
    align-items: center;
    justify-content: center;
    width: 8em;
    height: 10em;
    margin: auto;
	padding: 1em;
    border-radius: 1em;
	border: 1pt solid #e1e1e1;
	box-shadow: 0 .25em .5em 0 rgba(0, 0, 0, .15);
	cursor: pointer;
    transition: .25s ease-in-out;
}

.intro .card .icon {
	width: 3.5em;
	height: 3.5em;
	padding: .25em;
	background-color: #c8b11e;
	border-radius: 50%;
}

.intro .card img {
	height: 3em;
}

.intro .card h2.cardtitle {
	position: relative;
	margin: 10px 0px;
	font-family: "Oswald", sans-serif;
	font-size: 1em;
	font-weight: 400;
	color: #333;
}

.intro .card .btnbx {
	display: flex;
	width: 2rem;
	height: 3rem;
	border: 3px solid #1a365d50;
	border-radius: 50%;
	transform: scale(.75);
	transition: all .35s ease-in-out;
}

.intro .card .slctbtn {
	
	transition: .3s ease-in-out;
	cursor: pointer;
}

.intro .card:hover {
	background-color: #566B7f35;
}

.intro .card:hover img {
  color: #5f7e9e;
  /* filter: invert(12%) sepia(87%) saturate(6747%) hue-rotate(352deg) brightness(101%) contrast(104%); */
  filter: invert(31%) sepia(99%) saturate(7469%) hue-rotate(0deg) brightness(108%) contrast(125%);
}

.intro .card:hover h2.cardtitle {
	font-weight: 500;
}

@media (hover: hover){
	.intro .card:hover .btnbx {
		border-color: #5f7e9e;
		transform: scale(1.25);
	}

	.intro .card:hover .slctbtn {
		transform: scale(2.5);
		background-color: #5f7e9e;
	}
}
/* __________ End Intro __________ */

/* __________ Start Accessibility & TAKEAWAYS & COMMUNITY __________ */
section.accessibility, section.takeaways, section.community, section.coreprince {
	background-color: #efeef3;
	padding: 3em 0em 8em 0em;
	background-image: url("../img/pgs/lines.webp");
	background-size: 115%;
	background-position: bottom right;
	background-repeat: no-repeat;
}

section.coreprince {
	display: none;
}

section.accessibility {
	display: none; /**  client does not want this section  **/
}

section.takeaways {
	background-color: #f8f9fa;
	background-image: none;
}

section.community {
	background-image: none;
	padding: 3em 0em;
	text-align: left;
}

.community h1.title, .community h2.title {
	width: 70%;
	text-align: left;
}

.community h1.title::after {
	left: 25%;
	bottom: -15px;
}

section.coreprince {
	background-image: url("../img/pgs/lines-nameplate.webp");
	background-size: 115%;
	background-position: bottom right;
	background-repeat: no-repeat;
}
 
 
.accessibility .container, .takeaways .container, .coreprince .container {
    width: 80%;
	height: 20rem;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
	flex-wrap: wrap;
}

.community .container {
	width: 70%;
    margin: auto;
    display: flex;
	flex-direction: row;
    align-items: center;
    justify-content: center;
	gap: 3em;
}

.takeaways .container {
	height: auto;
	width: 70%;
	padding-top: 3em;
}

.accessibility .text, .coreprince .container .text {
	display: block;
	width: 50%;
}

.accessibility .text h3.title, .coreprince .text h3.title {
	text-align: left;
	margin-bottom: .5rem;
}

.accessibility .text ul, .coreprince .text ul {
  margin: .5rem 4rem;
}

.accessibility .text li span, .coreprince .text li span {
	font-weight: 600;
}

.takeaways .splitheading {
	display: flex;
	margin: auto;
	align-items: stretch;
	gap: 2em;
	margin-bottom: 6em;
}

.splitheading h1.title {
	display: flex;
	width: 50%;
	align-items: center;
	font-size: 2rem;
	text-align: left;
}

.splitheading h1.title::after {
	background-color: transparent;
}

.splitheading .description {
	display: flex;
	align-items: center;
	font-size: 1.5rem;
	text-align: left;
	padding: 1rem 3rem;
	border-left: 2pt solid #ccc;
}

.takeaways .cardbox, .lablog .cardbox {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 2em;
}

.lablog .cardbox {
	margin-top: 3em;
}

.takeaways .card, .lablog .card {
	width: 22vw;
	margin: 0em 0em 3em 0em;
	 /* Give the cards a base size so they distribute evenly */
    flex: 1 1 calc(33.333% - 2em); /* Example for 3 cards per row */
    padding: 0;
	background-color: #efeef3;
    border: none;
    border-radius: .25em;
	box-shadow: 0 .5em .75em 0 rgba(0, 0, 0, .20);
    transition: .25s;
}

.takeaways .card .crd-image, .lablog .card .crd-image {
	width: 100%;
	height: 15rem;
}

#advantage1, #advantage2, #advantage3, #advantage4, #advantage5, #advantage6 {
	background-image: url("../img/pgs/pic1.webp");
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
}

#advantage2 {
	background-image: url("../img/pgs/pic3.webp");
}

#advantage3 {
	background-image: url("../img/pgs/pic4.webp");
}

#advantage4 {
	background-image: url("../img/pgs/pic5.webp");
}

#advantage5 {
	background-image: url("../img/pgs/pic6.webp");
}

#advantage6 {
	background-image: url("../img/pgs/pic7.webp");
}

.takeaways .card .heading, .lablog .card .heading  {
	width: 100%;
	padding: 1em;
	background-color: #d71321;
	font-size: 1.125rem;
	font-weight: 400;
	letter-spacing: .03rem;
	color: #fff;
}

body.dark .takeaways .card .heading, body.dark .lablog .card .heading {
	color: #fff;
}

.takeaways .card .subheading, .lablog .card .subheading {
	width: 100%;
	padding: 1rem 1rem .25rem 1rem;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .03rem;
	color: #444;
}



.lablog .card .subheadingbx {
	display: flex;
	width: 100%;
	margin: 1em .25em 0 1em;
	opacity: .25;
}

.lablog .card .subheading {
	width: 60%;
	padding: .25rem .5rem .25rem .25rem;
	color: #000;
	font-weight: 500;
}

.lablog .card .subheadingbx img {
	width: 1.7em;
}

.takeaways .card .advntgextn, .lablog .card .blogextn {
	display: none;
	transition: transform 0.3s ease;
}

.takeaways .card .description, .lablog .card .description {
	padding: 1em;
	padding-top: .25rem;
	font-size: 1rem;
	color: #444;
}

body.dark .takeaways .card .description, body.dark .lablog .card .description {
	color: #444;
}

.takeaways .card .description span, .lablog .card .description span {
	font-weight: 600;
	font-size: 1rem;
}

.lablog .card .description p {
	font-size: 1rem;
	margin: 1rem 0rem 0rem 0rem;
	text-decoration: none;
}

.lablog .card .description ul {
	padding-left: 1rem;
}
.takeaways .card button.cardbtn, .lablog .card button.blgcardbtn {
	background: transparent;
	border: none;
	padding: .25em 1em 1em 1em;
	font-size: .8rem;
	color: #444;
	font-weight: 700;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.takeaways .card button.cardbtn:hover, .lablog .card button.blgcardbtn:hover {
	color: #d71321;
}

.takeaways .card button.cardbtn span.advextarr, .lablog .card button.blgcardbtn span.blogextarr {
	display: inline-block;
	transition: transform 0.3s ease;
}

.rotate-90 {
	position: relative;
	transform: rotate(90deg);
	top: .25em;
	transition: all 0.3s ease;
}

.community .container .text, .instypes .container .text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: 50%;
}

.community .container .my-image {
	background-image: url("../img/pgs/hudsonville.webp");
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	min-height: 30em;
	width: 45%;
	border-radius: .5em;
}

.instypes .container .my-image {
	min-height: 30em;
	width: 45%;
	border-radius: .5em;
}

#autobox {
	background-image: url("../img/pgs/autopic.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}

#homebox {
	background-image: url("../img/pgs/housepic.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}

#lifebox {
	background-image: url("../img/pgs/lifepic.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}

#commbox {
	background-image: url("../img/pgs/businesspic.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}

#rentbox {
	background-image: url("../img/pgs/renterspic.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}

#recbox {
	background-image: url("../img/pgs/recvehpic.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
}

.community .container .text h1.title, .instypes .container .text h1.title {
	width: fit-content;
	text-align: left;
	margin-bottom: .5em;
	font-size: 2.45em;
	margin-left: 0;      /* Forces margin reset on the left */
    margin-right: auto;  /* Pushes any remaining space to the right */
}

.community .container .text h2.title, .instypes .container .text h2.title {
	  width: fit-content;
      text-align: left;
      margin-left: 0;      /* Forces margin reset on the left */
      margin-right: auto;  /* Pushes any remaining space to the right */
}

.community .container .text h4.title, .instypes .container .text h4.title {
	color: #212529;
}

.community .container .text h1.title::after, .instypes .container .text h1.title::after {
	bottom: -.5rem;
	left: 25%;
}

.community .container .text p, .instypes .container .text p {
	margin-bottom: 1rem;
	text-align: justify;
}

.community .container .text p span, .instypes .container .text p span {
	font-weight: 600;
}

.instypes .container .text ul {
	margin: 0em 2em 1em 2em;
}
 
.instypes .container .text li {
	font-size: 1.125rem;
	color: #444;
	margin-bottom: .5em;
}

.instypes .container .text li span {
	font-weight: 600;
}


/* __________ End Accessibility & TAKEAWAYS __________ */

/* __________ Start Blog __________ */
section.lablog {
	background-color: #f8f9fa;
	margin-bottom: 4em;
	padding-top: 2em;
}

.lablog .container {
	width: 70%;
	height: auto;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
	gap: 2rem;
}

.lablog .container .crd-image img {
	width: 100%;
	height: 15rem;
	border: none;
	border-radius: .25rem .25rem 0rem 0rem;
}

#blogstory2 {
	background-image: url("../img/pgs/pic2.webp");
	border: none;
	border-radius: .25rem .25rem 0rem 0rem;
}

#blogstory3 {
	background-image: url("../img/pgs/pic2.webp");
	border: none;
	border-radius: .25rem .25rem 0rem 0rem;
}


/* __________ End Blog __________ */

/* __________ Start About __________ */
.about .container {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
	flex-wrap: wrap;
}

.about .container li {
	list-style-type: none;
}

.about .image {
    display: flex;
    background-color: black;
    padding: 1px;
    position: relative;
    z-index: 1;
}

body.dark .image {
	background-color: #555;
}

.about .image::after, .about .image::before {
    content: "";
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    background-color: #43d2fe;
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.about .image::before {
    top: 0;
    left: 0;
    transform: translate(-20%, -20%);
}

.about .image::after {
    bottom: 0;
    right: 0;
    transform: translate(20%, 20%);
}

.about .image img {
    width: 30vw;
}

.about .text {
    width: 45vw;
}

.about .text .heading {
	font-family: Mulish, sans-serif;
	font-weight: 400;
    font-size: 30px;
	color: #fff;
}

.about .text .description {
    margin-top: 20px;
	text-align: justify;
    line-height: 130%;
    letter-spacing: 0.5px;
    color: #333;
}

body.dark .about .text,
body.dark .about .text .description,
body.dark .about .text .detail td {
	color: #aaa;
}

.about .text .detail {
    margin-top: 20px;
    letter-spacing: 0.5px;
}

.about .text .detail td {
    padding: 8px 10px;
}

.about .text .detail .ans {
    color: #333;
}

.about .text .btn {
    margin-top: 20px;
}

/* __________ End About __________ */

/* __________ START Admin Portal ___________ */

section.adminportal {
	background-color: #f8f9fa;
	width: 100%;
	margin: 8em 0em;
	padding: 0;
}

.adminportal h1.title {
	width: 100%;
	max-height: 5rem;
	margin: 0;
	text-align: left;
	font-size: 2em;
	padding: 1.5rem 2rem;
	border-bottom: 1pt solid #999;
}

.adminportal h1.title::after {
	display:none;
}

.adminportal .container {
	display: flex;
	width: 100%;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
}

.adminportal .container .menuwrap {
	display: flex;
	width: 15vw;
	height: 80vh;
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	border-right: 2pt solid #ccc;
}

.adminportal .container .tierwrap {
	display: none;
	width: 100%;
	flex-flow: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-right: 2rem;
	border-bottom: 1pt solid #ddd;
}

#crmtable1 {
	position: relative;
	width: 100%;
	padding: 0rem .5rem;
	font-size: 1rem;
	border: 1pt solid #ccc;
	border-radius: 1rem;
	border-collapse: collapse;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, .05);
}

#crmtable1 img {
	width: 1.1rem;
}

#crmtable1 thead tr {
    background-color: #1e293b; /* Sleek dark slate background */
    color: #ffffff;
    text-align: center;
	font-size: .85rem;
    font-weight: 400;
}

#crmtable1 thead td {
	border: none; 
}

#crmtable1 th, 
#crmtable1 td {
	text-align: center;
    padding: .25rem; /* Gives data room to breathe */
    /* inside borders - all cells */
    border: 1pt solid #e2e8f0; 
}

/* Rows Adding Zebra Striping */
#crmtable1 tbody tr {
    background-color: #ffffff;
    /* Smooth color transition when hovering */
    transition: background-color 0.15s ease; 
}

/* Automatically shades every other row  */
#crmtable1 tbody tr:nth-of-type(even) {
    background-color: #f8fafc; 
}

/* Row highlighter */
#crmtable1 tbody tr:hover, #crmtable1 tbody tr.active {
    background-color: rgba(255,255,128,.70); /* yellow */
}

#crmtable1 tbody td:nth-child(1) img, #crmtable1 tbody td:nth-child(8) img {
	width: 1.25em;
	cursor: pointer;
}

#crmtable1 tbody td:nth-child(2){
	padding: .25rem .35rem;
}

#crmtable1 tbody td:nth-child(3), #crmtable1 tbody td:nth-child(4) {
	font-size: 0.85rem;       /* Reduces the font size (roughly 13px if base is 16px) */
    font-weight: 500;         /* Optional: gives it a clean, crisp weight at smaller sizes */
    color: #64748b;           /* Optional: softens the color to a slate gray so it's less jarring to scan */
    word-break: break-all;    /* Safeguard: forces massive email strings to wrap instead of breaking your column widths */
}

#crmtable1 tbody td:nth-child(6), #crmtable1 tbody td:nth-child(7) {
	width: 3.5rem;
}

#crmtable1 input[type="checkbox"] {
	-webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1em;
    height: 1em;
    border: 1pt solid #cbd5e1; /* Smooth gray border when unchecked */
    border-radius: 0.25em;        /* Slightly rounded corners */
    display: inline-grid;
    place-content: center;        /* Centers the white checkmark perfectly */
    cursor: pointer;
    vertical-align: middle;
}

#crmtable1 input[type="checkbox"]::before {
	content: "";
    width: 0.85em;
    height: 0.85em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    background-color: #fff; /* The white color of the checkmark */
    
    /* Using a mask to draw a sharp, standard checkmark path */
    clip-path: polygon(14% 44%, 0 61%, 38% 100%, 100% 16%, 83% 0%, 38% 66%);
}

#crmtable1 input[type="checkbox"]:checked {
    background-color: #2e7d32; /* The green background */
    border-color: #2e7d32;     /* Match the border to the green background */
}

#crmtable1 input[type="checkbox"]:checked::before {
    transform: scale(1);
}

.menuwrap .tier1, .tierwrap .tier2, .tierwrap .tier3 {
	display: flex;
	flex-flow: column;
	justify-content: center;
	width: 100%;
	height: 3.125em;
	margin: 0;
	padding: 1em 1em 1em 2em;
	color: #212529;
	font-weight: 500;
	letter-spacing: .05em;
	cursor: pointer;
	transition: all .2s ease-in-out;
	border-bottom: 1pt solid #ddd;
}

.tierwrap .tier2 {
	border-bottom: none;
	height: 2.5em;
	margin-left: 3em;
}

.tierwrap .tier3 {
	border-bottom: none;
	width: 80%;
	height: 1.5em;
	margin-left: 6em;
	padding: 0;
}

.tierwrap .tier2 button.menubtn, .tierwrap .tier3 button.menubtn {
	width: 100%;
	height: 100%;
	background: transparent;
	border: none;
	color: #999;
	font-size: 1rem;
	font-weight: 300;
	text-align: left;
	cursor: pointer;
}

.tierwrap .tier3 button.menubtn {
	font-size: .8rem;
}

.tierwrap .tier3.text {
	font-size: .8rem;
	color: #212529;
	text-decoration: underline;
	font-weight: 500;
	padding: .5em 1.5em;
}

.menuwrap .tier1:hover, .menuwrap .tier1.active {
	background: linear-gradient(to bottom, #eee, #ddd);
}

.tierwrap .tier2 button.menubtn:hover, .tierwrap .tier2 button.menubtn.active {
	font-weight: 700;
	color: #d71321;
}

.tier1 .icon, .tier2 .icon {
	width: 3rem;
	height: 2rem;
	margin-right: .5rem;
}

.tier1 .icon img, .tier2 .icon img {
	width: 2rem;
}

.tierwrap .tier3 button.menubtn:hover, .tierwrap .tier3 button.menubtn.active {
	background: linear-gradient(to bottom, #fa321d, #ff073a);
	color: #fff;
}

#bloglistmbx {
	display: none;
}

.adminportal .container .sandbox {
	position: relative;
	display: flex;
	width: 50vw;
	height: 100vh;
	align-items: flex-start;
	justify-content: center;
}

.adminportal .sandbox .blogentrybx, .adminportal .sandbox .crmlistbx, .adminportal .sandbox .guidesbx {
	display: none;
	width: 100%;
	padding: 1rem;
}

/* __________ End Admin Portal __________ */

/* __________ Start Services, Insurance Types, About Us & Our Team __________ */

section.services, section.instypes, section.aboutus, section.ourteam, section.login, section.privacy {
	background-color: #f8f9fa;
    width: 100%;
    padding: 3em 0 6em 0;
}

section.ourteam {
	background-color: #efeef3;
}

.services .container, .aboutus .container, .ourteam .container, .login .container, .privacy .container {
	width: 70%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
	justify-content: center;
	gap: 1.25em;
}

.privacy .container {
	width: 60%;
	flex-direction: column;
	align-items: flex-start;
}

.privacy .container h3 {
	font-size: 1.5rem;
	width: 100%;
	text-align: left;
	margin: 0;
	padding: 0;
	line-height: 2rem;
	margin-top: 1rem;
}

.privacy .container p {
	width: 100%;
	text-align: left;
	margin: 0;
	padding: 0;
}

.privacy .container ul {
	margin: 0;
	padding: 0rem 0rem 1rem 3rem;
}

.privacy .container ul span {
	font-weight: 700;
}

.privacy .container li {
	margin-bottom: .25rem;
}

.ourteam .container {
	width: 80%;
	align-items: stretch;
	gap: 3em;
}

.login .container {
	width: 60%;
}

.login .container .my-image {
	background-image: url("../img/buttons/padlock.webp");
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
	min-height: 20em;
	width: 35%;
}

body.dark .ourteam .card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 4em 0em 0em 0em;
	padding: 1em;
	width: 22vw;
	justify-content: flex-start;
	align-items: center;
	border: 1pt solid #e1e1e1;
	border-radius: .5em;
	box-shadow: 0 .3em .5em .05em rgb(0, 0, 0, .15);
	text-align: center;
	transition: ease-in-out .3s;
}

.ourteam .card .my-image {
	display: flex;
	flex-shrink: 0;
	width: 7em;
	height: 7em;
	border: none;
	border-radius: 100%;
	box-shadow: 0em .25em .5em 0em rgba(0, 0, 0, 0.5);
	margin-bottom: .5em;
	background-color: transparent;
}

#natepic {
	
	background-image: url("../img/staff/Nate-hdshot-Cir.webp");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

#emilypic {
	background-image: url("../img/staff/Emily-hdshot-Cir.webp");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;	
}

#loydpic {
	background-image: url("../img/staff/Loyd-hdshot-Cir.webp");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;	
}


.ourteam .card h2 {
	width: 100%;
	font-family: "Roboto", sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	color: #444;
	margin-bottom: .25em;
	letter-spacing: .125em;
	text-align: center;
}

.ourteam .card p {
	padding: .5em;
	font-size: .95em;
	font-weight: 400;
	color: #444;
	letter-spacing: .05em;
	line-height: 130%;
	text-align: justify;
}

.ourteam .card p span {
	font-weight: 700;
}

.ourteam .card p.pquote {
	font-style: italic;
}

body.dark .ourteam .card button {
	position: relative;
	
}

.stafftitle {
	font-size: .8em;
	color: #5a5a5a;
	letter-spacing: .08em;
	font-weight: 600;
	margin-bottom: 1.5em;
}

.topspacer {
	height: 20%;
}

.aboutus .container p {
	width: 70%;
	text-align: justify;
}

.instypes .container {
	width: 80%;
    margin: auto;
    display: flex;
	flex-direction: row;
    align-items: center;
    justify-content: center;
	gap: 3em;
}

.instypes hr {
	width: 70%;
	margin: 3em auto;
	border: 0;
  	height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
    background-image: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
}

.services  .calltoaction {
	display: block;
	width: 80%;
	text-align: justify;
}

.services  .calltoaction span {
	font-weight: 700;
}

.services .container button.btn2 {
	width: fit-content;
	margin: 0em 3em;
	padding: 0em 1em;
}

.instypes .container button.btn2 {
	width: fit-content;
	margin: 0;
	padding: 0em 1em;
}

.services .card {
    text-align: center;
    width: 24vw;
    padding: 30px 20px;
    border: 1px solid #bbb;
    border-radius: 5px;
    transition: .25s;
}

body.dark .services .card {
	border-color: #222;
}

.services .card .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    margin: auto;
    background-color: #ccc;
    border-radius: 20px;
    transition: .25s;
	background-color: #77f3fe; /** was #f47a5b **/
}

body.dark .services .card .icon {
	background-color: #77f3fe;
}

.services .card .icon i {
    font-size: 36px;
}

.services .card:hover {
    background-color: #43d2fe50;
}

body.dark .services .card:hover {
    background-color: #43d2fe10;
}

.services .card:hover .icon {
    background-color: #43d2fe;
	transform: scale(1.1);
}

.services .card .heading {
    margin-top: 20px;
    font-size: 22px;
    font-weight: 500;
}

body.dark .card .heading {
	color: #ccc;
}

.services .card .description {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    line-height: 150%;
}

body.dark .card .description {
	color: #aaa;
}

/* __________ End Service __________ */

/* __________ Start Portfolio __________ */

section.portfolio {
    width: 100%;
    margin-bottom: 200px;
}

.portfolio .container {
    width: 80%;
    margin: auto;
}

.portfolio .filter-list {
    list-style: none;
    margin: auto;
    display: flex;
    justify-content: center;
}

.portfolio .filter-list li {
    padding: 5px 15px;
    margin: 5px;
    border: 2px solid #c2e15e;
    border-radius: 10px;
	color: black;
    cursor: pointer;
    transition: .25s;
}

.portfolio .filter-list li {
	color: #ccc;
}

.portfolio .filter-list li:hover,
.portfolio .filter-list li.active {
    background-color: #c2e15e;
	color: #222;
}

.portfolio .item-container {
    margin-top: 80px;
}

.portfolio .card {
    display: flex;
    margin: 0.5vw;
}

.portfolio .card img {
    width: 25vw;
}

.portfolio .card .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #0005;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .25s;
}

body.dark .portfolio .card .text {
	background-color: #0008;
	color: #43d2fe;
	text-shadow: 1px 1px 2px #000;
	text-align: center;
}

.portfolio .card:hover .text {
    opacity: 1;
}

/* Counter */

.counter-container {
    margin-top: 200px;
    width: 100%;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background: linear-gradient(135deg, #77f3feca, #77f3fe90);
    background-attachment: fixed;
	flex-wrap: wrap;
}

.counter-container .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.counter-container .card h2 {
    font-size: 42px;
    font-weight: 600;
    color: #43d2fe;
}

.counter-container .card h2 span {
    color: #fff;
}

.counter-container .card h3 {
    font-weight: 500;
}

/* __________ End Portfolio __________ */

/* __________ Start Resume __________ */

section.resume {
    width: 100%;
    margin-bottom: 200px;
}

.resume .container {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
	flex-wrap: wrap;
}

.resume .section {
    width: 50%;
    padding: 20px;
}

.resume .section .title {
    font-size: 30px;
}

body.dark .resume .section .title,
body.dark .resume .card .heading {
	color: #ccc;
}

.resume .card {
    padding: 30px;
    border: 1px solid #bbb;
    border-radius: 10px;
    transition: .25s;
    margin-top: 2vw;
}

body.dark .resume .card {
	border-color: #333;
}

.resume .card:hover {
    border-color: #43d2fe;
}

.resume .card .heading {
    font-size: 20px;
}

.resume .card .year {
    margin-top: 10px;
    font-size: 16px;
}

.resume .card .description {
    margin-top: 10px;
    font-size: 16px;
    line-height: 150%;
    color: #333;
}

body.dark .resume .card .year,
body.dark .resume .card .description {
	color: #aaa;
}

body.dark .resume .card:hover {
    border-color: #77f3fe50;
}

/* __________ End Resume __________ */

/* __________ Start Testimonial __________ */

section.testimonial {
    width: 100%;
    margin-bottom: 200px;
}

.testimonial .container {
    width: 80%;
    margin: auto;
}

.testimonial .card {
    width: 24vw;
}

.testimonial .card .image {
    display: flex;
    width: 10vw;
    border-radius: 50%;
    overflow: hidden;
    background-color: #fff;
    margin: auto;
}

.testimonial .card .image img {
    display: block;
}

.testimonial .card .text {
    text-align: center;
}

.testimonial .card .text .name {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 600;
}

.testimonial .card .text .prof {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 500;
}

.testimonial .card .text .stars {
    margin-top: 10px;
}

.testimonial .card .text .stars i {
    color: #097ec2;
    font-size: 16px;
}

.testimonial .card .text .description {
    margin-top: 10px;
    font-size: 16px;
    line-height: 150%;
    color: #333;

}

body.dark .testimonial .card .text .name,
body.dark .testimonial .card .text .prof {
	color: #ccc;
}

body.dark .testimonial .card .text .description {
	color: #aaa;
}

/* __________ End Testimonial __________ */

/* __________ Start Blog __________ */

section.blog {
    width: 100%;
    margin-bottom: 200px;
}

.blog .container {
    width: 80%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
	flex-wrap: wrap;
}

.blog .card {
    width: 25vw;
}

.blog .card .image {
    display: flex;
    overflow: hidden;
}

.blog .card .image img {
    width: 25vw;
	cursor: pointer;
	transition: .25s;
}

.blog .card:hover img {
    transform: scale(1.1);
}

.blog .card .text {
    margin-top: 10px;
}

.blog .card .text .date {
    font-size: 12px;
}

body.dark .blog .card .text .date {
	color: #ccc;
}

.blog .card .text .heading {
    margin-top: 20px;
    font-size: 22px;
    cursor: pointer;
	transition: .25s;
}

.blog .card .text .heading:hover {
    color: #c2e15e;
}

.blog .card .text .description {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 150%;
    color: #333;
    width: 90%;
}

body.dark .blog .card .text .description {
	color: #aaa;
}

.blog .card .text .read {
    font-size: 14px;
    text-decoration: none;
	color: black;
	transition: .25s;
	color: #097ec2;
}

.blog .card .text .read:hover {
	color: #54B6EF;
}


/* __________ End Blog __________ */

/* __________ Start Contact and Hire __________ */

section.contact {
   	display: none;
	position: fixed;
	width: 60%;
	height: 75vh;
	top: 8%;
	left: 25%;
	margin: auto;
	z-index: 99999;
	background-image: -moz-linear-gradient(bottom left, #354555 25%, #1d2e3e 60%); /* #25384b  */
	background-image: -webkit-linear-gradient(bottom left, #354555 25%, #1d2e3e 60%);
	background-image: linear-gradient(to bottom right, #354555 25%, #1d2e3e 60%);
	border: none;
	border-radius: .5em;
	box-shadow: 0 1em 1.5em 0 rgba(0, 0, 0, .85);
}

.contact .container, .contactus .formwrap, .quoterequest .formwrap, .login .formwrap {
    width: fit-content;
	margin: 0;
    display: flex;
	flex-flow: row wrap;
    justify-content: space-around;
	align-items: flex-start;
}

.login .formwrap {
	width: 60%;
	justify-content: flex-start;
	gap: 3em;
}

.contactus .formwrap {
	width: 80%;
	margin: auto;
}

.quoterequest .formwrap {
	width: 100%;
	margin: auto;
}


body.dark .contact h1.title {
	font-size: 2.5rem;
	color: #f1f1f1;
}

body.dark .contact h1.title::after {
	bottom: -.5rem;
	width: 70%;
	background-color: #f91728;
}

.contact form, .contactus form, .quoterequest form, .login form {
    width: 50%; /* was 60% when the container was 80% */
    display: flex;
    flex-flow: row wrap;
	padding: .5em;
    gap: 1rem;
	border: 1pt solid #516374;
	border-radius: .25em;
}

.quoterequest form {
	width: 60%;
	padding: 2em 1em;
}

.login form {
	flex-flow: column;
	border: none;y
}

.contact input, textarea, select, .contactus input, textarea, select, .quoterequest input, textarea, select, .login input, textarea, select, .adminportal input, textarea, select {
    height: 2.5em; /** 34px **/
    outline: none;
    padding: .5em;
    resize: none;
    border: 1px solid #aaa;
	border-radius: .25em;
    background-color: transparent;
    font-family: 'Poppins', sans-serif;
	transition: .25s;
}

body.dark .contact input,
body.dark .contact textarea,
body.dark .contact select {
	background-color: #162431;
	border-color: #3c4d5e;
	color: #eee;
}

body.dark .contact select {
	font-size: 1rem;
	height: 2rem;
	padding: .25rem;
	width: 60%;
}

body.dark .contactus input,
body.dark .contactus textarea,
body.dark .contactus select,
body.dark .quoterequest input,
body.dark .quoterequest textarea,
body.dark .quoterequest select,
body.dark .adminportal input,
body.dark .adminportal textarea,
body.dark .adminportal select {
	background-color: #efeef3;
	border-color: #e1e1e5;
	color: #212529;
}

body.dark .adminportal input, textarea, select {
	width: 70%;
	font-size: 1.125rem;
}

body.dark .quoterequest input[type="checkbox"], body.dark .adminportal input[type="checkbox"] {
	accent-color: #d71321;
}

body.dark .quoterequest select, ::picker(select), body.dark .adminportal select, ::picker(select) {
	color: #777;
}

body.dark .quoterequest .textlabel, body.dark .adminportal .textlabel {
	margin: 0;
	padding: 0;
	font-size: .9rem;
	color: #555;
}

body.dark .quoterequest .textlabel2 {
	font-size: 1rem;
	color: #777;
	width: 100%;
	margin: 0;
	padding: 0;
}


body.dark .quoterequest .textlabelsm {
	font-size: .75rem;
	color: #555;
}

body.dark .quoterequest .textlabelsm span {
	font-style: italic;
	font-weight: 500;
	color: #333;
}

.quoterequest .checkbox-container {
	display: flex;
	align-items: center;
	gap: .35em;
}

.quoterequest .checkbox-container .inscat {
	color: #777;
	margin-top: .25em;
	margin-right: 1.5em;
	letter-spacing: .03rem;
	transition: all .3s ease-in-out;
}

.quoterequest .checkbox-container .inscatsel {
	color: #d71321;
	font-weight: 700;
}

.quoterequest .inputcat-container {
	width: 100%;
	color: #777;
}

#autoinstitle, #autoinscntnr, #auto1, #autoend, #comminstitle, #comminscntnr, #commend {
	display: none;
}

.quoterequest .auto-inputcntnr {
	display: flex;
	align-items: center;
	gap: .25em;
}

.quoterequest .auto-inputcntnr span {
	color: #333;
	font-weight: 500;
	margin: 0 .5em;
}

#instypelbl, #instypelbl2 {
	font-size: .8em;
	font-weight: 700;
	letter-spacing: .03em;
	color: #444;
}

#autoqtylbl {
	color: #777;
	font-weight: 400;
	margin-bottom: 1.5em;
}
.auto-inputcntnr .automake {
	width: 12em;
}

#automake1 {
	margin-left: .25em;
}

.auto-inputcntnr .automodel {
	width: 10em;
}

.auto-inputcntnr .autoyear {
	width: 4em;
	text-align: center;
}

#coveragelbl {
	margin-left: 2em;
}

.auto-inputcntnr .drivers {
	width: 32vw;
	height: 6vh;
	margin: .5em 0 1.5em 5.5em;
	letter-spacing: .03em;
}

#vehicleqty {
	width: 3em;
	margin-bottom: 1.5em;
	text-align: center;
}

#otherinsbx {
	display: none;
	width: 40%;
	margin-left: 9.5rem;
}

#otherins {
	width: 100%;
}

#editor-container {
	height: 25vh; 
	width: 100%;
	margin-bottom: 15px; 
}

body.dark .contact label, body.dark .contactus label, body.dark .quoterequest label, body.dark .adminportal label {
	color: #aaa;
	margin-left: .25rem;
	font-size: .8rem;
	padding: 0;
	display: inline-flex;
}

body.dark .contactus label, body.dark .quoterequest label, body.dark .adminportal label {
	margin-left: .25rem;
	color: #212529;
	font-size: .8rem;
}

#regardinglbl {
	width: 35%;
	padding-top: .5rem;
	
}


body.dark .contact .spcr-input1, body.dark .contactus .spcr-input1 {
	width: 45%;
}

body.dark .contactus .spcr-input1 {
	width: 41%;
}

body.dark .contact input[type="file"], body.dark .contactus input[type="file"] {
	width: 90%;
	max-width: 100%;
}

body.dark .contact i, body.dark .contactus i, body.dark .quoterequest i {
	margin-left: .5rem;
	transform: scale(1.25);
}

body.dark .contactus i, body.dark .quoterequest i {
	color: #212529;
}

#phone {
	field-sizing: content;
	min-width: 12em;
	max-width: 50%;
}
#birthday {
	width: 8em;
	text-align: center;
}

.contact input:focus, textarea:focus {
    border-color: #77f3fe; /** little darker coral **/
}

.contact form div, .contactus form div, .quoterequest form .input-container, .adminportal form .input-container {
   	width: 100%;
    display: flex;
    gap: 1vw 1vh;
    align-items: flex-start;
    justify-content: space-between;
	flex-flow: row wrap;
}

.adminportal form .input-container {
	flex-direction: column;
	margin: 1rem 0rem 0rem 1rem;
	padding: 2rem 1rem;
	box-shadow: 0 .3em .5em .05em rgb(0, 0, 0, .15); 
}

#name, #cname {
    width: 50%;
}

#state {
	width: 3em;
	border: none;
	background: transparent;
}

#cphone, #phonext {
	width: 20%;
}

#zip {
	width: 25%;
}

#email, #cemail, #csubject, #htype, #address, #city { /* city has outer span width of 50% */
    width: 50%
}

#city {
	width: 61%;
}

#subject {
    width: 100%;
}

#message, #cmessage, #adtnlinfo {
    width: 100%;
    height: 10vw;
}

#blogreadmore {
	height: 15vh;
}

#bloglede {
	height: 8vh;
}

#blogid {
	background: transparent;
	border: none;
	width: 3em;
}

#blogcategory {
	width: 20rem;
	margin-left: 3.5rem;
}

#publishdate, #publishtime {
	width: 12rem;
	margin-left: .5rem;
}

#blogimgcntnr {
	width: 70%;
}

#blogimgcntnr span, #intromsg {
	font-size: .8rem;
	font-style: italic;
}

#blogimgcntnr button {
	font-size: .8rem;
	font-weight: 500;
	background: transparent;
	border: none;
	color: #aaa;
	cursor: pointer;
}

#blogimgcntnr button:hover {
	color: #ff073a;
}

#blogimg, #blogimg2 {
	width: 40%;
	margin-left: .5rem;
}

#blogimg2 {
	display: none;
}

#blogimgtxt, #blogimg2 {
	width: 50%;
}

#msgbox {
	color: #ff073a;
	transition: all .2s ease-in-out;
}

#bsequence {
	width: 5em;
	text-align: center;
	margin-left: .5rem;
}

#publishingbx {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

#saveblog {
	margin-left: 1rem;
}

#updateblog {
	margin-top: 1em;
}

#updateblog img {
	width: 3rem;
}

#loading-spinner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.spinner2 {
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3498db; /* Blue accent color */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.cityzip {
	width: 50%;
}

.pmcbox {
	width: 50%;
}

.contact .text, .contactus .text, .quoterequest .text {
	padding: 0;
	min-width: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch; /** stretch makes width equal in column direction with flex:1 in the child divs **/
}

.text .info, .contactus .text .info, .quoterequest .text .info {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	min-width: auto;
	padding: 0;
	border: 1pt solid #516374;
	border-radius: .25em;
}

.contactus .text .info, .quoterequest .text .info {
	padding-bottom: 1rem;
}

.text .info .txt-image {
	height: 13em;
	width: 100%;
	background-image: url("../img/pgs/inside-office.webp");
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
}

.contactus .text .info .txt-image, .quoterequest .text .info .txt-image {
	height: 8em;
	width: 100%;
	background-image: url("../img/pgs/officebldg-small.webp");
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
}

.contact .text p, .contactus .text p, .quoterequest .text p {
    margin-bottom: .5em;
	padding: 0em 1rem;
	font-family: "Roboto", sans-serif;
    font-size: 1rem;
    font-weight: 300;
	line-height: 130%;
	display: flex;
	align-items: center;
	color: #eee;
}

.contactus .text p, .quoterequest .text p {
	padding: 0;
}

body.dark .contact .text p, body.dark .contactus .text p, body.dark .quoterequest .text p {
	color: #eee;
}

.contact .text h3, .contactus .text h3, .quoterequest .text h3 {
	margin-bottom: 1.5em;
	padding: 0em 1em;
	color: #a6d2eb;
	font-family: "Oswald", sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	letter-spacing: .15em;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, .79);
}

.contactus .text h3, .quoterequest .text h3 {
	color: #212529;
	text-shadow: none;
	margin-top: .75em;
	margin-bottom: 1em;
}


.contact .text h3::after, .contactus .text h3::after, .quoterequest .text h3::after {
	content: "";
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 1px;
    background-color: #516374;
} 

.contactus .text h3::after, .quoterequest .text h3::after {
	top: 12.25rem;
	background-color: #212529;
	height: .02rem;
}

.contact .text p i, .contactus .text p i, .quoterequest .text p i {
	font-size: 1.125em;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: transparent; /** little darker  **/
    color: #a3cde5;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .79);
}

.contactus .text p i, .quoterequest .text p i {
	color: #212529;
	text-shadow: none;
}

.contactus .info .fbicon, .quoterequest .info .fbicon {
	display: inline-flex;
	width: 3rem;
	margin: .25rem 1rem 0 0;
}


.contact .text p span, .contactus .text p span, .qutoerequest .text p span {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: .125em;
    margin-left: .25em;
	color: #b6e0f8;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .79);
}

.contactus .text p span, .quoterequest .text p span {
	color: #212529;
	text-shadow: none;
	font-weight: 400;
}

#othercntct {
	display: inline-block;
	width: 80%;
	font-size: 1.25em;
	letter-spacing: .1rem;
	margin: 2rem 0 .5rem 0;
	margin-left: 10%;
	text-align: center;
	padding: .5rem 0;
	border: 1pt solid #212529;
	border-left: none;
	border-right: none;
}

.formmsgbox {
	display: inline-block;
	font-family: "Roboto", sans-serif;
	font-size: 1.5em;
	color: #d71321;
	width: 100%;
	height: 3em;
	text-align: center;
	padding-top: 1rem;
}

/* __________ End Contact __________ */

/* __________ Start Footer __________ */

footer {
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d71321; /** little darker coral **/
}

footer a {
    text-decoration: none;
	color: black;
}

footer p {
	color: #f1f1f1;
}

/* __________ End Footer __________ */
.closebtn {
	position: absolute;
	right: 2em;
	top: 3em;
	width: 2em;
	height: 2em;
	border: 2pt solid #fc404e;
	border-radius: 50%;
	background-color: transparent;
	font-size: 1em;
	font-weight: 600;
	font-family: "Poppins", serif;
	color: #fc404e;
	opacity: .7;
	cursor: pointer;
	transition: .3s ease-in-out;
}

.closebtn:hover {
	background-image: -moz-linear-gradient(bottom left, #fc404e 0%, #f91728 100%);
	background-image: -webkit-linear-gradient(bottom left, #fc404e 0%, #f91728 100%);
	background-image: linear-gradient(to bottom right, #fc404e 0%, #f91728 60%);
	color: #000;
	opacity: 1;
}

.msgbox-backdrop {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #000;
	opacity: .85;
	z-index: 9995;
}

.msgbox-cntnr {
	display: none;
	position: fixed;
	top: 40%;
	left: 50%;
	width: 30em;
	height: 14em;
	transform: translate(-50%, -50%);
	z-index: 999999;
	background-color: #f9f9f9;
	border-radius: 1em;
	text-align: center;
	padding: 1.25em;
}
.msgbox-heading {
	margin: 0;
	padding: 0;
	font-family: "Oswald", sans-serif;
	font-size: 1.5em;
	font-weight: 500;
	letter-spacing: .125em;
	line-height: 1em;
	color: #ff073a; /* was fc2e2e */
}
.msgbox-cntnr hr {
  display: inline-block;
  border: 0;
  width: 80%;
  height: 2px;
  margin: 0 0 .5em 0;
  padding: 0;
  background-image: -webkit-linear-gradient(left, rgba(255,7,58,0), rgba(255,7,58,0.75), rgba(255,7,58,0));
  background-image: -o-linear-gradient(left, rgba(255,7,58,0), rgba(255,7,58,0.75), rgba(255,7,58,0));
  background-image: linear-gradient(to right, rgba(255,7,58,0), rgba(255,7,58,0.75), rgba(255,7,58,0));
}
.msgbox-body, .msgbox-body p, .msgbox-body span {
	font-family: "Roboto", sans-serif;
	font-size: 1em;
	font-weight: 400;
	letter-spacing: .06em;
	line-height: 125%;
	color: #232323;
	margin-bottom: .5em;
}
.msgbox-body p {
	color: #ff073a;
	font-weight: 400;
}
.msgbox-body span {
	font-weight: 600;
}
.msgbox-cntnr button {
	margin-top: .5em;
	width: 6em;
	height: 2em;
	opacity: 1;
}

.dialog-container {
	
}
.dialogbox {
  display: none;
  position: fixed;
  top: 40%; left: 0;
  width: 16em;
  height: 6em;
  transform: translate(-50%, -50%);
  z-index: 999999;
  border-radius: .25em;
  background-color: #f9f9f9; /* Semi-transparent background */
  text-align: center;
  padding: .5em;
}
.dialogpntr {
  position: absolute;
  top: 0;
  left: 20px;
  width: 1.5em;
  height: 1.5em;
  background-color: #f9f9f9;
  z-index: 9999999;
  transform: rotate(45deg);
}
.dialog-hdr {
	font-size: 1.25em;
	font-family: "Oswald", sans-serif;
	font-weight: 600;
	color: #5a5a5a;
	background-image: url("../img/btnicons/alert.svg");
	background-size: contain;
	background-position: 22% 0;
	background-repeat: no-repeat;
	padding-bottom: .06em;
}
.dialogbox hr {
	margin-top: .25em;
	width: 80%;
	margin-left: 10%;
}

.dialog-msg {
	font-size: 1em;
	color: #232323;
}
.dialog-msg span {
	font-size: .875em;
	color: #ff073a;
}