/* site: Northwoods Web Designs*/
.text-handwriting {
  /*  font-family: "Dancing Script", cursive !important;*/
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  line-height: 1.6em;
}
.text-handwriting-bold {
  /*  font-family: "Dancing Script", cursive !important;*/
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, ul li a, ul li {
  font-family: "Dosis", sans-serif !important;
  color: #1c6b9a;
}
ul li {
  color: #222222;
}
.color--primary {
  color: #1c6b9a !important;
}
.color--primary-1 {
  color: #a97a20;
}
.color--dark {
  color: #2d450f;
}
.main-container p {
  font-size: 1.4em;
}
.main-container p.lead {
  font-size: 1.3em;
}
h1, h2, h3, .h1, .h2, .h3 {
  color: #1c6b9a;
}
p, ul, ol, pre, table, blockquote {
  margin-bottom: 1.4em;
}
a:hover {
  color: #1c6b9a;
}
a.color--white:hover {color:#e3e3e3 !important;}
/*header*/
body {
  font-family: "Dosis", sans-serif;
  color: #222222;
}
a {
  color: #296894;
  font-weight: 700;
}
p strong {
  color: inherit;
}
/*-------------------------------------------------
                NAV
---------------------------------------------------*/
.menu-vertical li a span {    display: block;
    text-transform: capitalize;
    font-weight: 500;
    font-size: 1.03em;
    padding-left: 21px;}
#menu-what-we-do h4 {
  margin-bottom: .6em;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 16px;
}
ul.top-nav-menu li {
  list-style-type: none !important;
  line-height: 1.2em;
  float: left;
  margin: 5px 10px;
}
ul.top-nav-menu li i {
  padding-right: 5px;
}
#menu2 {
  padding: 0;
}
.bar-1 li a:hover, .bar-1 > li > span:hover {
  color: #cde0eb;
}
.bar-1 li#link-request-quote a {
  background: #385A0C;
}
.bar-1 li#link-request-quote a:hover {
  background: #304A10;
}
.bar a {
  text-transform: uppercase;
}
.bar .logo {
  max-height: 3.857143em;
  max-width: none;
}
.bar-1 {
  background: #296894;
  padding: 1px 0px 1px 0px !important;
}
.bar-1 .menu-horizontal {
  position: relative;
  top: 1px;
}
.bar-1 ul li {
  padding: 1em 0;
}
.bar-1 ul li ul li {
  padding: 2px 0;
}
.bar-1 ul li a, .bar-1 ul li a, .bar-1 .menu-horizontal > li > span {
  color: white;
  opacity: .9 !important;
  font-size: 1.1em !important;
}
.bar__module .menu-vertical li a {
  color: #164351 !important;
  font-weight: bold;
}
.dropdown.dropdown--active > .dropdown__container > .container > .row > .dropdown__content {
  pointer-events: all;
  text-align: left;
  font-size: .9em;
}
[class^="stack-"]:before, [class*=" stack-"]:before {
  opacity: .8;
  color: white;
}
/*-------------------------------------------------
                GLOBAL 
---------------------------------------------------*/
#section-pricing-packages span.retail-price {    font-size: 34px;
    width: 62px;
    position: relative;
    top: -10px;}
/* Your other styles */
body {
  font-family: "Dosis", sans-serif !important;
  color: #222222;
}
#what-we-offer span.label { padding:6px 3px 2px 2px !important;
	
	
}
#hero-banner.imagebg:not(.slide):first-child::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgb(50 114 151 / 100%), rgb(50 114 151), rgb(50 114 151 / 66%), rgb(50 114 151 / 0%));
}
.slider--ken-burns:before {
  position: relative !important;
}
.pricing .label {
  top: 2em;
  right: 2em;
  font-size: .90em;
  padding: 0px 16px;
  background: #1c8535;
}
.sr-only { /*screen readers*/
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.flickity-prev-next-button:hover {
  background: #296894;
}
.cover .typed-headline {
  margin-bottom: 1em;
}
#section-testimonials .google-style span {
  background: white;
  border-radius: 3px;
  margin: 1px;
  padding: 0 3px;
}
.slider-client-designs .project-thumb h4 {
  margin-bottom: 0;
  font-size: 1.6em;
}
.slider-client-designs .project-thumb span {
  font-size: 1.2em;
}
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: 0em;
  margin-left: 0em;
}
.page-text-only .entry-content a {
  font-size: inherit;
}
span.tagline {
  display: block;
  font-size: .90em;
  opacity: .8;
  text-transform: capitalize;
}
.text-primary {
  color: #1c6b9a !important;
}
p a.light-link {
  color: #afe2ff;
}
p a.dark-link {
  color: #4a90e2;
}
/*blockquotes*/
blockquote {
  background: #ededed;
  border-left: 10px solid #b9b9b9;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
  color: #246d9a;
  font-style: italic;
  font-size: 1.5em;
  width: 85%;
  margin: 0 auto;
  margin-top: 1em;
  margin-bottom: 1em;
}
/*accordin*/
.accordion-1 li .accordion__title {
  border-radius: 6px;
  border-bottom: 1px solid #ECECEC;
  color: white;
  background: #eeeeee;
  opacity: 1;
}
.accordion-1 li .accordion__title .h4 {
  margin: 0;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: 600;
}
.accordion .accordion__content {
  transition: all 1s linear;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -ms-transition: all 1s linear;
}
.accordion__content > p {
  color: #f1f1f1;
}
.accordion li.active .accordion__title {
  background: #a4cee6;
  border-bottom: 1px solid #a4cee6;
}
.accordion-1 li.active .accordion__title span, .accordion-1 li.active .accordion__title:before {
  color: #1c6b9a;
}
.accordion li.active .accordion__content {
  animation: fadeUp 1.5s ease forwards;
  -webkit-animation: fadeUp 1.5s ease forwards;
}
html {
  scroll-behavior: smooth;
}
/*patterns*/
.bg-blue-pattern-01 {
  background: #296894;
  background-color: #e6e6e6;
  background-image: url("../img/bg/bg-pattern-blue-03.webp");
}
.bg-blue-globe {
  background: linear-gradient(0deg, rgb(255 243 243 / 34%), rgb(255 255 255 / 42%)), url(../img/bg/bg-blue-globe.webp);
  background-repeat: no-repeat;
}
/*vertifically align img ,text, add code to parent div*/
.vertical-image {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}
.vertical-center-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.main-container section.bg-style-1 {
  background: linear-gradient(0deg, rgb(50 114 151 / 83%), rgb(50 114 151 / 52%)), url("../img/bg/bg-hero-banner-1.webp");
  background-position: top center;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}
