:not(:defined) > * {
  display: none;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* AR 3D MODEL */

model-viewer {
  width: 100%;
  height: 90%;
  background-color: #ffffff;
}


.progress-bar {
  display: block;
  width: 33%;
  height: 10%;
  max-height: 2%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 25px;
  box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.5);
}

.progress-bar.hide {
  visibility: hidden;
  transition: visibility 0.3s;
}

.update-bar {
  background-color: rgba(255, 255, 255, 0.9);
  width: 0%;
  height: 100%;
  border-radius: 25px;
  float: left;
  transition: width 0.3s;
}

#ar-button {
  background-image: url(/images/ar_icon.png);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  background-position: 12px 50%;
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  bottom: 16px;
  padding: 0px 16px 0px 40px;
  font-family: Roboto Regular, Helvetica Neue, sans-serif;
  font-size: 14px;
  color:#4285f4;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  border: 1px solid #DADCE0;
}

#ar-button:active {
  background-color: #E8EAED;
}

#ar-button:focus {
  outline: none;
}

#ar-button:focus-visible {
  outline: 1px solid #4285f4;
}

@keyframes circle {
  from { transform: translateX(-50%) rotate(0deg) translateX(50px) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg) translateX(50px) rotate(-360deg); }
}

@keyframes elongate {
  from { transform: translateX(100px); }
  to   { transform: translateX(-100px); }
}

model-viewer > #ar-prompt {
  position: absolute;
  left: 50%;
  bottom: 60px;
  animation: elongate 2s infinite ease-in-out alternate;
  display: none;
}

model-viewer[ar-status="session-started"] > #ar-prompt {
  display: block;
}

model-viewer > #ar-prompt > img {
  animation: circle 4s linear infinite;
}

.p3 {font-size:60px;}

/*           */

.indextext {width: 85%;}

  /* NAVIGATION STRUCTURE ================== */
		.responsive-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #ffffff;
    z-index: 1001; /* Ensure the nav stays above other content */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0px; /* Adjust padding as needed */
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
}
		  
		  .nav-logo img {
    height: 60px; /* Ensure the logo fills the nav height */
	padding-top:10%;
}

.nav-toggle img {
    height: 60px; /* Ensure the nav toggle button fills the nav height */
    cursor: pointer; /* Add pointer cursor to indicate interactivity */
}

.nav-content {
    position: fixed;
    top: 70px; /* Ensure the nav starts below the responsive nav */
     flex-wrap: wrap; /* Allow flex items to wrap to the next line */
    justify-content: flex-start; /* Align flex items at the start of the container */
    width: 100%;
	left:0;
	padding-left: 10px;
    height: 100%;
    background-color: #ffffff;
    z-index: 1000; /* Ensure the nav content stays above other content */
    display: none; /* Initially hide the nav content */
	
    /* Add additional styling as needed */
}

.nav-content.show {
    display: block; /* Show the nav content when toggled open */
}

.nav-toggle {
    margin-right: 1%; /* Add margin to the right side */
}

.nav-content a {
    font-family: 'titling-gothic-fb-wide', sans-serif;
    font-size: 7vw;
    font-weight: 500;
    color: #eee;
    text-decoration: none;
    position: relative;
    text-shadow: -1px -1px 0 #000,  
                 1px -1px 0 #000,
                -1px 1px 0 #000,
                 1px 1px 0 #000;
    transition: color 0.3s;
    padding-right: 2%; 
    overflow-wrap: break-word;
    hyphens: auto; /* Enable automatic hyphenation */
}

.nav-content a:hover {
    color: #ceff00; /* Change text color on hover */
}

		  /* Adjust styles for smaller screens using media queries */
@media (max-width: 768px) {
    .nav-content {
        flex-wrap: nowrap; /* Prevent wrapping on smaller screens */
		padding-right: 20px;
		padding-top:  20px;
    }
    .nav-content a {
        font-size: 32px; /* Reduce font size for smaller screens */
     padding-right: 5px; 
		
    }
}
	

/* */

