body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #FFF;
}

a {
  color: #000;
}
.container {margin:0px auto;}
/* header */

.header {
  background-color: #fff;
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  position: fixed;
  width: 100%;
  z-index: 9999;
	text-transform: uppercase;
	font-weight:bold;
	
}
.video {position:relative: z-index:0 !important}
.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
box-sizing: border-box;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
	box-sizing: border-box;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
	  margin-top:1em;
  }
  .header .menu-icon {
    display: none;
  }
	.social-icons img a {margin:0px; padding:0px;
	}
  
}



/* Social icons styles */
	.social-icons a {
		margin:-45px -18px;
}
.navigation_bar {
	display:block; 
	margin-top:1.5em;
}

.headline {
    font-size: 3em;
    letter-spacing: 1.25em;
	text-align: center;
	text-transform:uppercase;
	margin: 1.5em auto;
}


/* Style for the logo row */
.logo-row {
    display: flex;
    justify-content: center; /* Center the logos horizontally */
    align-items: center;
    padding: 1em; /* Add 1em spacing around the logos */
	margin-top:1em;
}

/* Style for individual logos */
.logo {
    text-align: center;
    padding: 1em; /* Add 1em spacing around each logo */
}

.logo img {
    max-width: 100%;
    height: auto;
	margin:0px 0pxpx
}
/* Your other CSS styles here */

/* Photo container */
.photo-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center; /* Center vertically */
}

/* Left photo */
.left-photo {
    flex: 1;
    width: calc(50% - 2em); /* 50% width with 1em of spacing on both sides */
    box-sizing: border-box;
    margin: 1em; /* 1em margin for spacing */
}

.left-photo img {
    width: 100%;
    height: auto;
}

/* Right photos container */
.right-photos {
    flex: 1;
    width: calc(50% - 2em); /* 50% width with 1em of spacing on both sides */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    margin:2em; /* 1em margin for spacing */
}

/* Top photo */
.top-photo {
    flex: 1;
    box-sizing: border-box;
}

.top-photo img {
    width: 100%;
    height: auto;
}

/* Bottom photo */
.bottom-photo {
    flex: 1;
    box-sizing: border-box;
	margin-top:45px;
}

.bottom-photo img {
    width: 100%;
    height: auto;
}

.headline_seo {width:90%;  font-weight:bold; margin:0 auto; line-height: 1.5em; text-align:center; margin-bottom:2em; line-height:2em; font-size:1.25em;}
/* Media query for a different photo on mobile */0
@media (max-width: 768px) {
    .left-photo img {
        display: none; /* Hide the left photo on mobile */
    }

    .top-photo img {
        display: none; /* Hide the top photo on mobile */
    }

    .bottom-photo img {
        display: block; /* Show a different photo on mobile */
		width:100%;
    }
}

 /* Styling for the video container */
    .video-container {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; /* 16:9 aspect ratio */
	z-index:5000;
    }
    .video-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
	  z-index:-1;
    }
/* Style for the logo container */
.logo-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%; /* Full width */
  max-width: 1600px; /* Maximum width, adjust as needed */
  margin: 0 auto;
  padding: 0 10px; /* Optional padding to prevent edge distortion */
	box-sizing: border-box;
}

/* Style for each logo box */
.logo-box {
  width: calc(20% - 16px); /* 20% width for five boxes, minus margin */
  margin-bottom: 20px; /* Adjust margin between rows */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Style for images within the logo box */
.logo-box img {
  width: 100%; /* Image width set to 100% of its container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove default inline behavior */
}

/* Media query for responsiveness */
@media screen and (max-width: 768px) {
  .logo-box {
    width: calc(25% - 16px); /* 25% width for four boxes in a row on smaller screens */
  }
}

.twocolumncontainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  margin: 20px;
}
.twocolumncontainer h2 {padding-top:1em !important;}
/* Style for the photo column */
.photo {
  flex: 1;
  margin-right: 20px; /* Spacing between columns */
  max-width: 40%; /* Adjust as needed */
}

.photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Style for the content column */
.content {
  flex: 1;
  max-width: 52%; /* Adjust as needed */
  text-align: left;
}
.content2 {
  flex: 1;
width: 100%;
    text-align: center;
    padding-top: 8em;
}
.content2 img {  flex: 1;
  width: 100%; /* Adjust as needed */
  text-align: center;}
/* Example content styles (feel free to modify) */
.content h2 {
  font-size: 24px;
  margin-top: 0;
}

.content p {
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  font-weight:bold; margin:0 auto; line-height: 1.5em; 
	font-size:1.25em
}

.historycontainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  margin: 20px;
	box-sizing:border-box;
}

/* Style for each photo column */
.photo {
  flex: 0 0 30%; /* Each column occupies 30% width */
  margin-bottom: 20px; /* Spacing between rows */
}

.photo img {
  width: 100%;
  height: auto;
  display: block;
}
.storycontainer {background:#dcdcdc; padding:1em 0px; margin-bottom:3em;}

.culture_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
	background:#000; padding:2em 0px; margin:-1em 0px;
	font-color:#FFF !important;
}
.culture_container .headline {color:#FFF; margin-bottom:1em}
/* Style for each column */
.culture_containercolumn {
  flex: 0 0 calc(20% - 20px); /* Each column occupies 25% width with spacing */
  margin-bottom: 20px; /* Spacing between rows */
  box-sizing: border-box;
}

/* Style for the photo within each column */
.culture_containerphoto {
  width: 90%;
  margin: 0 auto;
}
.culture_containerphoto img {
  width: 100%;
  height: auto;
  display: block;
}

/* Style for the content within each column */
.culture_containercontent {
  padding: 0 20px; /* Padding for content */
  text-align: center;
	width:100%
}

.culture_containercontent h2 {
  font-size: 24px;
  margin-top: 10px;
	padding-top:20px;
	text-transform: uppercase;
	color:#FFF
	
}

.culture_containercontent p {
  font-size: 16px;
  line-height: 1.6;color:#FFF
}


/* Style for the container */
.contactus .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Style for the background div with an image */
.contactus .background {
    background-image: url(../images/lexus_background.png); /* Replace 'background.jpg' with your image */
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
}


.full-width-bg {
    width: 100%;
    height: 100vh;
    background-image: url(../images/lexus_background.png); /* Replace 'background.jpg' with your image */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-top:4em;
}

/* Style for the centered content */
.centered-content {
  background-color: rgba(255, 255, 255, 0.9); /* Adjust the opacity and color as needed */
  padding: 40px;
  text-align: center;
  max-width: 80%;
}

.centered-content h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.centered-content p {
  font-size: 18px;
  line-height: 1.6;
}

/* Styling for the button */
    .animated-button {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      background-color: #000;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;
	  margin:3em 0px;
    }

    /* Styling for the animation on hover */
    .animated-button::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 300%;
      background-color: rgba(255, 255, 255, 0.3);
      transition: all 0.4s ease;
      border-radius: 50%;
      z-index: 0;
      transform: translate(-50%, -50%) scale(0);
		text-decoration: none;
    }

    /* Hover effect */
    .animated-button:hover::before {
      transform: translate(-50%, -50%) scale(1);
		color:#FFF;3
		text-decoration: none;
    }

    /* Text inside the button */
    .animated-button span {
      position: relative;
      z-index: 1;
		color:#FFF;
		text-decoration: none;
    }

.careerslogo img {witdh: 35%;}

.bg-image {
  background-image: url('your-background-image.jpg');
  background-size: cover;
  background-position: center;
}

/* Adjust column heights and add padding or styles as needed */
.col-md-2,
.col-md-6,
.col-md-4 {
  padding: 20px;
  min-height: 200px; /* Example height, adjust as needed */
}