section {
  padding-top: 4.5em;
  padding-bottom: 4.5em;
}
/*btn*/
a.btn--secondary .btn__text {
  color: #296894;
}
.btn .btn__text, .btn i {
  font-size: .9em;
}
i {
  padding-right: 5px;
}
.btn--primary, .btn--primary{

    text-transform: uppercase;
    padding: 12px 28px;
    letter-spacing: 1px;
}
.btn--primary, .btn--primary:visited {
  background: #296894;
  border-color: #296894;
}
.btn--primary:hover {
  background: #275a79bd;
}
.pad-bot-20 {
  padding-bottom: 20px;
}
.btn-white-outline {
  border: 2px solid white;
  padding: 7px 13px;
}
.btn:not([class*='primary']):hover {
  border-color: #296894;
}
.bg-main-pattern {
  background-color: #e6e6e6;
  background-image: url('../img/bg/bg-pattern-ruffle.webp');
}
.bg-style-1 .container, #hero-banner .container {
  background: transparent;
}
#primary-header > div {
  max-width: 1200px !important;
  margin: 0 auto !important;
}
#primary-header .row .col-3 {
  padding: 0 1em 0 3em !important;
}
#primary-header > div > div.col-3 {
  padding-top: 1em !important;
}
.page-title {
  border-bottom: 3px solid #004a82;
}
.page-title h1 {
  font-family: Arial, Helvetica;
  font-size: 28px;
  margin-top: 15px;
  color: rgb(0, 74, 130);
}
.main-container section .row ul {
  margin-left: 2.3em;
}
.main-container section ul.disc-style li {
  font-size: 1.3em;
  list-style-type: disc;
}
body:not(.home) .flickity-viewport {
  max-height: 550px;
}
section.section-padding {
  padding-top: 2em !important;
  padding-right: 2em;
  padding-left: 2em;
}
/*theme templates*/
.imageblock > .container, .imageblock > div[class*='col-']:not(.imageblock__content) {
  padding-top: 5em;
  padding-bottom: 5em;
  float: none;
  overflow: hidden;
}
section.space--none, footer.space--none {
  padding-top: 0em;
  padding-bottom: 0em;
}
/* fade white square bg */
img.bg-white-01, img.testimonial__image {
  z-index: 1;
  position: absolute;
  margin: 0 auto;
  text-align: center;
  top: 12%;
  left: 15%;
  right: 15%;
  bottom: 15%;
  opacity: .9;
  max-width: 200px;
  background-color: #ffffffc7;
  border-radius: .33em;
  padding: 1em;
}
p.lead-blue {
  font-weight: 400;
  color: #296894;
  font-size: 1.45em;
  line-height: 1.5em;
}
/*=======show tip========*/
.showtip-container {
  position: relative;
  z-index: 1;
  overflow: inherit;
}
.showtip { /* text-decoration: underline; */
  display: inline;
  position: relative;
  cursor: pointer;
  text-align: left;
  padding: 2px;
  border-bottom: 1px dashed #999;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}
.showtip:hover:after {
  background: #FFF;
  border-radius: 5px;
  bottom: 26px;
  color: #6c757d;
  content: attr(title);
  left: -22%;
  padding: 14px 20px;
  position: absolute;
  z-index: 98;
  width: 240px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  ;
  -webkit-box-shadow: 12px 10px 9px 2px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 12px 10px 9px 2px rgba(0, 0, 0, 0.75);
  box-shadow: 12px 10px 9px 2px rgba(0, 0, 0, 0.75);
}
.showtip:hover:before {
  border: solid;
  border-color: #fff transparent;
  border-width: 6px 6px 0 6px;
  bottom: 20px;
  content: "";
  left: 50%;
  position: absolute;
  z-index: 99;
}
ul.list-check-mark-green li::before {
  padding: 0 10px 0 0;
  font-family: "Font Awesome 5 Free";
  content: "\f14a";
  font-weight: 900;
  color: #1c8535;
}
/*featured list bullets */
ul.feature-list-01 {
margin: 1em 0 !important;
}
ul.feature-list-01 li {
  border-bottom: solid 1px #e3e3e3;
  line-height: 21px;
  padding: 10px 3px;
  font-size: 1.2em;
}
ul.feature-list-01 li:first-child {
  border-top: solid 1px #e3e3e3;
}
.menu-horizontal > .dropdown > .dropdown__trigger:after {
  font-family: "Font Awesome 5 Free";
  content: "\f0d7";
  font-weight: 900;
  color: #ffffff;
  font-size: 1em;
}
/*-------------------------------------------------
                PAGE TEMPLATE 
---------------------------------------------------*/
#section-design-why .feature-2 i {
  font-size: 3em;
  position: relative;
  top: 6px;
  width: 100%;
  margin-bottom: .5em;
  text-align: center;
}
#section-design-why .feature-2 h3 {
  font-size: 1.5em;
  margin-bottom: 11px;
  text-align: center;
}
#section-design-process .feature-2 i {
  /*    width: 20%;
    float: left;*/
  font-size: 1.8em;
  position: relative;
  top: 6px;
}
.main-container .slider-client-designs img:last-child {
  margin-bottom: 3em;
  width: 100%;
  height: 100%;
}
section .img-tagline-wht {
  text-align: center;
  color: white;
  font-size: 1.4em;
}
.page #hero-banner .imagebg:first-child:before {
  position: absolute;
  content: '';
  background: #252525;
  background: linear-gradient(0deg, rgb(50 114 151 / 92%), rgb(50 114 151));
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
section#what-we-offer img:hover, section#web-care-features img:hover {
  opacity: .7;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}
