a,a:focus,a:hover { color: #fff; transition: 0.2s; -moz-transition: 0.2s; -webkit-transition: 0.2s; -o-transition: 0.2s; } a:focus,a:hover { opacity: .7; text-decoration: none; } /* Custom default button */ .btn-default,.btn-default:hover,.btn-default:focus { color: #fff; text-shadow: none; background-color: transparent; border: 1px solid #fff; border-radius: 2px; } .cover-heading { width: 50%; /* Default width for desktops */ max-width: 100%; /* Ensures it doesn’t exceed container width */ } @media (max-width: 767px) { .cover-heading { width: 100%; /* Full width on mobile */ } } /** Base structure*/ html,body { height: 100%; background-color: #000; } body { font-family: Roboto, sans-serif; color: #fff; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.5); } /* Extra markup and styles for table-esque vertical and horizontal centering */ .site-wrapper { display: table; width: 100%; height: 100%; min-height: 100%; } .site-wrapper-inner { display: table-cell; vertical-align: top; position:relative; } .cover-container { margin-right: auto; margin-left: auto; position: relative; padding: 0 20px; } /* Padding for spacing */ .inner { padding: 30px; } /** Header*/ .masthead-nav > li,.masthead-brand > li { display: inline-block; } .masthead-nav > li + li,.masthead-brand > li + li { margin-left: 20px; } .masthead-nav > li > a,.masthead-brand > li > a { padding-right: 0; padding-left: 0; font-size: 28px; font-weight: bold; color: #fff; } .masthead-nav > li > a:hover,.masthead-nav > li > a:focus,.masthead-brand > li > a:hover,.masthead-brand > li > a:focus { background-color: transparent; color:#fff; } .masthead a { text-decoration: none; } @media (min-width: 768px) { .masthead-brand { float: left; } .masthead-nav { float: right; } } /* VIDEO BACKGROUND */ .video-background { z-index:550; text-align:center; height:100%; min-height:100%; position:relative; overflow:hidden } .video-background .video-background-container { width:830px; max-width:100%; display:inline-block; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .video-background-title { font-size:78px; color:#fff; font-weight:300; text-transform:uppercase; text-align:center; margin-bottom:22px; padding-top:20px; display:inline-block; background-attachment:scroll; background-repeat:repeat-x; background-position:top center } .video-background-default-image { background:url(img/Texture.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover; width:100%; height:100%; z-index:0; backface-visibility:hidden } .overlay { background: rgba(0, 0, 0, 0.4); width:100%; height:100%; position:absolute; top:0; left:0; } /** Cover*/ .cover { padding: 0 20px; } .cover .btn-lg { font-weight: bold; } .cover-heading { font-size: 30px; padding-bottom: 30px; margin-top: 0; /* Added to prevent unnecessary space above the image */ max-width: 100%; /* Ensures the image doesn't stretch beyond container */ object-fit: contain; /* Keeps the image's aspect ratio intact */ } .cover-container { display: flex; justify-content: center; /* Centers the content horizontally */ align-items: center; /* Centers the content vertically */ height: 100vh; /* Ensures the container takes up full viewport height */ } .small { color:#ccc!important; } #clock div { display: inline-block; font-size: 10px; font-weight: 600; margin:0 8px 20px 8px; text-transform: uppercase; letter-spacing: 2px; line-height: 30px; } #clock span { display: block; font-size: 32px; font-weight: 100; padding: 30px 0; border-bottom: 1px solid #fff; } /** Footer*/ .mastfoot { color: #999; /* IE8 proofing */ color: rgba(255,255,255,.5); } @media (min-width: 768px) { .masthead { position: fixed; top: 0; } .mastfoot { position: fixed; bottom: 0; } .site-wrapper-inner { vertical-align: middle; } .masthead,.mastfoot,.cover-container { width: 100%; } .cover-heading { font-size: 40px; } #clock span { font-size: 72px; padding: 30px 0; } #clock div { margin:0 25px 30px 25px; line-height: 60px; font-size: 14px; } } @media (min-width: 992px) { .mastfoot,.cover-container { max-width: 800px; } .masthead { max-width: 100%; } } /* Flexbox for aligning buttons horizontally */ .button-group { display: flex; justify-content: center; /* Align buttons in the center */ gap: 15px; /* Space between buttons */ } /* Hide buttons on mobile (below 768px) */ @media (max-width: 767px) { .button-group { display: none; /* Completely hides the buttons */ } } /* Spacer between buttons */ .spacer { margin: 0 15px; /* Adjust the value to change the space between the | */ } /* Smaller button style */ .btn-lg { padding: 10px 20px; /* Adjust the padding to make the button smaller */ font-size: 16px; /* Reduce the font size */ border-radius: 4px; /* Optional: Make the buttons have rounded corners */ } /* Styling for the big Email Us button */ .cta-btn { display: inline-block; padding: 20px 40px; font-weight: bold; text-transform: uppercase; text-align: center; background-color: #8D8D8D; /* Bright color for visibility */ color: #fff; border: none; border-radius: 50px; /* Rounded corners */ text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; } .cta-btn:hover { background-color: #313131; /* Slightly darker shade when hovered */ transform: scale(1.1); /* Slight zoom effect on hover */ } .cta-container { text-align: center; /* Centering the button */ margin-top: 10px; } /* Styling for the construction banner */ .construction-banner { background-color: #165156; /* Yellow background for attention */ color: #fff; /* White text */ text-align: center; /* Center the text */ font-size: 18px; /* Font size for the text */ font-weight: bold; /* Make text bold */ top: 0; left: 0; width: 100%; z-index: 1000; /* Ensure it's on top of other elements */ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */ position: fixed; } /* Styling for the emoji */ .construction-banner p { margin: 0; } /* Background Image Styling */ body { background: url('img/Texture.jpg') no-repeat center center fixed; background-size: cover; margin: 0; height: 100%; font-family: 'montserrat', sans-serif; } /* Full height wrapper */ .site-wrapper { display: table; width: 100%; height: 100%; } .site-wrapper-inner { display: table-cell; vertical-align: middle; text-align: center; } /* Overlay for better text visibility */ .overlay { background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Cover container centering */ .cover-container { position: relative; z-index: 1; } /* Cover heading image styling */ .cover-heading { max-width: 80%; /* Adjust size */ height: auto; margin: 0 auto; } .lead { font-size: 2.25rem; color: #fff; margin-top: 0px; } /* Footer Styling */ .mastfoot { position: absolute; bottom: 20px; width: 100%; color: rgba(255,255,255,0.7); font-size: 14px; } .mastfoot a { color: #fff; text-decoration: none; } .mastfoot a:hover { text-decoration: underline; }