* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ==========================================
   MOBILE HORIZONTAL OVERFLOW GUARD
   Prevents any element (fixed buttons, transforms,
   negative margins, wide flex rows, etc.) from
   creating extra swipeable space on the right.
   Safe to add globally — does not affect layout,
   only clips accidental overflow.
========================================== */

html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* Catch-all: any direct child that might be wider than the viewport
   gets clipped instead of creating scroll space */
body > * {
  max-width: 100vw;
}

/* Prevent any element with a transform (like the floating quote button)
   from expanding the scrollable area on mobile */
@media (max-width: 768px) {
  * {
    max-width: 100vw;
  }
}
.header {
    display: flex; /*puts items side by side*/
    justify-content: space-between; /*space between items or pushes logo left nav right */
align-items: center; /*vertically center items*/
padding: 15px 30px;  /*top and bottom padding 10px, left and right padding 20px*/
background-color: white; /*sets background color to black*/
}
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#welcomeTitle,
#welcomeMessage {
    transition: opacity 0.4s ease;
}

.welcome-banner {
  display: flex;
  align-items: center;
  gap: 80px;
  padding: 10px 15px;
  background: linear-gradient(135deg, #e6fff1, #ffffff);
  border-radius: 0px;
  margin-bottom: 0px;
  overflow: hidden;
}

/*home link*/

.home-link {
    display: inline-block;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.home-link:hover {
    transform: scale(1.05) !important;
}

.welcome-banner *{
    flex-shrink: 0;
}
.top-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0px;
    margin-top: 0px;
    background:linear-gradient(150deg,  #e6fff1, #ffffff);
}

/* Avatar + logo container */
.avatar-box {
  position: relative;
  width: 70px;
  height: 70px;
  background:linear-gradient(135deg, #e6fff1, #ffffff);
}

/* stack both images */
.avatar, .logo {
  position: absolute;
  width: 100px;
  height: 100px;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* ONLY one visible at a time */
.avatar.show,
.logo.show {
  opacity: 1;
  transform: scale(1);
}

/* bounce animation ONLY for avatar when active */
.avatar.show {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* optional text styling */
.welcome-text h3


/*search bar and auth buttons*/
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    border: 20px;
    margin-right: 20px;
}

    /*prevents shrinking*/
    .search-container input{
        width: 200px;

    }

header, nav {
  border-bottom: none;
  box-shadow: none;
  
}

.hero, 
.company-overview {
  margin-top: 0;   /* prevents collapsed margin gap */
  padding-top: 0;
  border: none !important;
  box-shadow: none !important;
   background-color: inherit; /* matches body background */
}

#searchResults.dropdown-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
}
#searchResults.dropdown-results.show {
    display: block;
}
#searchResults.dropdown-results:empty {
  display: none;
}
#searchResults.dropdown-results li {
  padding: 8px;
}

#searchResults.dropdown-results li a {
  text-decoration: none;
  color: #333;
  display: block;
}

#searchResults.dropdown-results li:hover {
  background: #f0f0f0;
}

.auth-buttons {
    display: flex; /*puts login and signup buttons side by side*/
    align-items: center;
    gap: 10px; /*adds space between buttons*/
}
/*slider container*/
.slides{
    position: relative; /*for absolute positioning of slides*/
    width: 100%;
    display: block;
    vertical-align: middle; /* prevents baseline gap*/
    height: 70vh; /*adjust as needed*/
    overflow: hidden; /*hides overflow for slide effect*/
}
/*slides wrapper*/
.slides-wrapper {
    display: flex; /*puts slides side by side*/
    transition: transform 0.5s ease-in-out; /*smooth slide transition*/
}
/*images in slider*/
.slide {
    width: 100%; /*ensures slides take full container width*/
    height: 100%;
    display: block; /*removes inline spacing*/
    border: none; /*removes default border around images*/
    image-rendering: auto;
    position: absolute;
    object-fit: contain;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
 backface-visibility: hidden;
    transform: translateZ(0);
}
/*active slide*/
.slide.active {
    opacity: 1; /*makes active slide visible*/
    z-index: 1;
}
.hero {
    margin-bottom: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-top: 0px;
}

.company-overview {
    margin-top: 0;
    padding-top: 20px; /* or 0 */
}

h1{
    line-height: 1.2; /*reduces line height for better spacing*/
}
h2,h4{
    color: #1f7a3d; /* Your green theme */
}
h1, h2, h3, h4, h5, h6 {
   line-height: 1.2; /*reduces line height for better spacing*/
   margin-top: 0; /*removes default top margin*/
}
.hero, .company-overview, slides, .footer {
   line-height:normal;
}