section#what-we-offer h2, section#web-care-features h2, .text-white-upper {
  color: white;
  text-transform: uppercase;
}
section#what-we-offer p.lead, section#web-care-features p.lead {
  color: #c6e3f3;
  text-transform: capitalize;
  font-size: 2.3em;
}
section#what-we-offer .btn, section#web-care-features .btn {
  padding: 2px 17px;
  margin-top: 10px;
}
section#what-we-offer p.lead a, section#web-care-features p.lead a {
  color: white;
}
.page #hero-banner h2, .page #hero-banner h1 {
  color: white;
  text-transform: uppercase;
  margin-bottom: 1px;
}
.page #hero-banner p {
  margin-bottom: 1.5em;
  font-size: 1.5em;
}
/*-------------------------------------------------
                #SAP
---------------------------------------------------*/
.locations-list {padding-top: 3.5em;
    background: linear-gradient(0deg, rgb(255 243 243 / 34%), rgb(255 255 255 / 42%)), url("../img/bg/bg-blue-globe-1900.webp");
    background-repeat: no-repeat;
    background-size: cover;}


.locations-list p {
  margin-bottom: 1em;
}

ul.locations li {
  font-size: 1.4em;
  line-height: 1.7em;
}
ul.locations li:before {
  padding: 0 10px 0 0;
  font-family: "Font Awesome 5 Free";
  content: "\f3c5";
  font-weight: 900;
  color: #31639c;
}
/*-------------------------------------------------
                #HOME
---------------------------------------------------*/
.section--ken-burns > .background-image-holder, .section--ken-burns > img:only-child {
  animation: kenBurns 15s ease alternate infinite;
  -webkit-animation: kenBurns 15s ease alternate infinite;
}
.home #section-pricing-packages .pricing {
  box-shadow: none;
}

#hero-banner h2, #hero-banner h1 {
  color: #ffffff;
  text-transform: uppercase;
  text-shadow: 3px 3px 4px #1f506d;
  font-weight: 600;
  margin-bottom: 1px;
}
#hero-banner h2 {
  font-size: 1.9em;
  padding-bottom: 20px;
  opacity: .8;
  font-weight: 100;
  text-transform: capitalize;
}
#hero-banner .slides ul {
  margin-bottom: 2em;
  columns: 2;
}
#hero-banner .slides ul li {
  break-inside: avoid;
}
#hero-banner ul li {
  color: white !important;
  opacity: .9 !important;
  font-size: 1.1em;
}
#hero-banner .btn--primary {
    background-color: #2e7d32 !important;
    border: none !important;
}

	#hero-banner h3 {
    color: #ffffff !important; /* Force to white instead of light gray */
    font-weight: 400;
    opacity: 0.95; /* Keeps it soft but readable */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Adds depth to separate from background */
    margin-top: 10px;
    margin-bottom: 25px;
}

#hero-banner .btn--primary, #hero-banner .btn--secondary {
    box-shadow: 3px 3px 4px #0000003b;
    padding: 10px 34px;
    font-size: 1.2em;
}
#hero-banner .btn.type--uppercase .btn__text {
    font-size: 1.1em;
    letter-spacing: -.5px !important;
}
#hero-banner .typed-text {
  color: white;
  opacity: .9;
  border-bottom: 2px solid white;
  padding: 0px 7px;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 3px 3px 4px #1f506d;
}
#section-about h2, .section-benefits h2 {
  text-transform: uppercase;
}
#section-about i.fas, .section-benefits i.fas {
  width: 44px;
  margin-bottom: 10px;
  position: relative;
  top: 4px;
}
#section-about i.fas, #section-about i.far,
.section-benefits i.fas, .section-benefits i.far{
  width: 44px;
  font-size: 1.8em !important;
  margin-bottom: 10px;
  position: relative;
  top: 2px;
}
 img.logo-about {
  z-index: 1;
  position: absolute;
  margin: 0 auto;
  text-align: center;
  top: 12%;
  left: 15%;
  right: 15%;
  bottom: 15%;
  opacity: .9;
  max-width: 200px;
  background-color: #ffffffc7;
  border-radius: .33em;
  padding: 1em;
}
section#section-testimonials img {
  margin-right: 1%;
}
section#section-testimonials {
  border-top: 5px solid #d8e4eb;
  border-bottom: 5px solid #d8e4eb;
}
section#section-testimonials h4 {
  font-size: 1.4em;
  margin-bottom: .2em;
  font-style: italic;
}
section#section-testimonials li span:last-child {
  font-size: 1.4em;
}
section#section-bottom-cta h4 {
  font-size: 2.3em;
}
body section#section-bottom-cta .btn span {
  font-family: "Dosis", sans-serif !important;
  font-size: 1.3em !important;
}
#section-price-web-care-plans,#section-pricing-packages {
  padding-top: 4.5em;
}
#section-price-web-care-plans .boxed,#section-pricing-packages .boxed {
  box-shadow: 0px 7px 11px #00000057;
}
#section-price-web-care-plans .pricing ul,
#section-pricing-packages .pricing ul{
  margin: 0 0 0 .8em;
}
#section-price-web-care-plans .pricing:hover,
#section-pricing-packages .pricing:hover{
  margin-top: -5px;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
}
#section-price-web-care-plans h3,
#section-pricing-packages h3{
  margin-bottom: 0;
}
#section-pricing-packages .pricing .label {
    top: 13px;
    right: 2em;
    font-size: .90em;
    padding: 4px 16px;
    background: #1c8535;
}
#page-website-design #section-price-web-care-plans .pricing .label,
#page-website-design #section-pricing-packages .pricing .label{
    top: 13px;
    right: 2em;
    font-size: .90em;
    padding: 0px 16px;
    background: #1c8535;
}

