/* *********************** HEADER SECTION STYLING *********************** */
/*  HeaderT is top header(main with the nav links etc) */
/* headerB is the one below headerT with the important info contact etc */

:root{
  --light-bg-color: rgb(250, 250, 250);
  --dark-bg-color: rgb(245, 245, 245);
  --company-gold: rgb(186, 161, 35);
  --isuzu-red: rgb(230, 0, 0);
  --company-blue: rgb(0, 94, 171);
  /* color: rgb(188, 0, 0); */
}


.headerT,.headerTB, .headerB, .line {
  will-change: opacity, transform;
}


.headerT, .headerTB {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: none;
  height: 4em;
  z-index: 1000;
  transition: transform 0.8s ease, opacity 0.8s ease;
  background: rgba(230, 230, 230, 0.4);   
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);     /* Safari support */
  box-shadow: 10px 0px 10px rgba(0,0,0,0.1);
}
.headerTB{
  z-index: 10005;
  display: none;
}

/* .headerT.hidden, .line.hidden, .headerTB.hidden{
  transform: translateY(-180%);
  opacity: 0;
} */

.Nav-links{
  text-decoration: none;
  color: #191919;
  transition: color 0.3s ease;
  font-size: 1em;
}

.Nav-links:hover{
  color: rgb(120, 95, 0);
}

.Nav-links.active {
  color: rgb(120, 95, 0);
}

.headerB{  
  width: 100%;
  height: 3em; 
  z-index: 1000;
  transition: opacity 0.8s ease, transform 0.8s ease;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 0;
  padding: 0.3em 0.3em;
  background-color: var(--dark-bg-color);
}

.line{
  width: 100%;
  height: 1.5px;
  background-color: var(--company-gold);
  margin-top: 4em;
  display: flex;
  padding: 0;
}

/* .headerB.hidden {
  transform: none;
  opacity: 1;
} */

/* .headerB.fade-in {
  opacity: 1;
  transform: translateY(0);
} */

.info-container{
  height: 100%;
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  color: #333;
}

.email{
    color: #333;
}

.info-icon{
  width: 1.5em;
  height: 1.5em;
  align-content: center;
  text-align: center;
  margin-right: 0.3em;
  margin-top: 0.3em;
}

.info--icon{
  width: 1.5em;
  
}

.paragraph{text-align: center;}

.info-container-socials{
  height: 100%;
  width: 100%;
  background-color: var(--dark-bg-color);
  color: #333;
  align-content: center;
  /* margin: -1px; */
}

.sc-container{
 flex: 1;
 height: 100%;
 text-align: center;
 align-items: center;
}

.socials{
  padding: 0 3em; 
  display: flex;
  flex-direction: row;
  align-items: center;
}

.social-logof{
  width: 1.4em;
}

.social-logoi{
  width: 1.4em;
}

.social-logox{
  width: 1.4em;  
}
/* header sections, left-header(the logos)...right-header(the nav-links) */

.left-header{
 flex: 1;
 display: flex;
 align-items: center;
 height: 100%;
}

/* isusu logo styling */
.isuzu {
  width: 100px;
}

.isuzu-migori{
  width: 120px;
  text-align: right;
  color: var(--isuzu-red);
  font-weight: 600;
}

/* Smartlake logo styling */
.Smartlake{
  width: 90px;
  margin-left: -0.6em;
}

/* the line seperating the two logos */
.seperator{
  width: 1.5px;
  height: 80%;
  background-color: var(--company-gold);
  margin: 0 1em;
}


.right-header{
  display: flex;
  flex: 1.5;
  justify-content: space-between;
  margin-right: 3em;
}

/* this is the background behind headerT */
.header-back{
  width: 100%;
  height: 4em;
  background: rgb(228, 228, 228); 
  display: block;
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  /* min-width: 360px; */
}

/* @media(max-width:2650px){
    h1 { font-size: 2.2em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.2em; }
  p  { font-size: 0.95em; }
  button, a { font-size: 0.95em; }
} */





@media (max-width:1025px) {

  h1 { font-size: 2.2em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.2em; }
  p  { font-size: 0.95em; }
  button, a { font-size: 0.95em; }

  .headerT{
    height: 4em;
  }

  .left-header{
    flex: 1;
  }

  .right-header{
    flex: 2;
  }

  .isuzu{
    width: 100px;
  }

  .Smartlake{
    width: 90px;
  }

  .info--icon{
    width: 1.3em;
  }

  
}

@media (max-width:950px){


}



/* ========== Base Styles ========== */
.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 28px;
  height: 21px;
  cursor: pointer;
  z-index: 2000;
  margin-right: 1.2em;
  position: relative;
}

.menu-btn span {
  width: 100%;
  height: 1px;
  background: black;
  border-radius: 1px;
  transition: all 0.3s ease;
  display: block;
  transform-origin: center;
  transform: translateZ(0);
  
}

/* Burger to X animation */
.menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(0px, 14px);
}

.menu-btn.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(0px, -14px);
}

/* ========== Mobile Menu ========== */
.mobile-menu {
  position: fixed;
  top: 4em; /* just below headerT */
  left: 0;
  width: 100%;
  background: rgba(230, 230, 230, 0.95);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  z-index: 999;
}

.mobile-menu.open {
  max-height: 400px; /* enough space for all links */
}

.mobile-menu a {
  padding: 1em 0;
  width: 100%;
  text-align: center;
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  transition: background 0.3s ease;
}

.mobile-menu a:hover {
  background: rgba(186, 161, 35, 0.2);
}

/* ========== Responsive Behavior ========== */
@media (max-width: 860px) {

  h1 { font-size: 2em; }
  h2 { font-size: 1.8em; }
  h3 { font-size: 1.2em; }
  p  { font-size: 0.9em; }
  button, a { font-size: 0.9em; }

  .right-header {
    display: none;
  }

  .menu-btn {
    display: flex;
  }


  .info-container-socials{
    display: none;
    width: 0px;
    
  }

  .headerB,.paragraph{
    grid-template-columns: repeat(3, 1fr);
  }

  .menu-btn {
    display: flex;
  }

  .right-header {
    display: none;
  }

  .headerTB {
    justify-content: space-between;
    display: flex;
    /* min-width: ; */
  }

  .headerT{
    display: none;
    /* opacity: 0; */
  }
}







@media (max-width: 631px){
  .headerB,.paragraph{
    font-size: 0.95em;
  }

  .isuzu{
    width: 90px;
  }

  .isuzu-migori{width: 100px;}

  .Smartlake{
    width: 80px;
  }
} 


  @media (max-width:550px){
  .headerB, .paragraph{
    font-size: 0.9em;
  }  
  
  }  


@media (max-width: 471px){


.headerB,.paragraph{
    font-size: .87em;
    grid-template-columns: repeat(1, 1fr);
    height: auto;
  }

    .info-icon{
    margin-right: 0.3em;
  }

}

@media (max-width:425px){


  p  { font-size: 0.85em; }
  a {font-size: 0.9em;}
  h1{font-size: 1.9em;}
  h2 { font-size: 1.6em; }
  h3 { font-size: 1.15em; }

  
}

@media (max-width:365px){

  
  /* .header-back{
    width: 100vw;
    overflow: hidden;
  } */


  
}