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

    body {
  font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;  
  line-height: 1.6;  
}

[id] {
  scroll-margin-top: 70px;
}

    .container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}

    header {
      background-color: #21618c;
      color: white;
      padding: 10px 0;
      z-index: 1000;
    }

    .header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
}

.header-left {
  justify-self: start;
  text-align: left;
  font-size: 1.8em;
}

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

.header-center {
  justify-self: center;
  text-align: center;
  font-size: 1.8em;
}

.header-right {
  justify-self: end;
  text-align: right;
  font-size: 1.8em;
}

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

    nav {
  background-color: #f4f4f4;
  width: 100%;
}

.nav-inner {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}       

    nav a {
      text-decoration: none;
      color: #333;
      margin: 5px;
    }	     

    .hero {
      display: flex;
      flex-wrap: wrap;
      padding: 20px 0;
    }

    .hero-left {
      flex: 0 0 70%;
    }    

    .hero-left h1 {
      font-size: 4em;
      margin-bottom: 10px;
    }
	
	.hero-left h2 {
      font-size: 1.8em;
	  color: #21618c;
	  font-weight:400;
	  padding-bottom:10px;
  }
  
  .hero-left h2 a {
	color: #000000;
	text-decoration: none;
	font-weight:bold;
}

    .hero-left p {
      margin-bottom: 10px;
    }

.hero-right {
	flex: 0 0 30%;
	text-align: right;
	padding-top: 30px;
	background-image: url(../images/appraiser-home.webp);
	background-repeat: no-repeat;
	background-position: right;	
    }

    .testimonials,
    .topic-boxes {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      flex-wrap: wrap;
    }

    .testimonial {
      background-color: #dce0e3;
      padding: 15px;
      margin: 10px 0;
      flex: 0 0 32%;
	  border: 1px #000 solid;
    }
	
	.feeAbout {
      background-color: #dce0e3;
      padding: 15px;
      margin: 10px 0;
      flex: 0 0 48%;
	  border: 1px #000 solid;
    }
	
	.topic-boxes h4 a {
	color: #21618c;
	text-decoration:none;	
	}
	
	h3 {
		text-align: center;
		padding-top: 20px;
		color: #21618c;
		font-size:1.6em;
		font-weight:500;
	}
	
	.testimonial h4 {
	color: #21618c;
	font-weight:500;
	font-size:1.2em;
	}    
	
	.feeAbout h4 {
	color: #21618c;
	font-weight:500;
	font-size:1.2em;
	}    
	
	.footerDesktop {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding-top: 10px;
	  padding-bottom: 10px;
	  font-size:14px;
	  display: block;
    }
	
	.footerDesktop a {      
      color: #fff;
	  text-decoration:none;      
    }	
	
	.footerMobile {      
	  display: none;
    }
	
	.footerMobile a {      
     color: #fff;
	  text-decoration:none;      
    }	
	
   .mobile-call {
      display: none;
      padding: 10px;
      text-align: center;
      background: #dce0e3;
	  font-weight:600;
      color: #000;
      font-size: 1.4em;      
      width: 100%;
	  border-bottom: 1px #000 solid;
    }

    .mobile-call a {
      color: #21618c;
      text-decoration: none;
    }
    
    .hamburger {
      display: none;
      font-size: 1.5em;
      cursor: pointer;
      padding: 10px;
    }
	
	boldText {
		font-weight:600;
	}
	
	.busNameMobile {    
    display: none;	
  }	
	
	.phoneButtonTop {    
    display: none;	
  }	
	
	.phoneButtonBottom {    
    display: none;	
  }	 
 
