/*
#fcfcfc
#1A1109
*/
/* Custom Bulma variables */
        :root {
            /* Dark color for background */
            --bulma-hero-h: 20deg;
            --bulma-hero-s: 57%;
            --bulma-hero-l: 6%;
            /* Light color for text */
            --bulma-text-h: 20deg;
            --bulma-text-s: 57%;
            --bulma-text-l: 6%;
            /* Override Bulma's primary if needed */
            --bulma-primary: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l));
			--bulma-scheme-main: #171717;
			--bulma-link-h: #171717;
			/* Footer-specific variable */
			            --bulma-footer-background: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-l));
			            --bulma-footer-color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l));
						--bulma-navbar-item-hover-background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), 10%); /* Slightly lighter dark */
						--bulma-navbar-item-hover-color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l)); /* Light text */
        }


			
			       /* Mobile-first base styles */
				   /***************************/
				   
		        /* Custom navbar styling */
		        .navbar {
					background: #000;
					position: relative;
		        }

		        .navbar-item {
	            color: #ecf0f1; 
				float: right;
			}
			
			.navbar-menu {
				position: absolute;
				width:100%;
			}
			
		        .navbar-item:hover,
		        .navbar-item:focus {
		            background: #fcfcfc;  
		            color: black; 
		        }

		        /* Brand styling */
		        .navbar-brand .navbar-item {
		            color: #fcfcfc;
		            font-weight: bold;
		        }
				
		        /* Brand styling */
		        .navbar-brand .navbar-item:hover, .navbar-brand .navbar-item:active {
		            color: #171717;
		            font-weight: bold;
		        }

		        /* Burger menu lines */
		        .navbar-burger {
		            color: #fcfcfc;
		        }
				
				

 
        .hero-black {
/*            background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-l));*/
            background: #000;
			min-height: 100vh;
            padding: 2rem 1rem;
        }
		
        .hero-wood {
/*            background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-l));*/
            background: url('plywood-texture.jpg');
			min-height: 100vh;
            padding: 2rem 1rem;
        }
		
        .hero-stone {
/*            background-color: hsl(var(--bulma-hero-h), var(--bulma-hero-s), var(--bulma-hero-l));*/
            background: url('concrete.png');
			min-height: 100vh;
            padding: 2rem 1rem;
        }
		
		.logo {
			max-width: 150px;
			margin: 0 auto;
		}

        .title-coming-soon {
			 font-family: 'Rubik Dirt', sans-serif;
            font-size: 2.1rem;
            color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l));
        }

        .subtitle {
			font-family: 'Rubik Dirt', sans-serif;
            color: hsl(var(--bulma-text-h), var(--bulma-text-s), var(--bulma-text-l));
            margin-top: 1.5rem;
/*            opacity: 0.9; */
			font-size: 2rem;
        }

     
		.footer {
		            background-color: #000; 
				    color: hsl(var(--bulma-footer-color));
		            padding: 1.5rem 1rem;
		        }	
		
   	 #BBB {
   	 	max-width: 30px;
   	 }
	 
	 html {
 		font-family: 'Caveat', sans-serif;
		 background:url('plywood-texture.jpg') repeat;
		 background-color: #171717;
	 }
	 
	 body {
	 	 background: url('plywood-texture.jpg');
		 font-family: 'Caveat', sans-serif;
	 }
	 


	 .button {
		 font-family: 'Work Sans', monospace;
	 }
	 
	 
	 .paint {
		 background: #fff;
		 max-width: 88%;
		 margin: 0 auto;
/*		 opacity: .7;*/
	 }
	 
	 .finish {
		 background-color: #fff;
		 background:url('texture.png') repeat;
		 padding: 3em;
	 }

	 
     /* Tablet and up */
     @media screen and (min-width: 769px) {
         .hero {
             padding: 3rem 2rem;
         }

         .title-coming-soon {
             font-size: 4rem;
         }

         .subtitle {
             font-size: 1.5rem;
         }
		 
		 
     }

     /* Desktop and up */
     @media screen and (min-width: 1024px) {
         .hero {
             padding: 4rem 3rem;
         }

         .title-coming-soon {
             font-size: 5rem;
         }

         .subtitle {
             font-size: 1.75rem;
         }
		 
		 .home {
			 width: 120%;
			 position: relative;
			 left: -10%; 
		 /*	background:url('home-improvement.png') no-repeat center center;*/
			background-color: #fcfcfc;
/*		 	background-size: 1500px;*/
		 }
		 
		.navbar-menu {
			position: relative;
			width:100%;
		}
     }
	 
	 .button {
	 	 border: 0;
	 }
	 
	 .button:hover {
		 background: black;
		 color: white;
		
	 }
	 
     .gallery-item {
       position: relative;
       overflow: hidden;
       height: 500px;
	   width: 100%; /* Adjust as needed */
     }
     .before-image, .after-image {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
     }
     .before-image {
       animation: fadeLoop 6s infinite;
       z-index: 2;
     }
     .after-image {
       z-index: 1;
     }
     @keyframes fadeLoop {
       0% { opacity: 1; }
       40% { opacity: 1; } /* "Before" stays visible for a bit */
       50% { opacity: 0; } /* Fades out to show "After" */
       90% { opacity: 0; } /* "After" stays visible */
       100% { opacity: 1; } /* Fades back to "Before" */
     }
     .label {
       position: absolute;
       top: 10px;
       background: rgba(0, 0, 0, 0.7);
       color: white;
       padding: 5px 10px;
       border-radius: 3px;
       z-index: 3;
     }
     .before-label {
       left: 10px;
     }
     .after-label {
       right: 10px;
       opacity: 0; /* Hidden by default */
       animation: labelFade 6s infinite;
     }
     @keyframes labelFade {
       0% { opacity: 0; }
       40% { opacity: 0; } /* "After" label hidden while "Before" shows */
       50% { opacity: 1; } /* "After" label appears */
       90% { opacity: 1; }
       100% { opacity: 0; } /* "After" label fades out */
     }