#section-price-web-care-plans li,
#section-pricing-packages li{
  font-size: 1.1em;
  line-height: 1.5em;
}
#section-price-seo-plans .pricing-2 ul:first-child {
  margin-top: 0;
}
#section-price-seo-plans .pricing h3 {
  width: 100%;
  text-align: center;
}
#section-price-seo-plans ul li {
  font-size: 1.2em;
  letter-spacing: -.5px;
  opacity: .8;
}
#seo-services-offered .video-play-icon {
  width: 4.428571em;
  height: 4.428571em;
  background: #ffffffde;
}
#page-seo .feature-2 i {
  width: 14%;
  float: left;
  top: 4px;
  position: relative;
}
span.retail-price {
  color: darkred;
  line-height: 1.2em;
  font-size: 2.23em;
  margin: 8px 0;
  font-weight: bold;
  text-align: center;
  display: inline-block;
  width: 100%;
  padding-top: 0;
  position: relative;
}
span.retail-price:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: inherit;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
#page-website-design [class^="stack-"]:before, #page-website-design [class*=" stack-"]:before {
  opacity: .8;
  color: #78a4bf;
}
#page-website-design h3 {
  display: block;
  text-align: center;
  font-size: 1.6em;
}
#page-website-design #section-design-process h3 {
  text-align: left;
}
#section-design-process blockquote {
  margin-bottom: 2.5em;
}
#section-design-why .feature-large__group p {
  text-align: center;
}
#section-design-why .feature-large__group .row:first-child {
  margin-bottom: 3em;
  margin-top: 1em;
}
.process-steps-style h3 {
  text-transform: uppercase;
  margin-bottom: .4em;
}
.process-steps-style h3, .process-steps-style p {
  color: white;
  text-align: left !important;
}
.process-steps-style .feature-2 i {
  width: 11%;
  float: left;
}
.process-steps-style .align-content-center {
  margin: 0 auto;
}
.process-steps-style .feature h4 {
  margin-bottom: .3em;
  color: #dbdbdb;
  font-size: 1.6em;
  opacity: .9;
}
.process-steps-style .feature h4 + p {
  max-width: 26em;
}
.process-steps-style .feature:not(.boxed) {
  margin-bottom: 31px;
}
.process-steps-style .vertical-center-col > div {
  margin-top: 3em;
}
#page-about img.owner-image {
  border-radius: 0px;
  box-shadow: 2px 2px 2px #999393;
  margin-bottom: .5em;
  /* max-width: 120px;*/
}
#page-about .feature-2 i {
  width: 11%;
  float: left;
}
#page-about #about-quote-wrap {
  background: #e0e0e0;
  padding: 1em;
  border: 5px solid #8ca5b1;
  border-radius: 10px;
  margin-bottom: 3em;
  margin-top: -1em;
}
#page-about #section-why-us p.lead {
  font-size: 1em;
}
#section-design-process, #section-design-process h3, #section-design-process h4 {
  color: white;
}
#section-design-process i {
  width: 11%;
}
#section-design-process h3 {
  margin-bottom: .5em;
}
#section-design-process a {
  margin-bottom: 3em;
}
#section-design-process .feature:first-child {
  margin-bottom: 2em;
}
#section-testimonials .testimonial__image :nth-child(2) {
  font-size: 1.1em;
  font-weight: bold;
  display: block;
  line-height: 1.5em;
}
#section-testimonials .testimonial__image img {
  padding-right: 10px;
}
#section-testimonial-featured .feature-2 i {
  width: 44px;
  float: left;
}
.testimonial button.read-more {
  box-shadow: none;
  border: none;
  color: white;
  height: 1em;
  font-size: 1.2em;
}
.testimonial p {
  margin-bottom: .70em;
}
.testimonial i {
  color: #fff;
  float: left;
  position: relative;
  top: 10px;
  padding-right: 14px;
}
#section-testimonials-blue .row:nth-child(1) {
  margin-bottom: 2em;
}
#section-testimonials-2 .boxed:not(.bg--white):not(.bg--none) {
  background: rgba(20, 20, 20, 0.5);
}
#section-sitemap li {
  font-size: 1.3em;
}
.notice {
  background: rgba(255, 0, 0, 0.26);
  padding: 5px;
  text-align: center;
  font-size: 1.2em;
  font-family: serif;
}
.pricing i.fa-check-circle {
  color: #386b13;
}
.pricing i.fa-times-circle {
  color: darkred;
}
section#section-price-pay-monthly-plans .pricing ul li {
  color: #222222;
  font-size: 1.2em;
}
section#section-price-pay-monthly-plans .type--fine-print {
  font-size: 0.85714286em;
  text-align: center;
  width: 100%;
  display: inline-block;
}
#page-pay-monthly-websites {}
section#section-price-pay-monthly-plans h2 {
  margin-bottom: 10px;
}
section#section-price-pay-monthly-plans h3 {
  width: 100%;
  text-align: center;
}
#section-price-pay-monthly-plans span.h2 {
  color: #386B13;
  font-family: arial;
  font-size: 44px;
  letter-spacing: -1px;
  font-weight: bold;
  line-height: 17px;
  margin-bottom: 0;
  margin-top: 0;
  padding: 11px 0 8px;
  text-align: center;
}
#section-price-pay-monthly-plans .pricing .label {
  top: 18px;
  right: 2.78571429em;
  padding-top: 3px;
}
#section-price-pay-monthly-plans .main-container section .row ul {
  margin-left: 1em;
}
#section-price-pay-monthly-plans > div > div.row > div:nth-child(2) > div {
  padding-top: 4em;
}