.hero-text {
    padding: 20px;
    max-width: 900px;
    margin: auto;
    text-align: center;
}

body {
font-family: "Comfortaa", sans-serif;
margin: 0;
padding: 0;
font-size: large;
background-color: #fff;
color: #333;
}



main {
  margin-bottom: 60px;   /* space before footer */
  padding: 20px; 
}
nav {
 padding-bottom: 0px;
 margin: 0;
    margin-bottom: 0px;   /* space below navbar */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}
.header{
    display: flex; /*puts items side by side*/
    justify-content: space-between; /*space between items or pushes logo left nav right */
align-items: center; /*vertically center items*/
padding: 10px 20px;  /*top and bottom padding 10px, left and right padding 20px*/
}
/* CSS must give the navigation bar a background color to make it visible */    
.nav-links {
    list-style: none; /*removes bullets*/
    display: flex; /*puts links side by side*/
   flex-wrap: nowrap;
   gap: 20px;
    align-items: center; /*vertically centers links*/
    flex-direction: row; /*ensures links are in a row*/
    background-color:black; /*sets background color to black*/
    margin: 0; /*removes default margin*/
    padding: 0; /*removes default padding*/
}
.nav-links li{
    position: relative; /*for dropdown positioning*/
}
.nav-links a{
    color: white; /*sets link color to white*/
    text-decoration: none; /*removes underline*/
    padding: 14px 20px; /*adds padding around links*/
    display: block; /*makes links block-level for better clickability*/
}
.nav-links a:hover {
    background-color: rgb(3, 101, 3); /*changes background color on hover*/
}

.dropdown {
    position: relative;
}
/* downdropdown menu  hide until hovered*/
.dropdown-menu {
    display: none; /*hides dropdown by default*/
    top: 100%; /*positions dropdown below the parent*/
    left: 0; /*aligns dropdown to the left of the parent*/  
    position: absolute;
    z-index: 9999;
    background: #070707; /*sets background color*/
    min-width: 200px; /*sets minimum width*/
}
.dropdown:hover .dropdown-menu{
    display: block; /*shows dropdown on hover*/
}

    /*make links vertical*/
.dropdown-menu li {
    display: block;
}

.dropdown-menu li a {
    display: block;
    padding: 10px;
}

/*buttons search, login, sigup*/
button, .login-btn, .search-btn, .signup-btn {
     cursor: pointer; /*changes cursor to pointer on hover*/    
    padding: 5px 10px; /*adds padding to buttons*/
    background-color: black; /*sets background color to black*/
    color: white; /*sets text color to white*/
    border: none; /*removes default border*/
    border-radius: 4px; /*adds rounded corners*/
    margin-top: 4px;
    margin-bottom: 5px;
    font-size: 10px;
    width: auto;
    height: auto;
    text-align: center;


}
button:hover, .login-btn:hover, .signup-btn:hover {
    background-color:lightgrey; /*changes background color on hover*/
}   

h3, h4{
  margin-top: 20px;    /* space above the heading */
  margin-bottom: 15px; /* space below the heading */
}

/*footer*/
/*logo and navigation bar*/
.logo {
        display: flex; /*puts logo and nav side by side*/
       flex-direction: column; /*stacks logo and nav vertically*/
        align-items: center; /*vertically centers logo and nav*/
text-align: center; /*centers logo and nav*/
    padding: 10px 20px; /*adds padding around logo and nav*/

}
.footer-logo img {
   margin: 0 auto; /*centers the image horizontally*/
    display: block;
    max-width: 80px;
    height: auto;
}
.logo-p {
   margin-top: 10px; /*adds space above logo text*/
    font-size: 20px;
    font-weight: bold;
    color: white; /*sets text color to white*/  
}
.footer {
    background-color: black; /*sets background color to black*/
    font-family: "Cormorant Garamond"; /*sets font family*/
    margin-top: 60px;
    padding: 15px 10px; /*adds padding around footer*/
    color:   #eee; /*sets text color to white*/
}

.footer-section {
flex: 1; /*allows sections to grow equally*/
min-width: 200px; /*ensures sections don't get too narrow*/
margin-bottom: 20px; /*adds space between sections*/
}
.left {
    text-align: left; /*aligns text to the left*/
}
.right {
    text-align: right; /*aligns text to the right*/
}