/*. MAIN COLUMN STRUCTURE */


	  
		  .redbar {height:8%; background: #D06B6C; 
			  position: relative;}
	
	  .inner2 {background-color: none;}
		  
	.outer-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;
    background-image: url('images/construction.png');   
    background-size: auto 90%; /* Set the height to 50% of the container height */
    background-position: center bottom 0px;
    background-repeat: no-repeat;
}
         
		  
		  .jam {
    display: flex; /* Use flexbox */
    justify-content: flex-start; /* Align items to the start (left) of the container */
    align-items: flex-start; /* Align items to the start (top) of the container */
}


	  .Bleft {background-color: none; width:50%; height: auto; overflow: hidden;}
		  .Bleft img {
    width: 100%; /* Make the image width 100% of its container */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Shrink the image to fit while maintaining aspect ratio */
}
		  .Bmid {background-color: none; width:10%; height:auto;}
		  
		  .Bmid img {
    width: 80%; /* Make the image width 100% of its container */
			  padding-left: 5px; padding-right: 5px;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Shrink the image to fit while maintaining aspect ratio */
}
		  .Bright {background-color:none; width:50%; height:auto; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;}
		  
		   .Bright a {
    color: black; /* Set the color of the links to black */
    text-decoration: none; /* Remove underlines from the links */
}

.Bright a:hover,
.Bright a:visited:hover {
    color: #ceff00; /* Change text color on hover */
}