#section-design-portfolio h2 {margin-bottom:5px;}
#section-design-portfolio h3 {
    font-size: 1.7em;}


/*---------------------------------------------------
               SEO 
--------------------------------------------*/
.accordion .accordion__title:before {
  font-family: "stack-interface";
  content: '\e80d';
  margin-right: 6px;
  color: #252525;
}
.accordion .accordion__title:before {
  padding: 0 10px 0 0;
  font-family: "Font Awesome 5 Free";
  content: "\f067";
  font-weight: 900;
  color: #31639c;
}
.accordion-1 li.active .accordion__title span, .accordion-1 li.active .accordion__title:before {
  padding: 0 10px 0 0;
  font-family: "Font Awesome 5 Free";
  content: "\f068";
  font-weight: 900;
  color: #31639c;
}
#section-price-seo-plans .pricing .label {
  padding: 4px 16px;
}
/*-------------------------------------------------
                FOOTER 
---------------------------------------------------*/
[class*='bg-']:not(.bg--white):not(.bg--secondary) p, [class*='imagebg']:not(.image--light) p {
  opacity: 1;
}
footer.footer-2 {
  background: #296894;
  padding-top: 2em !important;
}
footer p strong {
  color: #fcfcfcd6;
  font-weight: bold;
}
body footer .container .list--hover li {
  line-height: 1.7em !important;
  opacity: .9;
  font-size: 1.2em;
}
footer p, footer h5, footer .type--fine-print, footer a {
  color: white !important;
  /*  opacity: .9 !important;*/
}
footer h2 {
  color: #ffffff !important;
  margin-bottom: .5em !important;
  margin-top: .5em !important;
  font-size: 1.3em;
  font-weight: 500;
}
body footer h3 {
  color: #ffffff !important;
  margin-bottom: .2em !important;
  margin-top: .5em !important;
  font-size: 1.3em !important;
  font-weight: 500;
  text-align: left !important;
  text-transform: uppercase;
}
footer h3 a {
  font-weight: bold;
  /*   text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;*/
}
footer li {
  font-size: 1.1em;
}
footer .container p {
  font-size: 1.1em;
  margin-bottom: 7px;
}
#footer-our-mission {
  border-radius: 5px;
  box-shadow: 2px 3px 7px 2px #383737;
  border: solid 2px lightgray;
  margin-left: -5px;
  line-height: 1.2em;
  padding: 12px;
  background: linear-gradient(0deg, rgb(255 243 243 / 34%), rgb(255 255 255 / 42%)), url("../img/bg/bg-blue-globe-200.webp");
  background-repeat: no-repeat;
  background-size: cover;
}
#footer-our-mission p {
  font-size: 1.3em;
  /* font-weight: bold; */
  line-height: 1.3em;
  text-transform: capitalize;
  color: #0E5079 !important;
  text-align: justify;
  letter-spacing: -1px;
}
/*TEMPLATE*/
.pad-top-2em {
  padding-top: 2em;
}
.pad-bottom-2em {
  padding-bottom: 2em;
}
footer .type--fine-print:not(p) {
  font-size: 1em;
  opacity: .9;
}
footer a.type--fine-print:not(:first-child) {
  margin-left: 1.3em;
}
#section-bottom-cta {
  padding-top: 3em;
  padding-bottom: 4em;
}
/*-------------------------------------------------
                MEDIA QUERIES
---------------------------------------------------*/
@media all and (min-width: 467px) {
  .home #hero-banner > ul > div > div > li#slide-01 > div.background-image-holder.background--top, .home #hero-banner > div.background-image-holder.background--top {
    background: url(../img/bg/bg-hero-banner-06-1900.webp) !important;
    background-repeat: no-repeat !important;
    background-color: #ece8e5 !important;
    background-position: right center !important;
    /* background-size: 600px !important; */
    background-size: cover !important;
  }
  .home #hero-banner > ul > div > div > li#slide-02 > div.background-image-holder.background--top {
    background: url(../img/bg/bg-hero-sub-page-design-01.webp) !important;
    background-repeat: no-repeat !important;
    background-color: #ece8e5 !important;
    background-position: right top !important;
    /* background-size: 600px !important; */
    background-size: cover !important;
  }
  .page #hero-banner > ul > div > div > li > div.background-image-holder.background--top { /*background-size: 600px !important;*/
  }
  #section-testimonials .background-image-holder {
    background: url("../img/bg/bg-fall-01-1900.webp") !important;
    opacity: 1 !important;
    background-repeat: no-repeat;
  }
  #section-about .background-image-holder,
	.section-benefits .background-image-holder{
    background: url("../img/bg/bg-skies-900.webp") !important;
    opacity: 1 !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  /*--------------------------/ min-width 467------------------*/
}
@media all and (min-width: 767px) {
  ul.list-col-3 {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
  }
  .show-mobile {
    display: none;
  }
  .container {
    max-width: 1140px;
  }
  #hero-banner h2 span, #hero-banner h1 span {
      display: block;
     /* font-style: italic;
    font-size: .8em;
    font-weight: 100;*/
  }
  #hero-banner h1 span.smaller-text {
    display: inline-block;
    font-size: .6em;
  }
  /*dropdown*/
  /**! 11. Dropdowns **/
  .dropdown:hover > .dropdown__container {
    opacity: 1;
  }
  .dropdown:hover > .dropdown__container .dropdown__content {
    font-size: .9em;
  }
  .dropdown:hover > .dropdown__container > .container > .row > .dropdown__content {
    pointer-events: all;
  }
  .bar-1 .dropdown .dropdown__container {
    top: 49px;
  }
  .bar-1 .dropdown .dropdown__content {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    -webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.08);
    padding: 1.23809524em 1.85714286em;
    border-top: 9px solid #296894;
    min-height: 240px;
  }
  .bar-1 .dropdown .dropdown__content > .pos-absolute[class*='col-'][data-overlay]:before {
    border-radius: 6px 0 0 6px;
    border-top-left-radius: 0;
  }
  .bar-1 .pos-vertical-center a {
    max-width: 168px;
  }
  .home #what-we-offer img {
    max-height: 240px;
  }
  .home-pricing-sub-text {
    position: relative;
    top: 11px;
  }
  /*-------------------------/min 767------------------*/
}
@media all and (min-width: 991px) {
	.menu-vertical {
    display: inline-block;
    margin-bottom: 1em;
}
  .bar-1 .dropdown .dropdown__container {
    top: 37px;
  }
  #section-about .col-lg-7, #section-design-why .col-lg-7,
	.section-benefits .col-lg-7{
    flex: 0 0 65.333333%;
    max-width: 65.333333%;
  }
  /*-------------------------/min 992------------------*/
}
@media all and (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
  #hero-banner .slides li#slide-02 .col-md-9 {
    flex: 0 0 53%;
    max-width: 53%;
  }
  /*-------------------------/min 1200------------------*/
}
@media all and (min-width: 1500px) {
  #section-design-why .col-lg-7 {
    flex: 0 0 71.333333%;
    max-width: 71.333333%;
  }
  /*-------------------------/min 1500------------------*/
}
@media only screen and (max-width: 1199px) and (min-width: 767px) {
  #menu-what-we-do .col-lg-6 {
    padding-left: 4px;
    padding-right: 4px;
    flex: 0 0 57%;
    max-width: 57%;
  }
}
@media all and (max-width: 990px) {
  #section-price-web-care-plans ul,
	#section-pricing-packages ul{
    padding-top: 1em !important;
  }
  #section-price-web-care-plans li,
	#section-pricing-packages li{
    font-size: 1.4em !important;
    line-height: 1.7em !important;
  }
  /*-------------------------/max 1199 - main 767------------------*/
}
@media all and (max-width: 767px) {
	
	

    #primary-header {
        padding: 15px 0 !important;
        background-color: #fff; /* Ensures a clean white backdrop for the logo */
    }
	
	.nav-container .bar a {  /*  z-index: 5 !important;
    position: relative !important;*/
	text-decoration: none;}
	
    #primary-header .row {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* 2. Break the logo out of the 25% width column */
    #primary-header .col-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* 3. Increase the physical size of the logo */
    #primary-header img.logo {
        width: auto !important;
        height: auto !important;
        max-height: 70px !important; /* Adjust this number to your liking */
        max-width: 220px !important; /* Allows it to be much larger than the original 115px */
        display: inline-block;
    }

    /* 4. Adjust the hamburger bar position if needed */
    .nav-container .bar-1.visible-xs {
        position: absolute;
        top: 10px; /* Adjust based on your header height */
        right: 10px;
        background: transparent !important;
        border: none !important;
    }
	
	
    /* 1. Make the header area a relative container to hold the absolute menu */
    nav[role="navigation"] {
        position: relative;
        background-color: #fff;
    }

    /* 2. Remove the extra height/padding from the container that held the menu */
    .nav-container .bar-1.visible-xs {
        position: absolute !important;
        top: 0;
        right: 0;
        width: auto !important;
        background: transparent !important; /* Removes the blue background */
        border: none !important;
        padding: 0 !important;
        z-index: 10;
    }

    /* 3. Style and position the toggle icon inside the white bar */
