/* A simple CSS reset for consistency across browsers */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Ensures padding and borders are included in element's total width and height */
}

body {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    background-color: #4c5d6d;
    color: #444;
    white-space: normal;
    line-height: 1.5;
    font-size: 18px;
    padding: 0px;
    margin: 0px;
}

header {
    display: flex;
    width: 100%;
    color: #444;
    background: #fff;
    padding: 0px 0px 0px 0px;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 5px;
}

.rounded {
    border: 1px solid #ccc;
    border-radius: 7px;
    margin: 6px 6px 0px 6px;
    object-fit: cover;  
}

.left-dropdown-content {
    display: inline;
}

.right-dropdown-content {
    display: inline;
    margin: 0px 0px 0px 20px;
}

logo {
    display: inline;
    width: 17%;
    color: #444;
    padding: 0px 0px 0px 0px;
    margin: 5px 0px 0px 0px;
    text-align: left;
    align-items: left;
}

menu {
    display: inline;
    width: 53%;
    color: #444;
    padding: 25px 0px 0px 46px;
    text-align: left;
    align-items: left;
    font-size: 14px;
}

.menu-icon {
    display: inline;    
}

.sub-menu {
    display: flex;
    margin: 6px 0px 0px 0px;
}

.hvac {
    display: inline;
    font-size: 18px;
    color: #CD7F32;
    margin: 0px 0px 0px 7px;
    padding-bottom: 20px;
}

.menu_items {
    display: inline;
    color: #4c5d6d;
    padding: 0px 32px 0px 0px;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
}

.menu_items_first {
    display: inline;
    color: #4c5d6d;
    padding: 0px 20px 0px 0px;
    text-decoration: none;
    font-size: 14px;
}

/* Navbar container */
.navbar {
  display: flex;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  font-family: Arial;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 17px;
  color: #444;
  text-align: center;
  padding: 0px 12px;
  text-decoration: none;
  margin: 0px;
}

/* Container for the carrot */
.dropdown-carrot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-right: 1px solid #444;
    border-bottom: 1px solid #444;
    transform: rotate(45deg); /* Points down */
    transition: transform 0.3s ease;
    margin-left: 8px;
    margin-bottom: 3.7px;
}

/* Rotate on dropdown hover */
.dropdown:hover .dropdown-carrot {
    transform: rotate(225deg); /* Points up */
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
      margin: 30px;
  font-size: 17px;
  border: none;
  outline: none;
  color: #444;
  padding: 3px 12px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #fff;
}