.center {
    text-align: center; /*aligns text to the center*/
}
.search-container {
    display: flex; /*puts search input and button side by side*/
    align-items: center; /*vertically centers search input and button*/
}
/*main foooter row*/
.footer-container {
    display: flex; /*puts footer sections side by side*/
    align-items: flex-start; /*aligns sections to the top*/
    justify-content: space-between; /*space between sections*/
    gap: 40px; /*adds space between sections*/
    margin: 0;
    padding: 20px; /*adds padding around footer content*/
}
/*left group logo and nav links*/
.footer-left {
    display: flex; /*puts logo and nav side by side*/
    align-items: center; /*vertically centers logo and nav*/
    gap: 20px; /*adds space between logo and nav*/
}
/*center socials*/
.social-center {
    text-align: center; /*centers text in social section*/
}
/*contact info right*/
.contact-info {
    text-align: right; /*aligns text to the right*/
}

.footer-section{
    flex: 1; /*allows sections to grow equally*/
    min-width: 200px; /*ensures sections don't get too narrow*/
}
 .footer-section h3,
  .footer-section h4 {
    font-size: 18px; /*sets font size for section titles*/
    color: white; /*sets section title color to white*/
    font-family: "Cormorant Garamond", serif; /*sets font family for section titles*/   
color: green; /*sets section title color to white*/
    margin-bottom: 15px; /*adds space below section titles*/
}
.footer-section a{
    display: block; /*makes links block-level for better spacing*/
    margin-bottom: 10px; /*adds space between links*/
   color: white; /*sets link color to white*/
    list-style: none; /*removes bullets*/
    padding: 0; /*removes default padding*/
}
.footer-section a:hover {
color: lightgrey; /*changes link color on hover*/
    text-decoration:underline; /*adds underline on hover*/
}
footer a{
    color:#4FD1C5; /*sets link color to white*/
    text-decoration: none; /*removes underline*/
}
/*social media icons*/
.social-links {
    display: flex; /*makes social icons block-level for better layout control*/
  flex-direction: column; /*stacks icons vertically*/
    align-items: center; /*aligns icons to the right*/
    list-style: none;
    gap: 10px; /*adds space between icons*/
    color: white; /*sets icon color to white*/
    text-decoration: none; /*removes underline from icons*/
    margin-top: 10px; /*adds space above social icons*/
}
.social-links a:hover{
    color: lightgrey; /*changes icon color on hover*/
}
.social-links a {
    display: flex; /*makes icons block-level for better layout control*/
    align-items: center; /*vertically centers icons*/
    margin-right: 10px; /*adds space between icons*/
    color: #00a86b;/*sets icon color to green*/
    text-decoration: none; /*removes underline from icons*/
}
.social-links a i {
    font-size: 20px; /*sets icon size*/
    margin-right: 10px; /*adds space between icons*/
    color: #00a86b; /*sets icon color to green*/
}
.contact-info p {
 color: #00a86b;/*sets text color to green*/
    margin-bottom: 10px; /*adds space between contact info items*/
}

/*dropdown section*/

.working-hours-section{
    border-top: 1px solid #555; /*adds a top border for separation*/
    background-color: black; /*sets background color to dark gray*/
    margin: 0;
    padding: 0;
    color: white; /*sets text color to white*/
}

.hours-content {
  display: flex;
    justify-content: space-between;
  gap: 40px;
  align-items: flex-start;
  overflow: hidden; /*hides overflow when content is hidden*/
   transition: max-height 0.4s ease;
    max-height: 0; /*collapses content when hidden*/
}

.working-hours p {
  margin: 6px 0;
}

.construction-services {
  margin-top: 20px;
  text-align: center;
  width: 100%;
}

.construction-services a {
  display: block;
  text-decoration: none;
  color: #ccc;
  transition: 0.3s ease;
}

.construction-services a:hover {
    color:#4FD1C5; /*sets link color to white*/
  text-decoration: underline;
}
.working-hours,
.construction-services {
  flex: 1;
}
.hours-content h4 {
  margin-bottom: 10px;
}

.construction-services {
  text-align: left;
}

.hours-content.active {
margin-top: 10px; /*adds space above content when active*/
    max-height: 500px; /*adjust as needed for content height*/
}

.dropdown-btn {
    background-color: black; /*sets button background color to black*/
    color: white; /*sets button text color to white*/
    padding: 10px 15px; /*adds padding around button*/
    border: none; /*removes default border*/
    border-radius: 4px; /*adds rounded corners*/
    cursor: pointer; /*changes cursor to pointer on hover*/
}
.dropdown-btn:hover {
    background-color: #00a86b; /*changes button background color on hover*/
}
.dropdown-btn.active i{
    transform: rotate(180deg);
}