.hamburger-toggle {
    display: block;
    padding: 25px 15px !important;
}

    .hamburger-toggle i {
        color: #004a7c !important; /* Change from white to brand blue for visibility */
        font-size: 24px !important;
    }

    /* 4. Tighten up the hero banner now that the menu is gone */
    .main-container {
        padding-top: 0 !important;
    }

	
	
	

	
	
	
	
    /* 1. Position the main container at the bottom */
	#menu2 .bar__module {
    margin-bottom: 1px;
}
    #menu2 {
        position: fixed !important;
        bottom: 0 !important;
        top: auto !important;
        left: 0;
        width: 100%;
        z-index: 9999;
        background-color: #004a7c; /* Matches your brand blue */
        border-top: 1px solid rgba(255,255,255,0.1);
        padding: 5px 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.15);
    }

    /* 2. Reset grid containers to allow full-width layout */
    #menu2 .container, 
    #menu2 .row, 
    #menu2 .col-lg-11 {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. Re-align the list into a horizontal "Tab" layout */
    .top-nav-menu {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none;
    }

    /* 4. Style the individual list items */
    .top-nav-menu li {
        flex: 1;
        text-align: center;
        padding: 5px 0;
    }

    /* 5. Stack icons on top of text for a "mobile app" look */
    .top-nav-menu li a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        color: #ffffff !important;
        font-size: 11px !important; /* Smaller text for tabs */
        text-decoration: none;
    }

    .top-nav-menu li a i {
        font-size: 18px !important; /* Larger icons */
        margin-bottom: 4px;
        display: block !important;
    }

    /* 6. Push the website content up so the bar doesn't cover the footer */
    body {
        padding-bottom: 60px !important;
    }

	