.dropdown-con {
    display: flex;    
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  white-space: normal;
  position: absolute;
  top: 118px;
  left: 790px;
  border: 1px solid #ccc;
  border-top: 0px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 4px 4px 4px 4px;
  background-color: #fff;
  width: 660px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: left;
  display: list-item;     /* Forces the element to act like an <li> */
  list-style-type: disc;  /* Adds the round bullet */
  list-style-position: inside; /* Positions bullet inside the flow */
  margin-right: 25px;      /* Indents the link */
  color: #444;
  font-size: 16px;
  padding: 5px 5px;
  text-decoration: none;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #fff;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Dropdown content (hidden by default) */
.dropdown-content-pro {
  display: none;
  white-space: normal;
  position: absolute;
  top: 118px;
  left: 950px;
  border: 1px solid #ccc;
  border-top: 0px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 4px 4px 4px 4px;
  background-color: #fff;
  width: 660px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content-pro a {
  float: left;
  display: list-item;     /* Forces the element to act like an <li> */
  list-style-type: disc;  /* Adds the round bullet */
  list-style-position: inside; /* Positions bullet inside the flow */
  margin-right: 25px;      /* Indents the link */
  color: #444;
  font-size: 16px;
  padding: 5px 5px;
  text-decoration: none;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content-pro a:hover {
  background-color: #fff;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content-pro {
  display: block;
}

.button-container {
    display: flex;
}

.find-local-pros {
    display: inline;
    border: 1px solid #CD7F32;
    border-radius: 20px;
    background: #CD7F32;
    width: 170px;
    color: #fff;
    font-size: 14px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 6px 6px 6px 6px;
}

.join-as-a-pro {
    display: inline;
    border: 1px solid #CD7F32;
    border-radius: 20px;
    background: inherit;
    width: 150px;
    color: #CD7F32;
    font-size: 14px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 6px 6px 6px 6px;
    margin: 0px 0px 0px 10px;
}

.join-as-a-pro:hover {
    display: inline;
    border: 1px solid #CD7F32;
    border-radius: 20px;
    background: #CD7F32;
    width: 150px;
    color: #fff;
    font-size: 14px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 6px 6px 6px 6px;
    margin: 0px 0px 0px 10px;
}

find {
    display: inline;
    width: 30%;
    color: #444;
    padding: 17px 0px 0px 40px;
    text-align: left;
    align-items: left;
    font-size: 15px;
}

.find_items {
    display: inline;
    color: #4c5d6d;
    padding: 0px 44px 0px 0px;
    text-align: center;
    text-decoration: none;
    font-size: 15px;
}

.display-container {
    display: flex;
    border: 1px solid #aaa;
    border-radius: 10px;
    background: #fff;
    margin: 15px 0px 0px 0px;
    padding: 9px 5px 0px 5px;
}

.rank-1 {
    display: inline;
    font-size: 32px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 40px 18px 0px 18px;
}

.rank-2 {
    display: inline;
    font-size: 32px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 40px 14px 0px 14px;
}
.rank-3 {
    display: inline;
    font-size: 32px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 40px 14px 0px 14px;
}
.rank-4 {
    display: inline;
    font-size: 32px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 40px 14px 0px 14px;
}
.rank-5 {
    display: inline;
    font-size: 32px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 40px 14px 0px 14px;
}
.rank-6 {
    display: inline;
    font-size: 32px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 40px 14px 0px 14px;
}
.rank-7 {
    display: inline;
    font-size: 32px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 40px 17px 0px 14px;
}

.description {
    display: inline;
    font-size: 16px;
    color: #444;
    text-align: left;
    align-items: center;
    margin: 0px 10px 0px 15px;
    padding: 0px;
}

.show-logo {
    display: inline;
    font-size: 22px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

.show-logo-rheem {
    display: inline;
    font-size: 22px;
    color: #444;
    text-align: center;
    align-items: center;
    margin: 0px;
    padding: 0px;
}

.show-logo-list {
    display: inline;
    width: 130px;
    color: #444;
    text-align: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0px;
    margin: 0px;
}

.show-logo-list-rheem {
    display: inline;
    width: 130px;
    color: #444;
    text-align: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 25px 25px 25px 25px;
    margin: 0px;
}

.show-logo-list-carrier {
    display: inline;
    width: 130px;
    color: #444;
    text-align: center;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 43px 11px 43px 11px;
    margin: 0px;
}

.flex-grid {
  display: grid;
  width: 800px;
  /* repeat(4, 1fr) creates 4 equal columns */
  grid-template-columns: repeat(4, 1fr); 
  /* repeat(3, 100px) creates 3 rows of 100px height */
  grid-template-rows: repeat(2, 7px); 
  gap: 8px; /* Optional spacing between items */
  font-size: 14px;
  margin: 10px 0px 10px 0px;
}

.col-half {
  /* Calculate width for 4 columns: (100% / 4) minus gap space */
  flex: 0 0 calc(25% - 10px); 
  height: 100px; /* Optional row height */
}

.flex-grid-border {
  border: 1px solid #ccc;
  border-radius: 10px;
  //background: navy;
      background: #fff;
  color: #fff;
  margin-top: 20px;
}

.flex-grid-lines {
  display: grid;
  //width: 1400px;
  border-bottom: 1px solid #ccc;
  //border-radius: 10px;
  /* repeat(4, 1fr) creates 4 equal columns */
  grid-template-columns: 200px repeat(5, 1fr); 
  /* repeat(3, 100px) creates 3 rows of 100px height */
  grid-template-rows: repeat(2, 7px); 
  gap: 8px; /* Optional spacing between items */
  font-size: 13px;
  //background: #fff;
  color: #444;
  margin: 0px 0px 0px 0px;
  padding: 11px 0px 11px 24px;
}

.flex-grid-lines-top {
  display: grid;
  //width: 1400px;
  border-bottom: 1px solid #ccc;
  //border-radius: 10px;
  /* repeat(4, 1fr) creates 4 equal columns */
  grid-template-columns: 200px repeat(5, 1fr); 
  /* repeat(3, 100px) creates 3 rows of 100px height */
  grid-template-rows: repeat(2, 7px); 
  gap: 8px; /* Optional spacing between items */
  font-size: 13px;
  //background: #fff;
  color: #444;
  margin: 0px 0px 0px 0px;
  padding: 11px 0px 11px 24px;
}

.flex-grid-lines-brands {
  display: grid;
  //width: 1100px;
  border-bottom: 1px solid #ccc;
  //border-radius: 10px;
  /* repeat(4, 1fr) creates 4 equal columns */
  grid-template-columns: 200px repeat(5, 1fr); 
  /* repeat(3, 100px) creates 3 rows of 100px height */
  grid-template-rows: repeat(2, 7px); 
  gap: 8px; /* Optional spacing between items */
  font-size: 13px;
  //background: #fff;
  color: #444;
  margin: 0px 0px 0px 0px;
  padding: 11px 0px 11px 24px;

}

.flex-grid-lines-end {
  display: grid;
  //width: 1100px;
  //border-bottom: 1px solid #ccc;
  //border-radius: 10px;
  /* repeat(4, 1fr) creates 4 equal columns */
  grid-template-columns: 200px repeat(5, 1fr); 
  /* repeat(3, 100px) creates 3 rows of 100px height */
  grid-template-rows: repeat(2, 7px); 
  gap: 8px; /* Optional spacing between items */
  font-size: 13px;
  //background: #fff;
  color: #444;
  margin: 0px 0px 0px 0px;
  padding: 11px 0px 11px 24px;

}

.col-half-lines-brands {

}

.col-half-lines {

}

.col-half-lines-end {

}

.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;
}

.dir-con
{
    display: flex;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 15px 0px 10px 5px;
    margin: 0px;
}

.dir-con-no-border
{
    display: flex;
    width: 100%;
    border-radius: 10px;
    padding: 0px 0px 10px 40px;
    margin: 0px;
}

.dir-row
{
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 10px 0px 5px 0px;
    margin: 0px;
}

.dir-row-no-border
{
    border-radius: 10px;
    padding: 20px 0px 5px 0px;
    margin: 0px;
}

.dir-col {
    display: inline;
    list-style: none;
    margin: 0px;
    /* Clear floats after the columns */
    overflow: auto; /* A simple way to contain floats */
    float: left; /* Floats items to the left, placing them side by side */
    width: 33.33%; /* Sets each item to one-third of the container's width */
    padding: 10px 15px 5px 0px;
    box-sizing: border-box;
}

.dir-col-home {
    display: inline;
    list-style: none;
    margin: 0px;
    /* Clear floats after the columns */
    overflow: auto; /* A simple way to contain floats */
    float: left; /* Floats items to the left, placing them side by side */
    width: 33.33%; /* Sets each item to one-third of the container's width */
    padding: 10px 15px 5px 70px;
    box-sizing: border-box;
}

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

.container {
    display: flex;
    width: 100%;
    color: #444;
    background: #fff;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    margin: 0px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

.container-shrink {
    display: inline;
    width: 1140px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #444;
    padding: 0px;
    text-align: left;
    margin: 0px;
}

.container-content {
    display: flex;
    width: 100%;
    color: #444;
    background: inherit;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    margin: 0px;
}

.container-content-shrink {
    display: inline;
    width: 1140px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #444;
    padding: 0px;
    text-align: left;
    margin: 0px;
}

.container-footer {
    display: flex;
    width: 100%;
    color: #eee;
    background: #4c5d6d;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    margin: 0px;
}

.container-footer-shrink {
    display: inline;
    width: 1000px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #444;
    padding: 0px;
    text-align: left;
    margin: 0px;
}

.container-content-main {
    display: flex;
    width: 100%;
    color: #444;
    background: #fff;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    margin: 0px;
}

.container-content-main-shrink {
    display: inline;
    width: 1140px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #444;
    padding: 0px;
    text-align: left;
    margin: 0px;
}

.breadcrumbs-container {
    display: flex;
    width: 100%;
    color: #444;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    margin: 0px 0px 0px 0px;
}

.breadcrumbs-container-shrink {
    display: inline;
    width: 1140px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #fff;
    padding: 0px;
    text-align: left;
    margin: 0px 0px 5px 0px;
}

.welcome-container {
    display: flex;
    width: 100%;
    color: #fff;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    margin: 0px 0px 0px 0px;
}

.welcome-container-shrink {
    display: inline;
    width: 1000px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    text-align: center;
    color: #eee;
    font-size: 12px
    padding: 0px;
    margin: 5px 0px 5px 0px;
}

p.welcome {
    font-size: 15px; 
    color: #eee;
    margin: 0px;
    padding: 0px;
}

.link-container {
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    padding: 0px;
    text-align: left;
    margin: 0px;
    color: #fff;
}

.link-container::after {
    content: '>'; /* Or a CSS-drawn arrow */
    margin-left: 5px;
    margin-right: 5px;
    transition: transform 0.2s;
    color: #fff;
}

h1 {
    margin: 20px 0px 10px 0px;
    padding: 0px;
    color: #4c5d6d;
    font-size: 23px;
}

h1.common {
    margin: 40px 0px 0px 0px;
    padding: 0px;
    color: #4c5d6d;
    font-size: 23px;
}

h1.dir {
    margin: 10px 0px 10px 0px;
    padding: 0px;
    color: #4c5d6d;
    font-size: 23px;
}

h2 {
    margin: 10px 0px 10px 0px;
    padding: 0px;
    color: #CD7F32;
    font-size: 20px;
    font-weight: 550;
}

h2.dropdown-header {
    margin: 0px 0px 0px 0px;
    padding: 0px;
    color: #4c5d6d;
    font-size: 20px;
    font-weight: 550;
}

h2.top-list {
    margin: 10px 0px 10px 0px;
    padding: 0px;
    color: #CD7F32;
    font-size: 20px;
    font-weight: 550;
}

h3 {
    margin: 10px 0px 10px 0px;
    padding: 0px;
    color: #4c5d6d;
    font-size: 17px;
    font-weight: 550;
}

h3.dir {
    margin: 0px 0px 20px 0px;
    padding: 0px;
    color: #4c5d6d;
    font-size: 17px;
    font-weight: 550;
}

label
{
    font-weight: 550;
    padding: 0px 5px 0px 0px;
}

.main_container {
    display: flex;
    //background: #fff;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0px 0px 0px 0px;
    margin: 0px;
    margin-bottom: 30px;
}

main {
    display: block;
    //background: #fff;
    width: 430px;
    padding: 0px 0px 0px 10px;
    text-align: left;
    margin-bottom: 20px;
    font-size: 19px;
}

.main-article {
    background: #fff;
    justify-content: left;
    align-items: left;
    width: 100%;
    padding: 0px 0px 0px 0px;
    margin: 30px 0px 0px 0px;
    margin-bottom: 20px;
}

.container-content-main-leads {
    display: flex;
    width: 100%;
    color: #444;
    background: #CD7F32;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    margin: 0px;
}

.container-content-main-leads-shrink {
    display: inline;
    width: 900px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #444;
    padding: 0px;
    text-align: left;
    margin: 0px;
}

.container-leads-info {
    display: flex;
    width: 100%;
    color: #444;
    background: #fff;
    justify-content: center;
    align-items: center;
    padding: 0px;
    text-align: center;
    margin: 0px;
}

.container-leads-info-shrink {
    display: inline;
    width: 900px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    color: #444;
    padding: 0px;
    text-align: left;
    margin: 0px;
}

.main-article-leads {
    background: carrot;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 100%;
    color: #eee;
    padding: 0px 0px 0px 0px;
    margin: 30px 0px 0px 0px;
    margin-bottom: 20px;
}

h1.leads {
    margin: 20px 0px 0px 0px;
    padding: 0px;
    color: #fff;
    font-size: 60px;
}

.pro-signup {
    display: inline;
    border: 1px solid #58cced;
    border-radius: 30px;
    background: #58cced;
    //width: 250px;
    color: #fff;
    font-weight: 500; 
    font-size: 20px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    padding: 9px 60px 9px 60px;
}

h3.leads {
    margin: 20px 0px 40px 0px;
    padding: 0px;
    color: #fff;
    font-size: 19px;
}

p.spacer-leads-10 {
    content: ' ';
    margin: 0px 0px 10px 0px;
    padding: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

p.spacer-leads-20 {
    content: ' ';
    margin: 0px 0px 20px 0px;
    padding: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

p.spacer-leads-30 {
    content: ' ';
    margin: 0px 0px 30px 0px;
    padding: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

p.spacer-leads-80 {
    content: ' ';
    margin: 0px 0px 80px 0px;
    padding: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

.main-leads-info {
    background: #fff;
    justify-content: left;
    text-align: left;
    align-items: center;
    width: 100%;
    color: #eee;
    padding: 0px 0px 0px 0px;
    margin: 30px 0px 0px 0px;
    margin-bottom: 20px;
}

ul {
    //display: inline;
}

li {
    //list-style-type: bullet;
    margin: 10px;
    font-size: 12px;
    text-align: left;
}

.dir-in
{
    //list-style-type: circle;
    display: inline;
    margin: 15px 35px 0px 0px;
}

a {
    //color: #4c5d6d;
    font-size: 13px;
}

a.top_link {
    font-size: 16px;
    padding: 0px 0px 0px 0px;
    text-decoration: none;
}

a.top_link4 {
    font-size: 16px;
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    color: #000;
}

a.sub_link {
    font-size: 15px;
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    color: #000;
}

a.sub_link2 {
    font-size: 14px;
    padding: 0px 0px 0px 0px;
    text-decoration: none;
    color: blue;
}

.top {
    font-size: 18px;
    padding: 0px 0px 0px 0px;
    list-style-type: none;
}

.sub {
    font-size: 12px;
    margin: 0px 0px 0px 12px;
    list-style-type: disc;
    color: #000;
}

.sub-home {
    font-size: 11px;
    margin: 0px 0px 0px 22px;
    list-style-type: disc;
    color: #000;
}

.sub_none {
    font-size: 12px;
    margin: 0px 0px 0px 0px;
    padding: 0px;
    list-style-type: none;
    color: #000;
}

.sub2 {
    font-size: 14px;
    margin: 0px 0px 0px 12px;
    list-style-type: circle;
}

.sub3 {
    font-size: 13px;
    margin: 5px 0px 0px 0px;
    list-style-type: none;
}

.sub5 {
    font-size: 13px;
    margin: 10px 0px 5px 0px;
    list-style-type: none;
}

.sub_header {
    font-size: 15px;
    margin: 0px 0px 0px 0px;
    list-style-type: none;
    color: #000;
}

.sub_header_cat {
    font-size: 13px;
    margin: 5px 0px 0px 0px;
    list-style-type: none;
    color: #000;
}

/* Removes default indentation from the top-level list */
ul {
    padding-inline-start: 0;
    list-style-type: circle;
}
li {
    padding-left: 0px;
    list-style-type: circle;
}

li.normal {
    margin-left: 12px;
    padding-left: 3px;
    list-style-type: disc;
}

/* Adds indentation to all nested lists (second level and deeper) */
ul ul, ul ol {
    padding-inline-start: 0px; /* Restores/sets the indentation for nested lists */
}

/* Optional: customize the list item markers for different levels */
ul ul {
    list-style-type: circle;
}

ul ol {
    list-style-type: lower-roman;
}
ul {
    padding-left: 0px;
    display: inline;
}
.category_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.categories {
    margin: 10px;
    font-size: 12px;
    justify-content: center;
    align-items: center;
}

.common_problems_container {
    display: flex;
    width: 100%;
    justify-content: left;
    align-items: left;
    margin: 0px;
    padding: 0px;
}

.common_problems {
    width: 100%;
    font-size: 10px;
    margin: 0px;
    padding: 0px;
    justify-content: left;
    align-items: left;
    text-align: left;
}

.decions_tools_container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.decision_tools {
    margin: 10px;
    font-size: 12px;
    justify-content: center;
    align-items: center;
}

p {
    color: #444;
    margin: 0px 0px 30px 0px;
    padding: 0px;
    font-size: 15px;
    margin-top: 0px;
    padding-top: 0px;
}

p.spacer {
    content: ' ';
    margin: 0px 0px 10px 0px;
    padding: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

p.small-margin {
    width: fit-content;
    margin: 3px 0px 3px 0px;
    padding: 0px;
    margin-top: 0px;
    padding-top: 0px;
}

p.bottom-line {
    display: block;
    color: #444;
    margin: 70px 0px 130px 0px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
}


.search-container {
    position: relative; /* */
    display: flex; /* */
    //margin-bottom: 10px;
    justify-content: center;
    align-items: center;
    color: #444;
    padding: 25px;
    text-align: center;
}

.search-container input[type="text"] {
  padding: 10px 10px 10px 20px; /* Adjust left padding to make space for the icon */
  width: 475px;
  border: 1px solid #ccc;
  border-radius: 20px; /* Optional: for a rounded look */
  outline: none; /* Removes the default focus outline */
}

.search-icon {
  position: absolute; /* */
  left: 70%; /* Adjust to position the icon inside the input */
  top: 50%;
  transform: translateY(-50%); /* Centers the icon vertically */
  color: #aaa;
  pointer-events: none; /* Allows clicks to pass through the icon to the input */
}

.search-container input[type="text"]:focus + .search-icon {
  color: #555; /* Optional: change icon color on input focus */
}

.footer-copy {
    display: block;
    text-align: center;
    background: #4c5d6d;
    font-size: 0.8rem;
    color: #eee;
    margin: 0px;
    padding: 0px;
}

footer {
    display: block;
    text-align: center;
    background: #4c5d6d;
    margin: 10px 0px 10px 0px;
    padding: 0px;
    font-size: 0.8rem;
    color: #eee;
}