/* ===================================
          Utility Rates Style
=================================== */

/* =========== Theme ========== */
  /* >> color << */
  /* font color */
  body{
	color: var(--si-black);
  }
  .btn{
	background-color: transparent;
	border:0;
  }
  .hero, 
  footer ul li,
  footer ul li ul li a,
  .business-btn,
  .btn.btn-secondary-ur:hover,
  .nav-link,
  .navigation .dropdown-menu a,
  .hamburger,
  .hero-v3 .shield-container-2025 dd a{
	color: var(--si-white);
  }
  .zipcode-container .btn.btn-find {
	color: var(--si-white);
  }
  nav ul li .nav-link:hover,
  footer ul li .nav-link:hover,
  .nav-link:focus, .nav-link:hover,
  footer ul li .c-link-text-secondary,
  footer p a:hover,
  section ul li a:hover,
  .navigation .dropdown-menu a:hover {
	color:var(--usa-red) !important;
  }
  .hero h1 span,
  .text-si-blue,
  .text-primary-lc,
  .btn.btn-blog-ur:hover {
	color: var(--usa-red);
  }
  .text-success {
	color: var(--usa-red) !important;
  }
  .text-si-darker-blue,
  .zipcode-container .btn-find{
	color: var(--usa-blue);
  }
  .tagline {
	color: var(--si-very-pale-blue);
  }
  .btn-find:hover {
	color: var(--usa-red);
  }
  .hero .superwidget-container{
	color:var(--si-black) !important;
  }
  .zipcode-container .btn.btn-find:hover{
	background-color: var(--usa-blue);
  }
/*------- lotus_two_col layout -------*/
.lotus_two_col h3 a{
	color: var(--si-black);
}
@media (max-width: 980px) {
	.hero .superwidget-container li.filter-sort-item label{
	  color:var(--si-white);
	}
	.hero .superwidget-containe ul li{
		color:var(--si-black) !important;
	}
}
/* background */
/* >> hero << */
.hero {
  background: url('https://www.utilityrates.com/images/family-home.webp') no-repeat center bottom;
}
	.hero-v3 .shield-container-2025 ul li::before {
		background-image: url(/images/icons/icon-check-green.svg);
	}
	.step-by-step.v1 .row .col-md-4:nth-child(2) span::after{
		background-image: url("../images/icons/icon-arrow-head-right-gray.png");
	  }
.zipcode-container .btn-find:hover, .navbar, .navigation .dropdown-menu, .sticky-header, .sticky-on-scroll #mobileMenu.show {
	background-color: var(--usa-blue);
}
@media (max-width: 1000px) {
	.mobile-menu {
		background-color: var(--usa-blue);
	}
}
/*------- quote -------*/
.quote{
}
  .quote::before {
	background-image: url(/images/icons/quote-start-white.svg);
  }
  .quote::after {
	background-image: url(/images/icons/quote-end-white.svg);
  }
/*------- step-by-step -------*/  
.step-by-step.v1 .row .col-md-4:nth-child(2) span,
  .step-by-step.v1 .row .col-md-4:last-child span{
	background-color: var(--si-white);
  }
  .step-by-step.v1 .row .col-md-4:first-child span::after{
	background-image: url("../images/icons/icon-arrow-head-right-blue.png");
  }
  .sticky-on-scroll{
	background-color: var(--si-black);
  }
  .bg-si-blue,
  .step-by-step.v3 .row span,
  .step-by-step.v1 .row .col-md-4:first-child span,
  .step-by-step.v1 .row .col-md-4:first-child span::before{
	background-color: var(--usa-red);
  }
@media (min-width: 769px) {
	.step-by-step.v1 .row .col-md-4:first-child span::after{
	  background-image: url("../images/icons/icon-arrow-head-right-blue.png");
	}
	.step-by-step.v1 .row .col-md-4:nth-child(2) span::after{
	  background-image: url("../images/icons/icon-arrow-head-right-gray.png");
	}
}
  .bg-darker-blue{
	background-color: var(--usa-blue);
  }
  .bg-light-gray{
	background-color: var(--si-light-gray);
  }
  .bg-si-gray-100{
	background-color:var(--si-gray-100);
  }
  .step-by-step.v1 .row .col-md-4:nth-child(2) span::before{
	background-color: var(--si-gray-300);
  }
  .hero .overlay{
	background:rgba(0, 0, 0, 0.8);
  }
  .hero-v3 .zip-container, .hero-v3 .shield-container-2025{
	background:rgba(0, 0, 0, 0.7);
  }
	.hero-v3 .shield-container-2025 .zip-container{
		background: transparent;
	}
  .business-btn:hover {
	background: rgba(255,255,255,0.1);
  }
  .zipcode-container .btn-find {
	background-color: var(--usa-red);
  }
  .zipcode-container .btn-find:hover,
	.navbar,
	.navigation .dropdown-menu,
	.sticky-header,
	.sticky-on-scroll #mobileMenu.show{
	  background-color: var(--usa-blue);
	}
  .btn.btn-secondary-ur{
	background-color: var(--usa-red);
  }
	.btn.btn-secondary-ur:hover{
	  background-color: var(--usa-blue);
	}
	.navigation .dropdown-menu a:hover {
	background-color: var(--si-white);
  }
  .utilityrates_2025 .h5, .h6 {
    font-weight: 600 !important;
}
#stickyHeader .btn-find {
	color:var(--si-white);
    background-color: var(--usa-red);
}
.zipcode-container .btn-find:hover,
#stickyHeader .btn-find:hover{
    color:var(--si-white);
    background-color: var(--usa-blue);
}