.dropdown-btn i{
    margin-left: 8px;
    transition: transform 0.3s ease;
}

.footer-bottom {
    border-top: 1px solid #555;
    font-size: 14px;
    color: white;
    text-align: center;

    background-color: black;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 0;
    padding-top: 0;
}

.footer-bottom-links a{
    color: #4FD1C5; /*sets link color to white*/
    text-decoration: none; /*removes underline*/

}
.footer-bottom-link a:hover{
    color:white
}

.glass-categories ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.glass-categories li {
    margin-bottom: 8px;
}

.glass-categories a {
    text-decoration: none;
    color: #ccc;
    transition: 0.3s;
}

.glass-categories a:hover {
    color:#4FD1C5; /*sets link color to white*/
    }

    .footer h3,
.footer h4 {
    color: #0a7d32;
}

.footer,
.footer p,
.footer a {
    color: #ffffff;
}

.footer a:hover {
    color: #0a7d32;
}

/*MOMBILE*/
/* Hamburger button - hidden on desktop, shown only on mobile via media query above */
.nav-toggle {
  display: none;
  background: black;
  border: none;
  color: rgba(14, 115, 10, 0.458);
  font-size: 1.5rem;
  padding: 10px 15px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

/* ==========================================
   MOBILE FIXES (append to index.css)
========================================== */
@media (max-width: 768px) {

  .header {
    flex-wrap: wrap;
    padding: 10px 15px;
  }

  .welcome-banner {
    flex-wrap: wrap;
    gap: 15px;
    padding: 10px;
  }

  .welcome-banner * {
    flex-shrink: 1; /* allow shrinking on small screens */
  }

  .welcome-text h3 {
    font-size: 1rem;
  }

  .welcome-text p {
    font-size: 0.85rem;
  }

  .top-controls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }

  .search-container {
    width: 100%;
    justify-content: center;
    margin-right: 0;
  }

  .search-container input {
    width: 100%;
    max-width: 280px;
  }

  .auth-buttons {
    justify-content: center;
    width: 100%;
  }

  /* Navigation: collapse into a hamburger menu instead of wrapping */
  .nav-toggle {
    display: block;          /* show the hamburger button */
    margin-left: auto;
    margin-right: auto;
  }

  nav.nav {
    position: relative;
  }

  .nav-links {
    display: none;           /* hidden until toggled open */
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    gap: 0;
  }

  .nav-links.show {
    display: flex;
  }

  .nav-links a {
    padding: 12px 20px;
    font-size: 0.95rem;
    border-top: 1px solid rgb(0, 0, 0);
  }

  /* Dropdowns: tap-to-open instead of hover (hover doesn't work on touch) */
  .dropdown:hover .dropdown-menu {
    display: none;
  }

  .dropdown-menu {
    position: static;        /* sits inline below its parent link, no overflow */
    min-width: 100%;
    display: none;
    background: #090909;
  }

  .dropdown.open .dropdown-menu {
    display: block;
  }

  /* Footer */
  .footer-container {
    flex-direction: column;
    gap: 25px;
    padding: 20px 15px;
    text-align: center;
  }

  .footer-left {
    flex-direction: column;
    text-align: center;
  }

  .contact-info,
  .right,
  .left {
    text-align: center !important;
  }

  .hours-content {
    flex-direction: column;
    gap: 15px;
  }

  .construction-services {
    text-align: center;
  }
}

@media (max-width: 480px) {
  .musa-quote img {
    width: 55px;
    height: 55px;
  }

  .musa-quote span {
    font-size: 11px;
    padding: 6px 10px;
  }
}
#navToggle {
  background-color: black !important;
  color: rgb(1, 77, 4) !important;
  border: none !important;
  -webkit-appearance: none !important;
margin-bottom: 0px;
  appearance: none !important;
}
#cookieBanner button {
  background-color: rgb(0, 72, 0);
  color: white;
  border: none;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
}

#cookieBanner button:hover {
  background-color: rgb(2, 92, 2); /* lighter green on hover */
}
  x

.lang-switcher select {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  font-family: 'Comfortaa', sans-serif;
  font-size: 14px;
  background: #ffffff;
  cursor: pointer;
}

/* Hide Google's default translate bar/banner completely */
.goog-te-banner-frame, .skiptranslate {
  display: none !important;
}
body {
  top: 0px !important;
}