#hero-banner {
    height: auto !important;
    padding: 60px 0 58px 0 !important;
    text-align: left !important;
}

    #hero-banner .container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }

    /* 2. Typography Hierarchy */
    #hero-banner h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
        font-weight: 800 !important;
        text-transform: uppercase;
        color: #ffffff;
    }

    #hero-banner h2 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        margin-bottom: 20px !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.9);
    }

    #hero-banner h2 span {
        display: block; /* Forces "Professional Websites..." to its own line for better rhythm */
        font-size: 16px;
        margin-top: 5px;
    }

    /* 3. Typed Headline Styling */
    .typed-headline {
        margin-bottom: 15px !important;
    }

    .typed-headline .h3 {
        font-size: 18px !important;
        font-weight: 700 !important;
        display: inline !important;
    }



    /* 4. Button Stack Adjustments */

    #hero-banner .btn {
        width: 100% !important; /* Ensures full-width buttons for easy thumb-tapping */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
        padding: 12px 20px !important;
    }
	#hero-banner .btn:first-child {margin-bottom:30px !important;}
    #hero-banner .btn--primary {
        background-color: #2e7d32 !important; /* Forest green for a "Northwoods" call-to-action */
        border: none !important;
    }

	
	

    #hero-banner.imagebg:not(.slide):first-child::before {
        /* We use a 160deg angle to pull the darkness from the top-left across the text */
        background: linear-gradient(
            160deg, 
            rgba(30, 70, 95, 0.98) 0%,   /* Near solid dark blue at the top/logo area */
            rgba(50, 114, 151, 0.90) 40%, /* Deep blue behind the main H1/H2 text */
            rgba(50, 114, 151, 0.75) 70%, /* Maintains 75% opacity over the animated text */
            rgba(50, 114, 151, 0.40) 100% /* Fades out slightly at the very bottom right */
        ) !important;
        
        /* Optional: Add a slight multiply blend mode to make the image colors richer */
        mix-blend-mode: multiply; 
    }

    /* 2. Extra Pop for the Headline */
    #hero-banner h1 {
        text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5); /* Subtle shadow to lift text off the background */
    }



/* Ensure the typed cursor doesn't add extra width/height issues */
.typed-text {
	  color: #ffffff !important;
    display: inline-block;
	 padding-bottom: 2px;
    vertical-align: top;
	  line-height: 1em;
	    border-bottom: 2px solid #ffffff !important;
        text-decoration: none !important;
}



	#hero-banner h3 {
    color: #ffffff !important; /* Force to white instead of light gray */
    font-weight: 400;
    opacity: 0.95; /* Keeps it soft but readable */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); /* Adds depth to separate from background */
    margin-top: 10px;
    margin-bottom: 25px;
}


#hero-banner h3 span {
    display: block; /* Moves the second half to a new line for better balance */
    font-size: 0.9em;
    font-weight: 300;
}
	
	
	
	
	

	
	#menu-what-we-do .col-lg-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}
	#menu-what-we-do h4 {
    margin-top: 1em !important;
}
a.hamburger-toggle::before {
    font-family: "Font Awesome 5 Free";
    content: "\f0c9";
    font-weight: 900;
    color: #004a7c !important;
    font-size: 24px;
    /* text-shadow: 1px 1px 1px black; */
}
  #hero-banner .btn:last-child {
    margin-left: 1em;
    position: relative;
    top: -11px;
  }
  .container {
    max-width: 767px;
  }
