/* 
	Universal Colors:
	
	Dark Blue rgb (40,42,117) 
	Aqua rgb (62,132,172)              */
	
			
	/* GLOBAL: Style Guide */
			
		.embossed-heavy {
	 		border: 1px solid rgba(0,0,0,0.5);
	 		box-shadow: 
	 			inset 0 2px 3px rgba(255,255,255,0.3),
	 			inset 0 -2px 3px rgba(0,0,0,0.3),
	 			0 1px 1px rgba(255,255,255,0.9);
		}		
			
		.text-shadow {text-shadow: 0 0 10px black, 0 0 5px black, 0 0 2px black;}
		
		  p#service-button {width: 100%;}
		  p#service-button a {border: 1px solid gold;}
		  
		  
		  body#about section#about-us p {font-size: clamp(1rem, 1.6vw, 2rem); color: #333;}

		img {
			max-width: 100%;  		/* Forces image to be 100% width, and not max-width of 100% */
			max-height: 100%;
		}
		
							/* Look Into Best Practices to prevent image loading page "jank" */
					/* Coda: Press OPT-C to get CSS Comment Markup */
					/* Anchors are inline, so I need to make them display:block to go full width */
					/* Removes white gap between slides - change to base color of slide images */
					

	/* Global Header / Topper Layers */	
	
		section#topper i[class^="fab"] {font-size: 1.8rem; padding-left: 20px; text-shadow: 0 0 12px black;}
		section#topper div[class^="col"] {padding-top: 15px; color: white;}	
	
		section#branding address a {color: darkblue; font-weight: 700; font-size: .9rem;}
		
		section#branding div#phone p {color: rgb(225,0,0); font-weight: 700; font-size: 1.5rem;}
		section#branding div#phone a {color: black; font-weight: 900; font-size: 1.8rem;}
		section#branding address a span {color: #555; font-weight: 200;}
		
		@media (min-width: 768px) {
				section#mobile-page-name {display: none;}
		}
		
		/* Social Media I can massively improve on this!!! */	

		li#facebook i 	{color: lightblue;}
		li#yelp i			{color: pink;}
		li#google i		{color: lightgreen;}
		li#linkedin i		{color: lightblue;}
	
		li#foot-facebook i {color: lightblue; font-size:2.5rem;}
		li#foot-yelp i		{color: pink; font-size: 2.5rem;}
		li#foot-google i	{color: lightgreen; font-size: 2.5rem;}
		li#foot-linkedin i		{color: lightblue; font-size: 2.5rem;}
		
		

		li#foot-facebook i:hover 	{color: rgb(53,115,226); text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		li#foot-yelp i:hover		{color: darkred; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		li#foot-google i:hover	{color: gold; text-shadow: 0 0 4px black, 0 0 19px black, 0 0 25px white;}
		li#foot-linkedin i:hover		{color: darkblue; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		
		
		
		li#facebook i:hover 	{color: rgb(53,115,226); text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		li#yelp i:hover		{color: darkred; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		li#google i:hover	{color: yellow; text-shadow: 0 0 4px black, 0 0 9px black, 0 0 15px white;}
		li#linkedin i:hover		{color: darkblue; text-shadow: 0 0 2px white, 0 0 5px white, 0 0 8px white;}
		
		
	/* Nav Menu Dropdown: Cleaning Services */	
	
		.navbar-nav a {color: white;}  /* color of  main and dropdown */
		
		a.nav-link {font-size: 1.3rem; font-weight: 300; padding-right: 30px!important; padding-left: 0;}
		
			.dropdown-menu {
					background: white;
					background-size: cover;
					border: 1px solid gold;
			}
			
			.dropdown-item {
				color: black!important; 
				text-shadow: 0 0 2px white, 0 0 4px white, 0 0 6px white, -2px -2px 8px white;
				font-size: 1.2rem; 
				margin: 15px 0;
			}
	
			@media (min-width: 768px) {
				a.nav-link {font-size: 1rem;}
			}
			
			@media (min-width: 992px) {
				a.nav-link {font-size: 1.3rem;}
			}
			
		/* Section: Welcome and Written Content */
		
		.written-content {
			margin-top: 50px; 
			font-family: 'Montserrat', sans-serif;
			
			}
	
		
						/* Section: Reviews-Clips Carousel 
						
						.carousel-control-prev-icon {
							background-image: none;
						}
			
						.carousel-control-prev-icon {
							position:relative;
						}    
							
						.carousel-control-prev-icon:before {
								content: "\2190";  /* this is your text. You can also use UTF-8 character codes as I do here 
								font-family: FontAwesome;
								font-size: 3rem;
								font-weight: 700;
								left:-5px;
								position:absolute;
								top:0;
			 			}	
			 				
			 			.carousel-control-prev-icon:hover:before {
			 					content: "\2190";  /* this is your text. You can also use UTF-8 character codes as I do here 
			 					font-family: FontAwesome;
			 					color: blue;
			 					font-size: 3rem;
			 					font-weight: 700;
			 					left:-5px;
			 					position:absolute;
			 					top:0;
			 				}	
			 				
			 			.carousel-caption {
			
			 					position: absolute;
			 					bottom: 20%;
						} */
				
		/* Section: Service Cards */
 
  			section#service-cards div.card {box-shadow: 3px 3px 16px #555;}

 				
  		/* Section: Badges */
 
 			section#badges {background:rgb(249,249,249);}
 			body#about section#badges {background: #d4eaf1; border-top: 2px solid darkblue;}
 			section#badges .card {background-color: transparent; border: none;}
 			section#badges h4 a {color: black;}
 			section#badges h3 {font-size: 3rem; font-weight: 900;}
 			section#badges .card-body {padding: 30px 0;}
 			section#badges p {color: #777;}
 			section#badges div.card img {max-width: 50%; height: auto; }
 			section#badges img#bbbb {max-width: 50%; height: auto; }
 			
  		/* Section: usp */
 
 			section#usp {background:rgba(62,132,172,0.2);}
 			section#usp .card {background-color: #eee; border: 3px solid silver; border-radius: 15px;}
 			section#usp h3 {font-size: 3rem; font-weight: 900;}
 			section#usp .card-body {padding: 30px 0;}
 			section#usp p {color: black;}
 			section#usp i {font-size: 3rem;}
 			
 		/* Section: Footer */
  
  			footer {background: rgb(50,57,70);}
  
  			div#webby-foot p a {color: #ddd; font-weight: 300; text-decoration: none; cursor: pointer!important;}
  
  			address i {font-size: 1.5rem; color: lightblue; display: block;}
  			address a {color: white; display:block;}
  
			/* p#foot-phone a::before, 
			p#foot-email a::before 
									{
				
				  padding-right: 10px;
				  font-family: "Font Awesome 5 Pro";
				  font-weight: 900;
				  content: "\f2a0";
				  width: 40px;
				  display: inline-block;
				  font-style: normal;
				  font-variant: normal;
				  text-rendering: auto;
				  color:lightblue;
				  font-size: 1.5rem;
				  -webkit-font-smoothing: antialiased;
				  
			  }
			  
			  p#foot-email a::before {content: "\f1d8";}
			  p#foot-address a::before {content: "";}
			 */
			  
		/* Article List Sidebar Styling */			  
			  
			  #article-sidebar {
				  
				/* background-image: url('../_images/leaves-bg.jpg'); */
				background-repeat: no-repeat;
				 box-shadow: 2px 2px 12px lightgray;
				 border: 1px solid gray;
				 border-radius: 4px;
				 background-color: rgba(246,223,149,0.5);
				
				}
				
			  #pets-sidebar {
				  
				 
				 background-color: rgb(254,247,231);
				
				}
				
				.an-article {display: flex; height: 70px; margin: 60px 20px;}
				.an-article img {margin-right: 10px; border-radius: 5px; border: 1px solid gray;}
				.an-article h5 {font-size: 1rem; font-weight: 700;}
				
				article div:first-child {margin-top: 0;}
				
				#pet-portal {background: white; padding: 15px 2px; height: 120px; border: 1px solid black; border-radius: 12px;}
				#pet-portal:hover {box-shadow: 1px 1px 5px black;}
				
						@media (min-width: 489px) {
							
							.an-article {margin: 40px 70px;}
							
						}
							
							
				
						@media (min-width: 576px) {
							
							.an-article {margin: 40px 100px;}
									
						}
				
						@media (min-width: 768px) {
							
							.an-article {margin: 110px 0;}
								
						}

					@media (min-width: 992px) {
						
							.an-article {margin: 90px 20px;}
							
						}
						
						
						
						
						@media (min-width: 1200px) {
							
							.an-article {margin: 50px 40px;}
			
						}
					
		/* Misc */
		
		/* MAIN CONTENT styles */
		
				section.written-content p {
					font-size: clamp(1rem, 2vw, 1.4rem); 
					font-family: montserrat, sans-serif; 
					font-weight: 300;
					color: #555;					
					
					}
				
				body#article-page section.written-content p {
					
					font-size: clamp(1.1rem, 1.3vw, 1.4rem); 
				}



				section.written-content h1 {
					font-size: clamp(1.5rem, 2.5vw, 1.2rem); 
					font-family: montserrat, sans-serif; 
					color: rgba(62,132,172,1);		
					margin-bottom: 30px;
					font-weight: 700;			
					
					}
				
				section.written-content h2.tagline {
					font-size: clamp(2rem, 3vw, 2.8rem); 
					font-family: montserrat, sans-serif; 
					color: rgb(62,132,172);	
					
					}
					
				section.written-content h2{
					font-size: clamp(2rem, 3vw, 2.8rem); 
					font-family: montserrat, sans-serif; 
					color: rgb(62,132,172);	
					margin: 30px 0;
					
					}

					
				section.written-content h3 {
					font-size: clamp(1.6rem, 2.6vw, 2.4rem); 
					font-family: montserrat, sans-serif; 
					font-weight: 700;
					color: rgb(62,132,172);					
					
					}
					
				section.written-content h4 {
					font-size: clamp(1.1rem, 1.5vw, 1.7rem); 
					font-family: montserrat, sans-serif; 
					color: rgb(62,132,172);		
					font-weight: 700;			
					
					}
					
				section.written-content h6 {
					font-size: clamp(1rem); 
					font-family: montserrat, sans-serif; 
					color: rgb(62,132,172);		
					font-weight: 700;	
					margin: 15px 0;		
					
					}
					
				section.written-content ul {
					margin: 30px 0 30px -10px;
					
				}
					
				section.written-content ul li {
					font-size: clamp(1.2rem, 1.4vw, 1.5rem);
					background: url('../_images/bullet-carpet.png') no-repeat left 1px transparent;
					list-style-type: none;
					margin: -8px;
					padding: 0 0 18px 40px;
					font-weight: 300;
					
					}		
					
					
				section.written-content blockquote {
						font-family: verdana;
						font-style: italic;
						background: rgba(0,0,0,0.1);
						padding: 30px;
						border-radius: 9px;
						margin: 30px 20px;
						
					}
					
				section.written-content blockquote p {
					 font-size: 1.5rem!important;
					 color: purple;
					
				}				
				section.written-content cite {
						font-style: italic;
						font-weight: 700;
						font-family: verdana;
					}
 
				div.text-blacky {color: orange;}
				footer h4 {color: lightblue!important;}
				footer h4 {padding-bottom: 10px; border-bottom: 2px solid lightblue; }

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

						@media (min-width: 576px) {
							footer img {max-width: 100%;}
							
							.navbar-expand-md .navbar-nav .nav-link {
								padding-left: .3rem!important;
							}
							
						}
							
						@media (min-width: 768px) {
							footer img {max-width: 40%;}
							
							.navbar-expand-md .navbar-nav .nav-link {
								padding-left: .3rem!important;
							}
							
							
						}
		
						@media (min-width: 992px) {
							footer img {max-width: 70%;}
						}
						
							.navbar-expand-md .navbar-nav .nav-link {
								padding-left: .3rem!important;
							}
						
	
						@media (min-width: 1200px) {
							footer img {max-width: 50%;}
						}
						
		
						@media (min-width: 1400px) {
			
						}
				              
				#home #mobile-page-name h5::before {content: "Home Page"; color: black;}
				#carpet #mobile-page-name h5::before {content: "Carpet Cleaning"; color: black;}
				#upholstery #mobile-page-name h5::before {content: "Upholstery Cleaning"; color: black;}
				#rugs #mobile-page-name h5::before {content: "Area Rug Cleaning"; color: black;}
				#tile #mobile-page-name h5::before {content: "Tile Cleaning"; color: black;}
				#about #mobile-page-name h5::before {content: "About My Pro Cleaner"; color: black;}
				#contact #mobile-page-name h5::before {content: "Contact Info"; color: black;}
				#article #mobile-page-name h5::before {content: "Informative Article"; color: black;}
				#article-page #mobile-page-name h5::before {content: "Helpful Expert Advice"; color: black;}
				#faq #mobile-page-name h5::before {content: "Frequently Asked Questions"; color: black;}
				#tile-tomball #mobile-page-name h5::before {content: "Tile Cleaning, Tomball"; color: black;}
				#commercial #mobile-page-name h5::before {content: "Commercial Services"; color: black;}
				#services-we-offer #mobile-page-name h5::before {content: "Services We Offer"; color: black;}
				#pets-poop #mobile-page-name h5::before {content: "Pet Accidents: Poop"; color: black;}
				#pets-pee #mobile-page-name h5::before {content: "Pet Accidents: Pee"; color: black;}
				#pets-puke #mobile-page-name h5::before {content: "Pet Accidents: Puke"; color: black;}
				#tile-20-special #mobile-page-name h5::before {content: "20% Off Tile Service"; color: black;}
				#three-rooms-special #mobile-page-name h5::before {content: "Carpet Cleaning - 3 Rooms - $149!"; color: black;}
				#reviews #mobile-page-name h5::before {content: "Reviews - Thank You!"; color: black;}
				#sitemap #mobile-page-name h5::before {content: "Site Map"; color: black;}

				h3.little-texas {background: url('../_images/little-texas-icon.png') no-repeat; padding-left: 80px; height: 90px; text-shadow: 2px 2px 4px white; padding-top: 58px; }
				
				.written-content p strong {font-weight: 700;}
				.written-content p.side-note {font-family: verdana, sans-serif; font-weight: 500; font-size: 1rem;}
				
				ul.post-meta li {background: none!important; display: inline-block!important; margin: 0; padding: 0; font-size: .8rem!important;}
				ul.post-meta {margin: 0; padding: 0;}
				
				aside.article-callout {background-color: lightyellow; padding:20px; border: 1px solid gray; border-radius: 8px; margin: 30px 0; font-family: verdana, sans-serif; color: pink;}
				aside.article-callout p {font-family: verdana, sans-serif; font-weight: 500; color: black;}
				
				.article ol li {font-size: 1.2rem; font-family: verdana, sans-serif; margin-bottom: 15px; color: darkgreen;}
				
		/* Pet Article --The Cat-- Conclusion CTA */
				
								
						@media(max-width:575px) {
							
							section.pet-article-cta {
								background: url('../_images/pet-niceness.jpg') no-repeat; 
								height: 250px; 
								background-position: center center; 
								border: 1px solid black; 
								border-radius: 6px;
								}
							
							section.pet-article-cta h4 {
								color: transparent;							
								padding: 50px 0 0 20px; 
								}
							
							section.pet-article-cta p.pet-cta-button {
									text-align: center;
								}
								
							section.pet-article-cta p.pet-cta-button a {
								background-color: blue;
								color: white;
								box-shadow: 2px 2px 18px white; 
								border:2px solid gold;
									
								}		
								
							section.pet-article-cta p.pet-cta-button a:hover {
								background-color: red;
								border:2px solid orange;
									
								}					
							
						}

						@media (min-width: 576px) {
							
							section.pet-article-cta {
								background: url('../_images/pet-niceness.jpg') no-repeat; 
								height: 250px; 
								background-position: center center; 
								border: 1px solid black; 
								border-radius: 6px;
								}
							
							section.pet-article-cta h4 {
								padding: 10px 0 0 20px; 
								color: white; 
								text-shadow: 1px 1px 4px black;
								}
							
							section.pet-article-cta p.pet-cta-button {
								position: absolute; 
								bottom: 60px; 
								right: 70px;
								
								}
								
							section.pet-article-cta p.pet-cta-button a {
								background-color: rgba(53,126,121,1);
								color: white;
								box-shadow: 2px 2px 18px white; 
								border:2px solid gold;
									
								}		
								
							section.pet-article-cta p.pet-cta-button a:hover {
								background-color: red;
								border:2px solid orange;
									
								}					
							
						}
							
						@media (min-width: 768px) {
							
							section.pet-article-cta {
								height: 250px; 
								background-position: center center; 
								border: 1px solid black; 
								border-radius: 6px;
								}
							
							section.pet-article-cta h4 {
								padding: 10px 0 0 20px; 
								color: white; 
								text-shadow: 1px 1px 4px black;
								}
							
							section.pet-article-cta p.pet-cta-button {
								position: absolute; 
								bottom: 60px; 
								right: 70px;
								
								}
								
							section.pet-article-cta p.pet-cta-button a {
								background-color: rgba(53,126,121,1);
								color: white;
								box-shadow: 2px 2px 18px white; 
								border:2px solid gold;
									
								}		
								
							section.pet-article-cta p.pet-cta-button a:hover {
								background-color: red;
								border:2px solid orange;
									
								}					
							
						}
		
						@media (min-width: 992px) {
							
							section.pet-article-cta {
								height: 250px; 
								background-position: right center; 
								border: 1px solid black; 
								border-radius: 6px;
								}
							
							section.pet-article-cta h4 {
								padding: 60px 0 0 20px; 
								text-shadow: 1px 1px 4px black;
								}
							
							section.pet-article-cta p.pet-cta-button {
								position: absolute; 
								bottom: 140px; 
								right: 100px;
								
								}
								
							section.pet-article-cta p.pet-cta-button a {
								background-color: rgba(53,126,121,1);
								box-shadow: 2px 2px 18px white; 
								border:2px solid gold;
									
								}		
								
							section.pet-article-cta p.pet-cta-button a:hover {
								background-color: red;
								border:2px solid orange;
									
								}					
							
						}
	
						@media (min-width: 1200px) {
							
						}
		
						@media (min-width: 1400px) {
							
							section.pet-article-cta {}
							section.pet-article-cta h4 {font-size: 1.5rem;}
							section.pet-article-cta p.pet-cta-button {}
							section.pet-article-cta p.pet-cta-button a {}
							section.pet-article-cta p.pet-cta-button a:hover {}	
							
									
						}

						body#sitemap .bg-menu-color {
							background-color: rgba(62,132,172,1) !important;
							border-bottom: 1px solid black;
							box-shadow: 1px 4px 4px black;}
					
						body#sitemap .card-header { font-size: 1.6rem; font-weight: 700;}
						
						body#sitemap .card-img-top {background: linear-gradient(#060404 0%); background-blend-mode: multiply;}
						
						a.click-phone {background: darkred; padding: 10px; color: white!important; border-radius: 6px; margin-top: 15px; display: block;}
						
						.carousel-caption {margin: 2% 10%; color:#d2eff8;}
						
						.firstcharacter {
							color: #903;
							float: left;
							font-family: Georgia;
							font-size: 75px;
							line-height: 60px;
							padding-top: 4px;
							padding-right: 8px;
							padding-left: 3px;
							text-indent: 3px;}
							
						#logo {margin-top: 15px;}
						
						img.niceness {border: 1px solid black; border-radius: 6px; box-shadow: 1px 1px 6px gray;}
						.dropdown-item:hover {background-color: rgba(230,164,62,1);}
						
						#chat-available-home-page {display: none;}
						
					
    /* Custom CSS to change the hamburger icon color to white */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
    
    
    /* Mega Menu Styles created by ChatGPT 4o */
    
    
    .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 3px solid #69be28;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  z-index: 1050;
}

.mega-menu .dropdown-item {
  padding: 0.4rem 0.75rem;
  transition: all 0.2s ease;
  border-radius: 4px;
}

.mega-menu .dropdown-item:hover {
  background-color: #f1f3f5;
  color: #0d6efd;
}

.testimonial-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(5px);
  border-radius: 1rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  padding: 1.25rem;
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: scale(1.02);
}

.card:hover {
  transform: translateY(-4px);
  transition: 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Soft gradient backgrounds */
.card.bg-soiled {
  background: linear-gradient(to bottom, #fcebea, #ffffff);
}
.card.bg-cleaned {
  background: linear-gradient(to bottom, #fff8e1, #ffffff);
}
.card.bg-renewed {
  background: linear-gradient(to bottom, #e7f3fc, #ffffff);
}
.card.bg-preserved {
  background: linear-gradient(to bottom, #e6f4ea, #ffffff);
}

@media (max-width: 767px) {
  .mega-menu {
    max-height: 70vh;
    overflow-y: auto;
  }

  .dropdown-menu {
    position: static !important; /* Allow natural stacking */
  }
}