/* >> affiliates banner << */
.hero .affiliates-logo-container div:first-child::after{
	background-color: #074962;
}
/* >> button << */
#stickyHeader .btn-find {
    background-color: var(--usa-red);
}
.zipcode-container .btn-find:hover,
#stickyHeader .btn-find:hover{
		color:var(--si-white);
		background-color: var(--usa-blue);
}
.btn.btn-blog-ur{
  }
		.btn.btn-blog-ur:hover{
			background-color: transparent;
		}
.btn-success {
    border: 1px solid var(--usa-red) !important;
    background-color: var(--usa-red) !important;
    color: var(--si-black);
}
	.btn-success:hover {
		border: 1px solid var(--usa-blue) !important;
		background-color: var(--usa-blue) !important;
		color: var(--si-white);
	}
/*------- company card -------*/
.company-logo-card-container .card {
	background: var(--si-white);
}
.utility{
	background-color: transparent;
}
	.utility .company-logo-card-container .card {
		background: var(--si-gray-100);
	}
	.utility .company-logo-card-container .card .row div:first-child::after{
		background-color: var(--si-gray-400);
	}
/*------- lotus_two_col layout -------*/
.lotus_two_col section {
    border-bottom-color: var(--si-pale-blue);
}
/*------- Providers -------*/
.subpages .logo-list li {
	background: var(--si-gray-100);
}
		.subpages.bg-si-gray-100 .logo-list li {
			background: var(--si-white) !important;
		}
@media (max-width: 1200px) {
	.grid-4-cols .row:nth-child(1)::after,
	  .grid-4-cols .row:nth-child(3)::after{
		background-color: var(--si-dark-blue-50);
	}
}
@media (min-width: 1201px) {
	.grid-4-cols .row::after{
	  background-color: var(--si-dark-blue-50);
	}
	
}
@media (max-width: 1000px) {
	.mobile-menu{
	  background-color: var(--usa-blue);
	}
}

  /* border */
  .border-color-si-blue,
  .step-by-step.v3 .row span{
	border-color:var(--usa-red) !important;
  }
  .border-color-si-gray-400{
	border-color:var(--si-gray-400);
  }
  .business-btn:hover {
	border-color: var(--usa-blue);
  }
  
  /* >> font << */
  .utilityrates_2025 body {
	font-family: var(--base-font-family);
  }
  .utilityrates_2025 .material-symbols {
	font-family: 'Material Symbols Outlined';
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  }
  .hero h1, h2, h3, h4, h5,
  body, input, label,
  li, span {
    font-family: var(--base-font-family);
  }
  h1, h2, h3, h4, h5 {
	line-height: 1.2;
	letter-spacing: 0;
  }
  body, input, label,
  li{
	line-height: var(--bs-body-line-height);
  }
  .superwidget-container span {
    font-family: var(----bs-body-font-family) !important;
	}

  /* >> font size << */
.utilityrates_2025 h1, .utilityrates_2025 h2, .utilityrates_2025 h3, .utilityrates_2025 h4, .utilityrates_2025 h5 {
	font-weight: bolder;
}
.utilityrates_2025 .hero h1 {
	font-size: 3.5rem;
	font-weight: 700;
}

.utilityrates_2025 .h2, .utilityrates_2025 h2 {
	font-size: 2rem;
}
.utilityrates_2025 .h3, .utilityrates_2025 h3 {
	font-size: 1.8rem;
   }
.utilityrates_2025 .h4, .utilityrates_2025 h4 {
	font-size: 1.3rem;
}
.utilityrates_2025 .h5, .utilityrates_2025 h5 {
	font-size: 1.3rem;
}
.utilityrates_2025 .h6, .utilityrates_2025 h6 {
	font-size: 1.6rem;
}
.utilityrates_2025 .h1{
	font-size: 2.5rem;
}
.utilityrates_2025 body, .utilityrates_2025 .tagline, .utilityrates_2025 p,
  .utilityrates_2025 li, .utilityrates_2025 a, .utilityrates_2025 dt, .utilityrates_2025 dd {
	font-size: 1.2rem;
}
  .utilityrates_2025 .lotus_two_col .h5, .utilityrates_2025 .lotus_two_col h5{
	font-size: 1.1rem;
  }
  .utilityrates_2025 .material-symbols {
	font-size: 42px !important;
  }
  .utilityrates_2025 .hamburger {
	font-size: 1.75rem;
  }
  footer ul li,
  footer ul li ul li a{
	
  }
  @media (max-width: 980px) {
	.utilityrates_2025 .hero h1 {
	  font-size: 35px!important;
	}
	.utilityrates_2025 .h2, .utilityrates_2025 h2 {
		font-size: 30px;
	}
	.utilityrates_2025 .h3, .utilityrates_2025 h3 {
		font-size: 25px;
	   }
	.utilityrates_2025 .h4, .utilityrates_2025 h4 {
		font-size: 20px;
	}
	.utilityrates_2025 .h5, .utilityrates_2025 h5 {
		font-size: 20px;
	}
	.utilityrates_2025 .h6, .utilityrates_2025 h6 {
		font-size: 16px;
	}
	.utilityrates_2025 .h1{
		font-size: 25px;
	}
	.utilityrates_2025 body, .utilityrates_2025 .tagline, .utilityrates_2025 p,
  .utilityrates_2025 li, .utilityrates_2025 a, .utilityrates_2025 dt, .utilityrates_2025 dd {
		font-size: 16px;
	  }
	  .utilityrates_2025 .hero .superwidget-container{
		color:var(--si-white);
	  }
  }
/* =========== Overwrite Base Style ========== */
#stickyHeader.sticky-on-scroll .logo{
	height:40px;
}
@media (max-width: 1200px) {
   .main-nav .logo{
		height:40px;
	} 
}