/*  .nav-container {
    position: relative;
    z-index: 10;
  }*/
  #hero-banner .slides li {
    padding: 5.428571em 0;
  }
  #what-we-offer .feature img {
    width: 100%;
    height: 100%;
  }
  .home .feature p {
    text-align: left;
    margin-left: 2px;
    padding: 1em 0;
    max-width: auto;
  }
  /*	#hero-banner {position: relative;
    top: -4px;}*/
  #hero-banner .slides li a:last-child {
    margin-left: 2em;
    position: relative;
    top: -12px;
  }
  section.slider[class*='height-'] .slides .flickity-slider > li {
    /*   height: 100%;*/
  }
  .cover .typed-headline {
    margin-bottom: 2em;
  }
  #hero-banner .container {
    max-width: 767px;
  }
  #hero-banner h2 span, #hero-banner h1 span {
    display: block;
    /* font-style: italic; */
    /* font-size: .7em; */
    font-weight: 100;
    line-height: 1.1em;
  }
  #hero-banner h2 {
    font-size: 1.6em;
    padding-bottom: 20px;
    opacity: .8;
    font-weight: 100;
    text-transform: capitalize;
  }
  #hero-banner h1 span.smaller-text {
    display: inline-block;
    font-size: .6em;
  }
  h3, .h3 {
    font-size: 1.6em;
    margin-bottom: .9em;
    line-height: 1.3em;
  }
  .feature-2 i {
    margin-bottom: 8px;
  }
  span.tagline {
    font-size: 1em;
  }
  body footer .container .list--hover li {
    font-size: 1.34em;
  }
  .home #section-about .imageblock__content{
    display: none;
  }
  .process-steps-style a.btn {
    margin-bottom: 2em;
  }
  #footer-our-mission p {
    font-size: 1.4em;
  }
  footer .container p {
    font-size: 1.4em;
    margin-bottom: 7px;
    line-height: 1.5em;
  }
  .show-mobile {
    display: block;
  }
  .bar-1 ul li {
    padding: 0;
    line-height: 2em;
    list-style-type: none !important;
  }
  .bar-1 .bar__module {
    background: #4b87aa;
  }
  #link-request-quote {
    padding: 1em 0;
  }
  .bar-1 .menu-horizontal {
    text-align: left !important;
    padding: 1em;
  }
  #primary-header .row .col-3 {
    flex: 0 0 37%;
    max-width: 37%;
  }
  #primary-header .row .col-3 img {
    min-width: 115px;
  }
  .main-container img:last-child {
    margin-bottom: 3em;
  }
  .bar-2 {
    background: #296894;
  }
  .bar-2 a {
    color: white;
  }
  /*home*/
  #hero-banner .h3 {
    font-size: 2em;
    line-height: 44px;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #hero-banner .background-image-holder {
    /* background-position: 81% -9px !important;*/
    background-position: right center !important;
    background-size: cover !important;
  }
  #section-about img.logo-about,
	.section-benefits img.logo-about{
    top: 9%;
  }
  #section-testimonials img.testimonial__image {
    z-index: 1;
    position: relative;
    opacity: .9;
    max-width: 143px;
    background-color: #ffffffc7;
    border-radius: .33em;
    padding: 1em;
    display: unset;
    width: 100%;
    margin-bottom: 29px !important;
  }
  /*footer*/
  footer .indent-txt {
    padding-top: 15px;
  }
  footer img {
    max-width: 244px;
  }
  footer .social-list {
    margin: 1.85714286em 0;
    text-align: center;
  }
  .mobile-text-center {
    text-align: center;
  }
  footer span.mobile-break-line {
    display: block;
    text-align: center;
  }
  #page-seo > div.main-container > footer > div > div:nth-child(2) > div:nth-child(1) > a:nth-child(2) {
    margin-left: 0;
  }
  footer .col-xs-6 {
    padding-bottom: 1.3em;
  }
  /*-------------------------max 767------------------*/
}
@media (max-width: 467px) {


	
	
	
	
	
	
	
	
	
	
	
	
	
  #hero-banner .btn--primary, #hero-banner .btn--secondary {
    box-shadow: 3px 3px 4px #0000003b;
    width: 80%;
  }
  #hero-banner .btn:last-child {
    margin-left: 0;
  }
  .error404 .col {
    float: left !important;
    width: auto !important;
  }
  #hero-banner h2, #hero-banner h1 {
    color: white;
    font-size: 2.5em;
    font-weight: bolder;
    letter-spacing: .5px;
  }
  #hero-banner h2 {
    font-size: 1.9em;
    padding-bottom: 20px;
    opacity: .8;
    font-weight: 100;
  }
  #hero-banner .h3 {
    font-size: 1.4em;
    line-height: 26px;
    letter-spacing: .5px;
  }
	
	 #hero-banner .typed-headline {
        min-height: 75px; /* Mobile text often needs 3 lines */
    }
	

	
  .home li#slide-01 .background--top, .home #hero-banner div .background--top {
    background: url("../img/bg/bg-hero-banner-m-4.webp") !important;
    opacity: 1 !important;
    background-repeat: no-repeat;
  }
  .home li#slide-01 .col-md-9, .home #hero-banner div .col-md-9 {
    padding-right: 10px;
    padding-left: 10px;
  }

  .home [data-overlay="9"]:before {
    opacity: 1;
  }
  #hero-banner .imagebg:before {
    background: linear-gradient(91deg, rgb(50 114 151), rgb(50 114 151 / 55%), rgb(50 114 151 / 24%));
  }
  .home #what-we-offer img {
    max-height: 240px;
  }
  #section-testimonials .testimonial {
    display: block;
  }
  #section-testimonials img.testimonial__image {
    height: 120px;
    width: 120px;
    margin-bottom: 15px !important;
  }
  #section-testimoinals .background-image-holder {
    background: url("../img/bg/bg-fall-01-m-p.webp") !important;
    opacity: 1 !important;
    background-repeat: no-repeat;
  }
  .main-container p, #seo-faq p.lead {
    font-size: 1.5em;
    line-height: 1.4em;
  }
  #section-about i, .section-benefits i {
    float: left;
  }
  #section-price-seo-plans .pricing-2 ul:first-child {
    margin-top: 1em;
  }
  #section-price-seo-plans ul {
    margin: 1em 0;
  }
  #section-price-seo-plans ul li {
    font-size: 1.3em;
    line-height: 2em;
  }
  .hidden-xxs {
    display: none !important;
  }
#section-price-web-care-plans .pricing .label, #section-pricing-packages .pricing .label {
    top: -5px !important;
    right: -6px !important;
    font-size: .90em !important;
    padding: 4px 16px !important;
    background: #1c8535 !important;
}	
	
	
  /*-------------------------max 467------------------*/
}

@media (max-width: 399px) {
	
	
	
}