.header {
  overflow: hidden;
  background-color: #3a3a37;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a.logo:hover {
    background-color: #ada6f1;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ada6f1;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: #ada6f1;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

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

.buyesim {
  display: flex;
  justify-content: center; /* Horizontal */
  align-items: center;  
  /*height: 20vh;*/
  width: 100%;
}

.buyesim button {
    font-size: 25px;
    background-color: #000000;
    color:#ffffff;
    padding: 10px;
}

.tagline {
  display: flex;
  justify-content: center; /* Horizontal */
  align-items: center;     /* Vertical */
  padding-top: 10px;
  color: #ada6f1;
  font-size:xx-large;
  height:fit-content;
}

.tagline img {
    width: 95%;
    height: auto;
}

.button-link {
  /* Remove default link styles */
  text-decoration: none; /* Removes the default underline */
  color: #000000; /* Sets the text color */
  
  /* Add button-like appearance */
  display: inline-block; /* Allows padding and margins to be applied correctly */
  padding: 10px 20px; /* Adds space around the text */
  background-color: #ada6f1; /* Sets a background color */
  /*border: 1px solid #0056b3;*/ /* Adds a border */
  border-radius: 5px; /* Rounds the corners */
  cursor: pointer; /* Ensures the cursor changes to a hand icon on hover */
  font-family: sans-serif; /* Sets a clean font */
  text-align: center; /* Centers the text */
}

/* Add interactive states for better user experience */
.button-link:hover {
  background-color: #000000; /* Darker background on hover */
  color: #ada6f1;
}

.button-link:active {
  background-color: #004494; /* Even darker background when clicked */
}

.button-link:focus {
  outline: 2px solid #007bff; /* Adds an accessible focus indicator */
  outline-offset: 2px;
}

.terms {
  color:#FFFFFF;
  margin-top: 5%;

}

.footer {
  color: #3a3a37;
  background-color: #ada6f1;
  display: flex; /* Makes the children flex items arranged in a row by default */
  gap: 20px; /* Adds space between columns */
  justify-content: space-between; /* Distributes space evenly */
  padding-bottom: 15px;
}

.footer div {
  flex: 1; /* Allows columns to grow and shrink equally to fill the space */
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 3px;
  /*float: center;*/
  /*background-color: #f1f1f1;*/
  /*border: 1px solid #ccc;*/
  /*align-content: center;*/
}

.footer-terms {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 3px;
}

.footer-items {
  padding: 0;
  margin: 0; 
}

.footer-container {
  font-weight: bold;
}

.footer-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.footer a {
  color: #000000;
  text-decoration: none;
  }

.footer a:hover {
  color: #3a3a37;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}

.product-container {
  display: flex; /* Makes the children flex items arranged in a row by default */
  gap: 20px; /* Adds space between columns */
  justify-content: space-between; /* Distributes space evenly */
  padding-bottom: 15px;
}

.product-container div {
   flex: 1; /* Allows columns to grow and shrink equally to fill the space */
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  padding-bottom: 3px;
}

.product-image {
  margin-left: 250px;
}

.plan-row {
  display: block;
  justify-content: left;
  padding: 10px;
}