@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-VariableFont_wght.tttf') format('tttf'),
         url('fonts/Montserrat-Italic-VariableFont_wght.tttf') format('tttf');
}

body {
  font-family: Montserrat;
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  display: flex; 
  justify-content: space-between;
  padding: 20px;
}

nav {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

nav a {
  text-decoration: none;
  color: black;
}

/* CSS for the logo */
.logo {
  width: 100px;
  margin-right: 20px; /* Add margin-right for spacing between logo and nav elements */
}

.logoimage{
  height:40px;
}

.container {
  width: 70%;
  margin: 50px auto;
  text-align: center;
}

h1,
h2 {
  margin: 10px 0;
}

p {
  margin: 5px 0;
}

.input-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.Info-text{
  width:70%;
  line-height: 1.5;
}

.format{
  font-size: 12px;
  color: gray;
  margin-top: -18px;
}

.example {
  font-size: 12px;
  color: gray;
}

.Info-text2{
  align-items: center;
  display: flex;
  margin-top: 20px;
  width: 70%;
}

.exclaimImage{
 align-items: center;
 display: flex;
 flex-basis: 480px;
 flex-grow: 1;
 height:50px;
}

.hero {
  display: flex;
  min-height: 50vh;
  padding: 64px 0;
}

.hero-content {
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 20px;
  width: 100%;
}

.hero-text{
  flex-basis: 300px;
  flex-grow: 1;
  text-align: left;
}

.popup-warning{
  font-size:13px;
}
  
.airwaybill {
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 448px;
  padding: 10px;
  font-size: 16px;
  text-align: center; /* Center-align placeholder */
}

.airwaybill:focus {
  outline: none; /* Remove default focus outline */
  border-color: #4a90e2; /* Blue border color */
  caret-color: #4a90e2;
}

.submitButton {
  padding: 11px 20px;
  border: none;
  border-radius: 5px;
  background-color: #F2C900;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition */
  margin-left: -30px;
}

.showAllButton {
  margin:10px 0;
  padding: 11px 20px;
  border: none;
  border-radius: 5px;
  background-color: #F2C900;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* Smooth transition */
  margin-left: -30px;
}

.submitButton:hover {
  background-color: #F2C900;
}

.hero-image{
  align-items: center;
  display: flex;
  flex-basis: 480px;
  flex-grow: 1;
  height: 100%;
  margin-left: 32px;
}

.mainImage{
  width:100%;
  max-width: 800px;
  max-height: 634px;
}

.benefits-container{
  background-color: #0097B2;
  padding: 10px;
  display:none; /* remove this when email feature is implemented */
}

.benefits {
  width: 42%;
  margin: 50px auto;
  text-align: center;
}

.benefits-text2{
  padding: 0 150px;
}

.valueprop-container{
  text-align: center;
  padding: 10px;
  margin: 30px 0;
}

.valueprop{
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 1240px;
  padding: 0 20px;
  width: 50%;
  line-height: 1.5;
}

.valueprop-text1{
  flex-basis: 410px;
  flex-grow: 1;
  text-align: left;
}

.valueprop-text2{
  text-align: left;
  display: flex;
  flex-basis: 410px;
  flex-grow: 1;
  margin-left: 35px;
  font-weight: 700;
}

.carriers-container{
  text-align: center;
  padding: 10px;
  margin: 30px 0;
}

.all-carriers{
  display:none;
}

.all-carriers a{
  display:flex;
  color:black;
}

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

.logo-wrapper {
  flex-wrap: wrap;
  justify-content: center;
  max-width: 60%;
}

.logo-wrapper img {
  width: 100px;
  height: auto;
  margin: 20px;
}

.news-container{
  text-align: center;
  padding: 10px;
  margin: 30px 0;
}

.news {
  display: inline-block;
  padding: 20px;
}

.card {
  text-align: left;
  display: flex;
  width: 700px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card img {
  width: -webkit-fill-available;
  height: auto;
  margin-right: 10px;
  border-radius: 5px;
}

.card a {
	 width:36%;
}

.card .card-content {
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  line-height: 1.5;
}

.card-content a {
  width:auto;
}

.card .title {
  font-weight: bold;
  margin-bottom: 5px;
  margin-top:20px;
}

.card .description {
  margin-top: 5px;
  margin-bottom: 10px;
}

.error{
  display:none;
}

.carerror{
  display:none;
}

.awberrortext{
  display:block;
  width: fit-content;
  display: block;
  color: red;
  margin-top: 15px;
  font-size: large;
  background-color: #ffffffdb;
  border-radius: 10px;
  padding: 5px;
}

 .show {
  display:inline-block;
}

.trackingForm{
  display:contents;
}

.footer{
  font-size:large;
  background-color:#e3dede05;
  color: #fff;
  padding: 20px;  
  position: fixed;
  bottom: 0;
  width: 100%;
}

/* Extra small devices (phones, less than 480px) */
@media only screen and (max-width: 480px) {
  header{
    display:block;
  }
  
  .container {
    display:block;
    width:100%;  
    margin-bottom:0px;
  }
  
  .Info-text {
    width:100%;
  }
  
  .hero{
    display:block;
  }
  
  .hero-content{
    display:block;
  }
  
  .hero-image{
    margin-left:0px;
  }
  
  .benefits-container {
    margin-left:20px;
    display:none; /* remove this when email feature is implemented */
  }

  .benefits {
    width: 100%;
    margin: 0 auto;
  }

  .benefits-text2 {
    padding: 0 10px;
  }
  
  .valueprop {
    display:contents;
  }
  
  .card {
    align-items:center;
    width:-webkit-fill-available;
  }
  .card img {
    width:-webkit-fill-available;
    height:fit-content;
    margin-left:10px;
  }
  .card a {
    width:40%;
  }
  .card-content a {
    width:auto;
  }
  .news {
    width:-webkit-fill-available;
  }
}

/* Small devices (tablets, less than 768px) */
@media only screen and (max-width: 768px) {
  .benefits-text1 h2 {
    font-size: 1.2rem;
  }

  .benefits-text2 p {
    font-size: 0.8rem;
  }
}