/* Example styles for navigation */
nav ul {
  list-style: none;
  padding: 0;
}

nav ul li {
  display: inline-block;
  margin-right: 20px;
}

nav ul li:last-child {
  margin-right: 0;
}

nav ul li a {
  text-decoration: none;
  color: #000;
}
.footer_parent {
	background:#000;
}
.footer_container {
  display: flex;
  width: 60%;
  margin: 0 auto;
  

}
.logo-address { color:#FFF;}
.column {
  flex: 1;
  padding: 20px;
	box-sizing: border-box;
}

.logo-address img {
  max-width: 100%;
  height: auto;
}

.quick-links h3 {color:#FFF;}
.quick-links ul {
  list-style: none;
  padding: 0;
}

.quick-links ul li {
  margin-bottom: 10px;
}

.quick-links a {
  color: white;
  text-decoration: none;
}

.contact-form form {
  display: flex;
  flex-direction: column;
}

.contact-form label {
  color: white;
  margin: 4px 5px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  background-color: transparent;
  border: 1px solid white;
  color: white;
  padding: 8px;
  margin-bottom: 10px;
}

.contact-form input[type="submit"] {
  background-color: white;
  color: black;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.contact-form input[type="submit"]:hover {
  background-color: lightgray;
}
/* Initial style for the navigation bar */
.floating-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: background-color 0.3s ease; /* Adding a smooth transition */
  /* Other styles like padding, text color, etc., can be added here */
}

/* Style for the navigation bar when scrolled */
.floating-nav.scrolled {
  background-color: #000; /* Change to your desired color when scrolled */
  /* Other styles when scrolled can be added here */
}

/* Styling for the input field */
.rounded-input {
  border: 1px solid #000; /* Black border */
  border-radius: 8px; /* Adjust border-radius to change corner roundness */
  padding: 8px 12px; /* Adjust padding as needed */
  background-color: #fff; /* White background */
  color: #000; /* Black text color */
  font-size: 14px; /* Adjust font size as needed */
  transition: all 0.3s ease; /* Smooth transition for all properties */
  /* Additional styles like box-shadow, width, etc., can be added here */
}

/* Hover effect */
.rounded-input:hover {
  border-color: #333; /* Darker border color on hover */
  /* Additional styles for hover can be added here */
}

/* Focus effect */
.rounded-input:focus {
  outline: none; /* Remove default focus outline */
  border-color: #666; /* Change border color on focus */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Add a shadow on focus */
  /* Additional styles for focus can be added here */
}
   /* Styling for the animation on hover */

/* Styling for the button */
    .animated-button2 {
      display: inline-block;
      padding: 10px 20px;
      font-size: 16px;
      background-color: #000;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.4s ease;
	  margin:1em 0px;
    }
    .animated-button2::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 300%;
      height: 300%;
      background-color: rgba(255, 255, 255, 0.3);
      transition: all 0.4s ease;
      border-radius: 50%;
      z-index: 0;
      transform: translate(-50%, -50%) scale(0);
    }

    /* Hover effect */
    .animated-button2:hover::before {
      transform: translate(-50%, -50%) scale(1);
    }

    /* Text inside the button */
    .animated-button2 span {
      position: relative;
      z-index: 1;
    }
.culture_icon {width:100%; text-align:center; margin:0 auto 1em;     padding: 0p 2em 0px 0px;}
.culture_icon img {width:25%; text-align:center; margin: 0px auto; padding: 0px 0px  0px 50px;}

#menu ul.menus{height:auto;overflow:hidden;width:250px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333; top:80px; text-transform: uppercase;
	font-weight:bold;}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font-size:10px; text-transform: uppercase;}
#menu ul.menus li a{ padding:10px;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:21px 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333; height:20px}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:10px;right:5px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:10px;right:5px}

@media screen and (max-width: 600px){
#menu ul.menus{width:100%;position:static;border:none}
}
.nav_logo {padding:10px 15px 0px 0px }