/* Default CSS */
/* Generated by the CoffeeCup HTML Editor - www.coffeecup.com */
				body, p,h1, h3, li, ul, h1{
				font-family: Helvetica, Arial, Verdana, sans-serif;
				color: #25305c;
				text-align: center;
                -moz-border-radius: 5px;
                -webkit-border-radius:5px;
                text-decoration:none;
              }
        button.button,
              a.button,
              input.button {
                color: #ffffff !important;
              }        
             a:visited{color:#212F3D;
                       text-decoration: none; }
             a:hover{color:#212F3D;
                     text-decoration: none; }
             a:active{color:#566573;
                      text-decoration: none; }
                      
             .small-button {
              all: unset;
              background-image: linear-gradient(#FF0099, #0e1224);
              color: #ffffff !important;
              font-family: Helvetica, Arial, sans-serif;
              padding: 0.4em 0.8em;
              font-size: 0.9em;
              font-weight: bold;
              border-radius: 5px;
              text-align: center;
              text-decoration: none;
              display: inline-block;
            }
            
            .small-button:hover {
              background-image: linear-gradient(#ff0099, #e3d0f4);
              box-shadow: 0 0 5px #ff3399;
              transform: translateY(-1px);
            }
                      
             img.large{ width:99%; height: 100%;}
                       
             img.thumb{width:150px; height:150px; }
             
             img.home{width:5em; height:100%;}
             
             @font-face {
                        font-family: 'bacon_sandwichregular';
                        src: url('../assets/baconsandwich-webfont.woff2') format('woff2'),
                        url('../assets/baconsandwich-webfont.woff') format('woff')
                         }
             h2{ 
                color: #ff3399;
                text-align:center;
                font-family: 'bacon_sandwichregular', Helvetica, Arial, sans-serif;
                letter-spacing: 0.1 em;
                font-size: 200%;
               } 
                
             .about{ font-family: Helvetica, Arial, Verdana, sans-serif;
				color: #ff3399;
				text-align: left;
                -moz-border-radius: 5px;
                -webkit-border-radius:5px;
              }


body {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 1rem;
        background-color: #0e1224;
      }
#feature p {
  line-height: 1.6;
}

 .header {
             position:relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #fbfcfc;
          padding: 10px 30px;
          color: #ff3399;
         }

        .branding {
                  display: flex;
                  align-items: center;
                  gap: 10px;
        }
        
        .branding img {
                    height: 60px;
        }
        
        .branding h1 {
          color: #ff3399;
          font-family: 'bacon_sandwichregular', sans-serif;
          font-size: 2rem;
          margin: 0;
          white-space: nowrap;
        }
        
        .menu-toggle {
                     display:none; 
                     font-size:2rem;
                     border:none;
                     color:#fff;
                     cursor:auto;}
                     
        /*Default desktop layout*/
        .nav{
             display:block;     }
        
        .nav ul {
          display: flex;
          list-style: none;
          gap: 20px;
          margin: 0;
          padding: 0;
        }
        
        .nav li {
          white-space: nowrap;
        }
        
        .nav a {
          color: #ff3399;
          text-decoration: none;
          font-weight: bold;
        }

      /*Nav/hamburgertoggly*/
      @media (max-width: 1650px) {
             .menu-toggle{
               display:block;
                          }
            .nav{
                 width:100%;
                 background-color:#3b2e2f;
                 margin-top: 10px;
                 max-height:0;
                 overflow:hidden;
                 transition:max-height 0.4s ease, opacity 0.4s ease;
                 background-color:#3b2e2f;}
            .nav.open {
                      max-height:500px;
                      opacity:1;
                       }
            .nav ul{
                 flex-direction: column;
                 align-items: flex-start;
                   padding: 10px;
        }
          
            .nav li {
              margin: 5px 0;
            }
          
            .header {
              flex-wrap: wrap;
              align-items: flex-start;
            } }  
      
      .nav a:hover {
        text-decoration: underline;
      }
      		#content {
      				overflow: auto;}
                           }
                      
      			#nav, #feature, #footer {
      				margin: 3%;
                      
                    }
                  
      			.column1, .column2, .column3{
      				width: 30%;
                      float: left;
                      display: inline;
      				margin: 2%;
                      margin-right: 1%;
                      	padding: 1 em;
                       }
                   .column3 {
      				margin-right: 0%;
                   }
      			li {
      				display: inline;
      				padding: 1 em;
                    }
      
                      
      			#nav, #footer {
      				background-color: #FBFCFC;
      				padding: 0.2em 0.2em;}
                     
                      
      			.article {
      				height: 30%;
      				margin-bottom: 1em;
      				background-color: #FBFCFC;
                     text-decoration:none}
                    
                  #feature{height:inherit;
                  margin-bottom: 1 em;
                  margin-top: 1 em;
      				background-color: #FBFCFC;}
                      
                  .about{ font-family: Helvetica, Arial, Verdana, sans-serif;
      				color: #717d7e;
                      text-align:left;
                      -moz-border-radius: 5px;
                      -webkit-border-radius:5px;
                    }
                      
                  .left {
                        float:left;
                        display:inline;
                        padding 0 0px 0px 0;
                        }
         @media (min-width:1651px;){
                .menu-toggle{
                             display:none; } 
            .nav{
                 max-height:none;
                 overflow:visible; }
         }
         /*End Header, begin body css*/
         .hero {
                  position: relative;
                  
                  background-size: cover;
                  background-position: center;
                  padding-top: 2rem;
                  margin-top: 1rem;
                  height:45%;
                   background: url('../assets/hero-background.jpg') center/cover no-repeat; /* Swap in your image */
                }
                
                .hero-overlay {
                  /* darkens the image for contrast */
                  width: 100%;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }
                
                .hero-content {
                  text-align: center;
                  max-width: 800px;
                  margin:0 auto;
                  padding: 2rem;
                  border-radius: 3px;
                  color: #ffffff;
                  }
                
                .hero-content h1 {
                  font-size: 2.5rem;
                  margin-bottom: 1rem;
                  font-family: 'bacon_sandwichregular', Helvetica, sans-serif;
                }
                
                .hero-content p {
                  font-size: 1.25rem;
                  margin-bottom: 1.5rem;
                  font-weight: 400;
                  line-height: 1.4;
                }
                
                .hero .button {
                  background-image: linear-gradient(#ff3399, #0e1224);
                  color: #ffffff;
                  font-size: 1.1rem;
                  padding: 0.75em 1.25em;
                  font-weight: bold;
                  border: none;
                  border-radius: 6px;
                  text-decoration: none;
                  transition: all 0.3s ease;
                }
                
                .hero .button:hover {
                  background-image: linear-gradient(#e2d0f4, #ff3399);
                  box-shadow: 0 0 10px #ff3399;
                  transform: translateY(-2px);
                }
         
         
  .contact-container {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: 1% 2%;
                background-color: #FBFCFC; /* Light background */
                color: #fff;
                gap: 5%;
              }
              
              /* Left Column: Form */
              .contact-left {
                flex: 1;
                max-width: 50%;
              }
              
              .contact-left form {
                display: flex;
                flex-direction: column;
                gap: 5px;
                align-items: flex-start;
                color: #fff;
              }
              
              .contact-left input,
              .contact-left textarea {
                width: 75%;
                padding: 4px;
                border: 1px solid #ccc;
                border-radius: 6px;
                font-family: inherit;
                box-sizing: border-box;
              }
              
              /* Right Column: Info/Copy */
              .contact-right {
                flex: 1;
                max-width: 50%;
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;
                color: #ddd;
                font-size: 0.9em;
              }
      
     /*Contact Button repeat*/ 
      .button {
              all: unset;
                color: #ffffff;
              background-image:linear-gradient(#FF0099,#0e1224);
              font-family:Helvetica, Arial, sans-serif;
              border:none;
              width: 40%;
              padding: 3%;
              text-align: center;
              text-decoration: none;
              display: inline-block;
              font-size: 1.2em;
              font-weight: bold;
              border-radius:6px;}
      
      .button:hover{
                    background-image: linear-gradient(#ff0099,#e3d0f4);
                    text-decoration:none;
                     }
        /* Focus accessibility */
      .button:focus {
                  outline: 2px solid #ffffff;
                  outline-offset: 2px;
                }        
      /*  pressed effect */
      button:active {
                transform: translateY(1px);
                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
              }
      /*for mobile*/
      @media (max-width: 600px) {
              .button {
                font-size: 1rem;
                padding: 0.6em 1.2em;
                width: 100%; /*tap-friendliness */
                box-sizing: border-box;
              }
               .hero-content h1 {
                    font-size: 1.8rem;
                  }
                
                  .hero-content p {
                    font-size: 1rem;
                  }
                
                  .hero .button {
                    font-size: 1rem;
                    width: 100%;
                    box-sizing: border-box;
                  }
                }
            }               
   .product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  bottom: auto;
  gap: 1rem;
  padding: 2rem 0;
  justify-items: center;

}

.product-gallery img {
  max-width: 35%;

  border: 1px solid #ccc;
  border-radius: 4px;
  transition: transform 0.3s ease;
  box-sizing: border-box;
}


.product-gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
} 
.gallery {
   display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
  justify-items: center;
  justify-content:center;
  max-width: 800px;
    width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.gallery img {
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  transition: transform 0.3s ease;
}


#gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

.portfolio-img {
  width: 48%;
  height: auto; /* preserves natural aspect ratio */
  margin: 1%;
  border: 1px solid #ccc;
  box-sizing: border-box;
  transition: transform 0.3s ease;
}

.portfolio-img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}
.masonry-gallery {
  column-count: 2;          /* number of columns */
  column-gap: 1rem;         /* gap between columns */
  max-width: 1100px;         /* max width of gallery */
  margin: 0 auto 2rem;      /* center horizontally and add bottom space */
  padding: 0 1rem;
}

.masonry-gallery a {
  display: inline-block;    /* important for column layout */
  width: 100%;
  margin-bottom: 1rem;      /* vertical spacing between items */
  break-inside: avoid;      /* prevent items from breaking between columns */
}

.masonry-gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border: 1px solid #ccc;
  transition: transform 0.3s ease;
   max-width: 100%;  
}

.masonry-gallery img:hover {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .masonry-gallery {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  .masonry-gallery {
    column-count: 1;
    padding: 0 0.5rem;
  }
}
@media (max-width: 600px) {
            body {
              padding: 0.5rem;
            }
          
            .hero-content h1 {
              font-size: 1.8rem;
            }
          
            .hero-content p,
            p {
              font-size: 1rem;
              line-height: 1.6;
            }
          
            .gallery img {
              width: 100%;
              height: auto;
            }
          
            .button {
              font-size: 1rem;
              padding: 0.75rem 1rem;
              width: 100%;
              box-sizing: border-box;
            }
          
            nav ul {
              flex-direction: column;
              gap: 10px;
            }
}