.Bright a:visited {
    color: black; /* Set the color of visited links to black */
	  text-decoration: none;
}
		  
		  .body {overflow-x: hidden;  padding-left: 10px; padding-right: 10px; background-color: blueviolet; }
		  
		  .bizinfo {position: absolute; left:10; top:40; width:75%;  heigh:40%; background:#28C95C; }
		  .bizcard {position:absolute; right:0; top:0;  width:10%; background: none; padding-right:5%;}
		  .section1 {height:80vh; background: #fff; width: 100%; overflow-x: hidden; overflow-y: hidden; }
		  .section1section1 {height:90%; background: none;}
		  		  .section2 {heaight:auto; min-height:100vh; position: relative; margin-top:0px; color: black; overflow-x: hidden;  }
.section2section {height:auto; font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif; padding-right:10px; padding-left:10px; width: auto; overflow-x: hidden; overflow-y: hidden;}
		  .section2section a {
    color: black; /* Set the color of the links to black */
    text-decoration: none; /* Remove underlines from the links */
}

.section2section a:hover,
.section2section a:visited:hover {
    color: #ceff00; /* Change text color on hover */
}

.section2section a:visited {
    color: black; /* Set the color of visited links to black */
	  text-decoration: none;
}
		  		  .section3 {min-height:100vh; background:#fff; position: relative;padding-left: 10px; padding-right: 10px; }

		  		  		  .section4 {height:100vh; background:none; position: relative; padding-left: 10px; padding-right: 10px; }

		  
		  .section4 img {
    width: 100%; /* Make the image width 100% of its container */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Shrink the image to fit while maintaining aspect ratio */
		}
		  


/*.*/

/*  FOOTER STRUCTURE   */


  .fakefoot {
            height: 80%;
			position: relative;
		background-color: none;
color: white;
      background-size: auto 80%; /* Set the height to 50% of the container height */
      background-position: center bottom;
      background-repeat: no-repeat;
			background-attachment: fixed;
			overflow: hidden;
    }

  .child {
    position: absolute;
    bottom: 0;
    width: 100%;
			height: 60%;
    background-image: url('images/fence.png');
    background-size: auto 100%; /* Auto width, 100% height */
			background-position: center;
    background-repeat: repeat-x; /* Repeat horizontally */
    padding: 0px;
}
		
		.footerinfo {
        display: flex;
			background: none;
    align-items: center;
    justify-content: space-between; /* Distribute space evenly between child elements */
    height: 100%;
    width: 90%;
    margin: 0 auto; /* Center the container */

}
		@media (max-width: 767px) {
  .footerinfo {
    width: 100% !important;  }
}
		
 .upperfooterblank {
		height:30%; background:none;	
		
		
	}

	.lowerfooter {height: 70%; 
		
 background-image: url('images/fence.png');
    background-size: auto 100%; /* Auto width, 100% height */
    background-position: 50% 100%; /* Align background image to the bottom */
    background-repeat: repeat-x; /* Repeat horizontally */	
	display: flex; /* Use flexbox for layout */
    flex-direction: row; /* Stack the divs horizontally */}

.column {
    width: 20%;
    height: 100%; /* Set a specific height for demonstration */
   /* background-color: rgba(255, 103, 211, 0.3); /* just for visualization */
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Center the content vertically */
	margin-top:50px;
}

.middle-column {
    width: 80%;
	font-size: 12px;
    background: none;
	position: relative;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items:flex-start; /* Center the content vertically */
}
		
		.innercolumn {
    width: 85%;
			position: relative;
    background: none;
    margin-top: 35px;
    opacity: .7;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
}
		
		.class {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background: none;
    padding-left: 2%;
    padding-right: 2%;
    width: 100%;
    height: 20%;;
    flex-wrap: wrap; /* Allow flex items to wrap */
    object-fit: contain;
}

		  
		  .title img {
   max-height: 100%;
   max-width: 100%;
   margin: 10px;
   object-fit: contain;
   display: inline-block;
   vertical-align: middle;
	
}


		
		
		.title {
    background: none;
    width: 100%;
    height: 90%;
    object-fit: contain;
    display: flex;
    justify-content: center; /* Center the content horizontally */
    align-items: center; /* Center the content vertically */
}

 .image-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-grid a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 5px; /* Adjust margin as needed */
}

.image-grid a {
    display: inline-block;
    margin: 5px; /* Adjust margin as needed */
    text-decoration: none;
    width: auto; /* Ensure the anchor tags do not interfere with image sizing */
}

.image-grid a {
    display: inline-block;
    max-width: 25%; /* Adjust the width as needed */
    height: auto;
	
    margin: 5px;
   padding-left: 3%; padding-right: 3%;
    text-decoration: none; /* Remove underline from links */
    text-align: center; /* Center the image and text */
}

.image-grid a img {
    max-width: 100%;
    height: auto;
	
}
		
		.image-grid a img {
    max-width: 100%;
    height: auto;
			cursor: url('images/mousemouse.png'), auto;
}

.footerinfo a {
}
		
		   .sticky-div {
      position: absolute;
      bottom: 0;
			   margin-bottom: 70px;
      width: 100%;
      background:none;
			color:white;
			   padding-left: 20px;
			   padding-left: 20px;}
			   
	.columnal {width: 80%;}
			
		@media (max-width: 767px) {
    .columnal {
        /* Your styles for smaller screens */
        width: 110%;  margin-top: 7%;/* Adjust as needed */
    }
}

		.columnal2 {width: 35%;}
			
		@media (max-width: 767px) {
    .columnal2 {
        /* Your styles for smaller screens */
        width: 110%; margin-top: 9%;  /* Adjust as needed */
    }
		
	.middle-column {
    width: 70%;
    background:none;
    font-size: 2px;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    /* Ensure no overflow beyond the boundaries */
}


	
	.title {padding-left: 2%; padding-right: 2%; padding-top: 2%;}
		  
		  .title img {
   max-height: 100%;
  width: 100%;
   margin: 10px;
   object-fit:scale-down;
   display: inline-block;
   vertical-align: middle;
	
}
		  
	
	

	
	
}
	.columnal {width: 85%;}

  #scrollboy {
    border-radius: 5px;
    padding-left: 20px;
    height: 230px;
    width: 65%;
    overflow: hidden;
    position: relative;
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    font-size: 2.2em;
    line-height: 1.3em;
  }

  /* Container for scrolling content */
  #scroll-container {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    width: 100%;
    animation: scroll 10s linear infinite;
    animation-delay: 10s; /* Delay before animation starts */
  }

  /* Keyframes for infinite scrolling */
  @keyframes scroll {
    0% { transform: translateY(0); } /* Start at the top */
    100% { transform: translateY(-50%); } /* Scroll smoothly to half, which loops */
  }

  /* Ensuring seamless repeat */
  .scroll-content {
    white-space: nowrap;
  }