.desktopLink {    
    display: block;
	padding-top:20px;
  }	
  
  .desktopLink a {    
    color: #21618c;
	text-decoration:none;
  }	
  
  .map-container {
	width: 96%;
	max-width: 1700px;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	overflow: hidden;
	border-radius: 12px; /* Optional styling */
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.row {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem;
    }   
	
.content100 {
      flex: 0 0 90%;	  
	  text-align:left;	
	  padding-top: 20px;	 
	  padding-bottom: 20px;	  
    }	
	
	.content100 h1 {     
	  text-align:left;	
	  font-size:1.6rem;	
	  padding-top:10px;  
	  padding-bottom:10px;  
	  color: #21618c;
    }
	
	.content100 h2 {     
	  text-align:left;	
	  font-size:1.4rem;	 
	  padding-top:20px;  
	  padding-bottom:5px; 
	  color: #21618c; 
    }	
	
	.content100 h3 {     
	  text-align: center;
		padding-top: 0px;
		color: #21618c;
		font-size:1.6em;
		font-weight:500;
		padding-bottom:20px;
    }	
	
	.content100 h4 {
	color: #21618c;
	font-weight:500;
	font-size:1.2em;
	padding-bottom:10px;
	}   
	
	.content100 p {     	  
	  padding-bottom:10px;  	  
    }	
	
	ul {
  list-style-type: disc;   /* or 'circle', 'square', 'none' */
  padding-left: 20px;      /* indentation */
  margin-bottom: 1em;
  font-size: 1em;
  line-height: 1.5;
}

li {
  margin-bottom: 0.5em;
}	
  
   @media (max-width: 1600px) {	  
   .hero-left h1 {
      font-size: 3.2em;	  
  }   
	 .hero-left h2 {
      font-size: 1.8em;	  
  }  
  .hero-right {
      padding-top:20px;
    }
   }
  
   @media (max-width: 1400px) {
	    .hero-left h1 {
      font-size: 3.0em;	  
  }  
	 .hero-left h2 {
      font-size: 1.6em;	  
  }    
  .hero-right {
      padding-top:0px;
    }
     }
   
   @media (max-width: 1250px) {
	 .hero-left h2 {
      font-size: 1.4em;	  
  }  
   }
   
    @media (max-width: 1200px) {
		.header-left {  
  font-size: 1.4em;
}

.header-center {  
  font-size: 1.4em;
}

.header-right {  
  font-size: 1.4em;
}
.hero-left {
      flex: 0 0 60%;
    }

    .hero-right {
      flex: 0 0 40%;
      text-align: center;
    }
	.hero-left h1 {
      font-size: 2.6em;	  
  }  	
	 .hero-left h2 {
      font-size: 1.4em;	  
  }  
  
  nav {
	  font-size: 0.8em;
  }
   }
   
    @media (max-width: 1000px) {
		.header-left {  
  font-size: 1.2em;
}

.header-center {  
  font-size: 1.2em;
}

.header-right {  
  font-size: 1.2em;
}	
	
	 .hero-left h1 {
      font-size: 2.0em;	  
  }  
	 .hero-left h2 {
      font-size: 1.3em;	
	  padding-bottom: 20px;    
  }  
  .hero-right {      
	  padding-top: 30px;    
  }  
  
  nav {
	  font-size: 0.8em;
  }  
  
   }
   
    @media (max-width: 920px) {	
	.hero-left h1 {
      font-size: 1.8em;	  
  }   	
  .hero-right {
      padding-top:0px;
    }  
   
   }
   
   @media (max-width: 860px) {
		.header-left {  
  font-size: 1.0em;
}

.header-center {  
  font-size: 1.0em;
}

.header-right {  
  font-size: 1.0em;
}	
	
	 .hero-left h1 {
      font-size: 1.6em;	  
  }   
  
  .hero-left h2 {
      padding-bottom: 10px;  
  }    
    
  .desktopLink {    
    display: none;	
  }	
  
  nav {
	  font-size: 0.6em;
  }
  
   }

    @media (max-width: 768px) {
		
	body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;    
}	
		
  .header-left {
    font-size: 1.6em;
  }
  .header-inner {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
    padding: 0 5%;
  }

  .header-left {
    flex: 1;
    text-align: left;
  }
  
  .hero-left h1 {
      font-size: 2em;
	  font-weight:400;
  }

	.hero-left h2 {
      font-size: 1.1em;
	  color: #21618c;
	  font-weight:500;
	  padding-bottom:20px;	  
  }  
  		
  .header-center {
    display: none;
  }

  .header-right {
    display: none;
  }
      header {
	width: 100%;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 0;
	position: sticky;
  top: 0;
  z-index: 9999;
      }	  
	  
.mobile-call {
        display: block;
        position: static;
      }
      
      .header-inner {
        flex-wrap: nowrap;
      }

      .header-left {
  justify-self: start;
}

      .header-center, .header-right {
  justify-self: end;
  text-align: right;
}

      .hamburger {
        display: block;
        flex: 1;
        text-align: right;
        padding-right: 2%;
        color: white;
      }
	  
	  .nav-inner {
  display: none;
  flex-direction: column;
  text-align: center;
  position: fixed;
  top: 60px; /* adjust if needed to be below header */
  left: 0;
  right: 0;
  background: #f4f4f4;
  z-index: 9998;
  padding: 20px 0;
  font-size: 1.4em;
}      

      .nav-inner.active {
        display: flex !important;
      }
	  	  
      .hero {
        flex-direction: column;
      }

      .hero-left, .hero-right {
        flex: 1 1 100%;
      }

      .hero-left {
        text-align: center;
      }     
	  
	 .hero-right {
    background-position: center;
    background-size: contain; /* instead of cover */
    min-height: 300px;
	padding-top:30px;
  }

      .testimonial {
        width: 95% !important;
        max-width: 500px;
      }

      .testimonials,
      .topic-boxes {
        flex-direction: column;
        align-items: center;
      }
	  
	  .busNameMobile {
	width: 90%;             /* ✅ More mobile-friendly width */	  /* ✅ Centered and spaced below */
	font-size: 1.8em;
	display: block;	
	color: #21618c;
	text-align: center;	
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;	
	padding-bottom: 5px;
	border-bottom: 1px solid #000;
	font-weight:400;
  }
	  
	   .phoneButtonTop {
	width: 90%;             /* ✅ More mobile-friendly width */	  /* ✅ Centered and spaced below */
	font-size: 1.4em;
	display: block;
	background-color: #333;
	color: #fff;
	text-align: center;
	padding-top: 8px;
	padding-bottom: 8px;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-radius: 10px;
	border: 1px solid #000;
  }
  
  .phoneButtonTop a {
	  color: #fff;
	  text-decoration:none;
	  font-weight:600;
	}
	  
	  .phoneButtonBottom {
	width: 90%;             /* ✅ More mobile-friendly width */	  /* ✅ Centered and spaced below */
	font-size: 22px;
	display: block;
	background-color: #21618c;
	color: #fff;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 0px;	
	margin-right: auto;
	margin-bottom: 25px;
	margin-left: auto;
	border-radius: 8px;
  }
  
  .phoneButtonBottom a {
	  color: #fff;
	  text-decoration:none;
	}
	  
	 .footerDesktop {      
	  display: none;
    }
  
  .footerMobile {
      background-color: #333;
      color: #fff;
      text-align: center;
      padding-top: 10px;
	  padding-bottom: 10px;
	  font-size:12px;
	  display: block;
    }
	
	 .row {
    flex-direction: column;
    align-items: stretch; /* ✅ Ensures child divs use full width */
    text-align: center;
  }  
	
	.content100 {
      flex: 0 0 92%;	  
	  text-align:justify;
	  padding-left:3%;
	  padding-right:3%;		  
    }	
	
	.content100 h1 {     
	  text-align:left;	
	  font-size:1.6rem;	  
    }
	
	.content100 h2 {     
	  text-align:left;	
	  font-size:1.4rem;	  
    }	
	  
  .desktopLink {    
    display: none;	
  }	
	
    }
	
	  @media (max-width: 400px) {
  .header-left {
    font-size: 1.2em;
  }
  
  .busNameMobile {	           /* ✅ More mobile-friendly width */	  /* ✅ Centered and spaced below */
	font-size: 1.4em;	
  }
  
  .hero-left h1 {
      font-size: 1.8em;	  
  }   
  
	  }
	  
	   @media (max-width: 250px) {
  .header-left {
    font-size: 1.0em;
  }
  
  .busNameMobile {	           /* ✅ More mobile-friendly width */	  /* ✅ Centered and spaced below */
	font-size: 1.2em;	
  }
	  }