@font-face {
  font-family: efco;
  src: url(efcofont.ttf);
} 

/* Styles for the modal overlay background */
#code-selection-modal {
  /* The inline style sets the background color with opacity */
  /* background-color: rgba(0,0,0,0.4); */
  /* You can override or keep this */
}

/* Styles for the modal content box */
#code-selection-modal > div {
  background-color: #82d8ce; /* Change background color (e.g., white) */
  color: #060b2b; /* Change text color inside the modal box */
  border: 1px solid #388279; /* Change border color */
  /* The inline styles for margin, padding, width will still apply unless you override them here */
}

/* Styles for the modal title */
#code-selection-modal h2 {
  color: #060b2b; /* Change title color */
  font-family:'Courier New', Courier, monospace;
  border-bottom: 2px solid #eee; /* Add or change a bottom border */
  padding-bottom: 10px;
  margin-top: 0;
}
.codes-list-container {
  width: 80%; /* Example: Set a width (adjust as needed) */
  margin: 0 auto; /* Centers the div horizontally */
  /* Your existing styles for .cath or codes-list-container can go here */
  /* For example, if .cath sets display: flex or other properties */
}
/* Styles for the close button (X) */
#code-selection-modal .close-modal {
  color: #aaa; /* Default color */
  /* float: right; font-size: 28px; font-weight: bold; cursor: pointer; are already inline */
}

#code-selection-modal .close-modal:hover,
#code-selection-modal .close-modal:focus {
  color: #777; /* Color on hover/focus */
  text-decoration: none;
  cursor: pointer;
}
/* REVISED STYLES FOR PROFILE PAGE LAYOUT */

/* Main container for all profile sections */
.profile-content-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line on smaller screens */
    gap: 25px; /* Increased space between items (e.g., 25px) */
    justify-content: center; /* Centers the items horizontally */
    padding: 20px; /* Padding around the entire container */
    max-width: 1200px; /* Max width to keep content readable */
    margin: 30px auto; /* Centers the container on the page with more vertical space */
}

/* Styling for each individual profile section (User Info, Active Codes, Boost Wallet, Purchase Boosts) */
.profile-item {
    display: flex;
    flex-direction: column; /* Stacks content vertically within each item */
    flex-basis: 350px; /* Default width, allowing flexibility */
    flex-grow: 1; /* Allows items to grow to fill available space */
    flex-shrink: 1; /* Allows items to shrink if space is limited */
    
    background-color: #0d1a42; /* A slightly darker, more opaque background for better contrast */
    border: 2px solid #388279; /* Consistent border from your existing theme */
    border-radius: 12px; /* Slightly more rounded corners for a softer look */
    padding: 30px 25px; /* Generous internal padding */
    text-align: center; /* Centers text within the item */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
    color: white; /* Ensures text is readable */
    font-family: 'Courier New', Courier, monospace; /* Applied secondary font for readability */
}

/* Media query for smaller screens to adjust item width */
@media (max-width: 900px) {
    .profile-item {
        flex-basis: calc(50% - 25px); /* Two items per row on medium screens */
    }
}
.site-footer {
  background-color: #060b2b;
  padding: 2rem 1rem;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  color: #eee;
  text-align: center;
  border-top: 1px solid #388279;
}

.footer-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column {
  flex: 1 1 200px;
  min-width: 200px;
}

.footer-column h2,
.footer-column h3 {
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #eee;
}

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

.footer-column ul li {
  margin-bottom: 0.5rem;
}

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

.footer-column a:hover {
  text-decoration: underline;
}

.footer-bottom {
  margin-top: 2rem;
  border-top: 1px solid #388279;
  padding-top: 1rem;
  font-size: 0.9rem;
  color: #eee;
}

@media (max-width: 600px) {
    .profile-item {
        flex-basis: 95%; /* One item per row on small screens */
        margin: 10px auto; /* Center individual items with vertical space */
    }
}

/* Titles within each profile section - keeping efco font for these */
.profile-item .section-title {
    font-family: 'efco'; /* Your custom font for titles */
    font-size: 2.2rem; /* Slightly larger, more impactful titles */
    color: #82d8ce; /* Your accent color */
    margin-bottom: 20px; /* More space below the title */
    word-break: break-word; /* Ensures long titles break gracefully */
}

/* Paragraph text within profile items - using secondary font */
.profile-item p {
    margin-bottom: 10px; /* Space between paragraphs */
    line-height: 1.6; /* Improved line spacing for readability */
    font-size: 1.1rem; /* Slightly larger base font size */
    word-break: break-word; /* Ensures long words wrap */
    font-family: 'Courier New', Courier, monospace; /* Ensure this font for all paragraph text */
}

/* Specific styling for the codes list to ensure it looks clean */
.profile-item .codes-list {
    width: 100%; /* Take full width of its parent */
    text-align: left; /* Align code text to the left for better readability */
    margin-top: 15px;
    padding-left: 0; /* Remove default list padding */
    list-style: none; /* Ensure no default list bullets if it becomes a UL/OL */
}

.profile-item .codes-list p {
    background-color: #1a2963; /* Slightly different background for each code item */
    padding: 12px 15px; /* Padding inside each code item */
    border-radius: 8px; /* Rounded corners for code items */
    margin-bottom: 8px; /* Space between individual code entries */
    border: 1px solid #388279; /* Subtle border for definition */
    font-family: 'Courier New', Courier, monospace; /* Ensure this font for code text */
}

/* Styling for the boost wallet list items */
.profile-item .available-boost-list {
    list-style-type: none; /* Remove bullet points */
    padding: 0;
    margin: 15px 0 0 0; /* Adjust top margin for spacing */
    width: 100%;
}

.profile-item .available-boost-list li {
    background-color: #1a2963; /* Consistent background for list items */
    border: 1px solid #388279;
    border-radius: 8px; /* Match code item border-radius */
    padding: 12px 15px;
    margin-bottom: 10px; /* Space between boost items */
    display: flex;
    flex-direction: column; /* Stack boost name and button */
    align-items: center; /* Center content within boost item */
    gap: 10px; /* Space between text and button */
    text-align: center;
    font-size: 1.05rem; /* Slightly adjust font size */
    font-family: 'Courier New', Courier, monospace; /* Ensure this font for boost list items */
}

/* For buttons *within* the boost list items, keep original button styling */
.profile-item .available-boost-list button.button {
    margin-top: 5px; /* Minimal space above the button */
    /* NO WIDTH, MIN-WIDTH, FONT-SIZE CHANGES HERE - RELY ON GLOBAL .BUTTON */
}

/* New: Styles for the Purchase Boost Products section content */
.boost-products-list {
    width: 100%;
    margin-top: 15px;
    padding: 0 10px; /* Add some horizontal padding */
}

.boost-products-list p {
    margin-bottom: 15px; /* Space between paragraphs in this section */
    font-size: 1.1rem;
    font-family: 'Courier New', Courier, monospace; /* Ensure this font for purchase section text */
}


/* Container for action buttons within profile items (e.g., LOG OUT, POST A CODE, Shop Boosts) */
.profile-buttons-container {
    margin-top: auto; /* Pushes buttons to the bottom of the flex item */
    padding-top: 20px; /* Space above the buttons */
    width: 100%; /* Ensure container takes full width */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center buttons */
    gap: 15px; /* Space between buttons */
}

/* IMPORTANT: GLOBAL BUTTON STYLES - REVERTED TO ORIGINAL TO AVOID CHANGES */
/* Ensure these match your original mystyle.css for .button */


/* Footer SMS container adjustments for better centering and appearance */
.footer-sms-container {
    width: 100%; /* Use full width for the container */
    max-width: 600px; /* Keep it centered and readable */
    margin: 40px auto; /* More vertical space */
}

.footer-sms {
    padding: 35px 25px; /* Increased padding */
    border-radius: 12px; /* Consistent rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Add shadow */
}

/* IMPORTANT: wrapper-main - NO CHANGES TO THIS CLASS */
/* Any styles for .wrapper-main will use your original mystyle.css or inline styles */
/* The previous CSS for wrapper-main was removed here. */



/* Mobile adjustments (fine-tuning existing rules) */
@media only screen and (max-width: 600px){
    .referralheader {
        font-size: 4rem; /* Further adjustment for smaller screens */
    }
    .profile-item {
        padding: 20px; /* Reduce padding on small screens */
    }
    .profile-item .section-title {
        font-size: 1.8rem; /* Smaller titles on mobile */
    }
    .profile-item p {
        font-size: 1rem; /* Smaller text on mobile */
    }
    /* Removed .button specific mobile adjustments as per request */
}
/* Styles for the container of code items */
#available-codes-list {
  /* You might want to add max-height and overflow-y if the list can get long */
  /* max-height: 200px; */
  /* overflow-y: auto; */
}
.available-boost-list {
  list-style-type: none; /* This removes the bullet points */
  padding: 0; /* Removes the default left padding that makes space for bullets */
  margin: 0; /* Removes default top/bottom margin on the ul */
  /* Add other styles here if you want to control the layout of the list items */
  /* display: flex; */ /* Example: make list items side-by-side */
  /* flex-wrap: wrap; */ /* Allow wrapping */
  /* gap: 10px; */ /* Add space between items */
}
/* Styles for individual code items */
.code-item {
  cursor: pointer;
  font-family: 'Courier New', Courier, monospace;
  padding: 10px;
  border-bottom: 1px solid #388279;
  background-color: #82d8ce; /* Default background color */
  color:#060b2b; /* Default text color */
  margin-bottom: 5px; /* Space between items */
}

.code-item:hover {
  background-color: #eee; /* Background color on hover */
}
.profile-buttons-container {
  text-align: center; /* Centers inline or inline-block content */
  margin-top: 20px; /* Adds space above the buttons */
}
/* Styles for the Cancel button */
#cancel-boost-application {
  background-color: #f4f4f4; /* Default background color */
  color: #333; /* Default text color */
  border: 1px solid #ccc;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px; /* Space above the button */
}

#cancel-boost-application:hover {
  background-color: #e0e0e0; /* Background color on hover */
}

.tooltip {
  position: relative;
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
}

.imgstyle{
  width: 30vw;
  height: auto;
}
.likebutton.filled svg path {
  fill: #388279; /* Change this to your desired color */
}
.dislikelikebutton.filled svg path {
  fill: #388279; /* Change this to your desired color */
}
.icon-button.filled svg path {
  fill: #388279; /* Change this to your desired color */
}

.icon-button {
  background: none;
  color:#388279;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.icon-button img {
  width: 24px;
  height: 24px;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 8.75rem;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -4.7rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.footer-sms {
  background-color: #060b2b;
  color: white;
  padding: 30px 20px;
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  border-top: 2px solid #388279;
}

.footer-sms-container {
  max-width: 500px;
  margin: 0 auto;
}

.footer-sms-text {
  margin-bottom: 12px;
}

.footer-sms-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-sms-form input[type="text"] {
  padding: 10px;
  width: 100%;
  max-width: 300px;
  border: 2px solid #1a2963;
  background-color: #1a2963;
  color: white;
  border-radius: 10px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  text-align: center;
}

.footer-sms-form input::placeholder {
  color: #ccc;
}

.footer-sms-form button {
  background-color: #1a2963;
  color: white;
  padding: 10px 28px;
  border: 2px solid #388279;
  border-radius: 1000px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.footer-sms-form button:hover {
  background-color: #388279;
}

/* Style all font awesome icons */
.fa {
  font-size: 100px;
  width: 100px;
  margin-left: 0;
  text-decoration: none;
}



/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Instagam */
.fa-instagram {
  background: #111;
  color: #388279;
}
div{
font-family: efco;
}

*{
margin:0;
padding: 0;
}

html {
scroll-behavior: smooth; /* Enables smooth scrolling */
}

body{
min-height: 100vh;

}

.giveaway-container {
  background: #060b2b;
  border: 2px solid #388279;
  border-radius: 20px;
  padding: 24px;
  margin: 40px auto;
  max-width: 600px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-align: center;
  color: white;
}

.giveaway-title {
  font-family: 'Courier New', Courier, monospace;
  font-size: 2rem;
  margin-bottom: 12px;
  color: #82d8ce;
}

.giveaway-description {
  font-size: 1.1rem;
  color: white;
  margin-bottom: 20px;
}

.giveaway-timer {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  color: #82d8ce;
  margin-bottom: 16px;
}

.giveaway-button {
  background-color: #1a2963;
  color: white;
  padding: 10px 28px;
  border: 2px solid #388279;
  border-radius: 1000px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.giveaway-button:hover {
  background-color: #388279;
  color: white;
}

.giveaway-requirements {
  margin-top: 18px;
  font-size: 0.85rem;
  color: #ccc;
  font-family: 'Courier New', Courier, monospace;
}

.giveaway-section {
  background: #060b2b;
  border: 2px solid #388279;
  border-radius: 20px;
  padding: 16px; /* Decrease padding */
  margin: 20px auto; /* Decrease margin */
  max-width: 400px; /* Decrease max-width */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-align: center;
  color: white;
}

.giveaway-title {
  font-family: 'Courier New', Courier, monospace;
  font-size: 2rem;
  margin-bottom: 12px;
  color: #82d8ce;
}

.giveaway-description {
  font-size: 1.1rem;
  color: white;
  margin-bottom: 20px;
}

.giveaway-timer {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  color: #82d8ce;
  margin-bottom: 16px;
}

.giveaway-button {
  background-color: #1a2963;
  color: white;
  padding: 10px 28px;
  border: 2px solid #388279;
  border-radius: 1000px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.giveaway-button:hover {
  background-color: #388279;
  color: white;
}

.giveaway-requirements {
  margin-top: 18px;
  font-size: 0.85rem;
  color: #ccc;
  font-family: 'Courier New', Courier, monospace;
}
.indexph{
font-family: 'Courier New', Courier, monospace; 
font-weight: bold; 
font-size: 1.75rem; 
color: white; 
width: 650 px;
}
.codes-list-container {
  width: 80%; /* Example: Set a width less than 100% */
  margin: 0 auto; /* Centers the container div horizontally */

  /* --- Styles to center content INSIDE this div --- */
  display: flex; /* Make it a flex container */
  flex-direction: column; /* Stack children vertically */
  align-items: center; /* Center children horizontally in a column layout */

  /* Add any other existing styles for .cath or codes-list-container here if needed */
  /*
   font-family: 'Courier New', Courier, monospace;
   font-size: 1.8rem;
   color: white;
  */
}

/* Ensure the "Daily Featured Coupons" heading is centered */
.indexph {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bold;
  font-size: 1.5rem;
  color: white;
  text-align: center; /* Keep this for centering the text itself */
  width: 100%; /* Make it take full width within its flex parent to ensure centering */
  box-sizing: border-box;
}

/* The .code-item-wrapper already uses display: flex internally.
 Ensure its width allows it to be centered if needed.
 With align-items: center on the parent, the wrapper divs
 will be centered if they are narrower than the parent container. */
.code-item-wrapper {
  display: flex;
  align-items: center;
  gap: 10px; /* Adjust gap as needed */
  margin-bottom: 15px;
  flex-wrap: wrap;
  /* Add width or max-width if you want to control how wide the code blocks are */
  /* max-width: 95%; */ /* Example: Don't let them take 100% of the centered container */
  /* margin: 0 auto; */ /* You could use this here INSTEAD OF align-items: center on the parent
                            if you didn't want the parent to be a flex container */
}

/* ... (Keep your other styles for .cath2, .tooltip, .icon-button, etc.) ... */

.cath{
font-family: 'Courier New', Courier, monospace; 
font-size: 1.8rem; 
color: white; 
text-align: center;
}
.cath2{
  font-family: 'Courier New', Courier, monospace; 
  font-size: 1rem; 
  color: white; 
  text-align: center;
  }
.indexp{
font-family: 'Courier New', Courier, monospace; 
font-size: 1.4rem; 
color: white; 
width: 650px;
}
.button-group{
flex-direction: column;
gap:10px
}



.wrapper{
box-sizing: border-box;
background-color: #060b2b;
height:75vh;
width: 40vw;
padding: 10px;
display: flex;
border-radius: 0 20px 20px 0;
flex-direction: column;
align-items: center;
justify-content: center;
}

.wrapperC{
box-sizing: border-box;
background-color: #060b2b;
height: 100vh;
width: max(40%, 600px);
padding: 10px;
display: flex;
border-radius: 0 20px 20px 0;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 50px;
}

.wrapperL{
box-sizing: border-box;
background-color: #060b2b;
height: 80vh;
width: max(40%, 600px);
padding: 10px;
display: flex;
border-radius: 0 20px 20px 0;
flex-direction: column;
align-items: left;
justify-content: left;
margin-top: 50px;
margin-left: 50px;
}


.wrapperR{
box-sizing: border-box;
background-color: #060b2b;
height: 100vh;
width:45vw;
padding: 10px;
display: flex;
border-radius: 0 20px 20px 0;
flex-direction: column;
align-items: right;
justify-content: right;
}


.wrapperR2{
  box-sizing: border-box;
  height: 100vh;
  width:45vw;
  padding: 10px;
  display: flex;
  border-radius: 0 20px 20px 0;
  flex-direction: column;
  align-items: center;
  justify-content: venter;
  }

.findbuttons{
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
margin-top: 50px;

}

.findbuttons2{
width: max(100%, 600px);
display: flex;
align-items: center;
justify-content: center;
margin-top: 50px;
}

.wrapper2{
width: max(60%,600px);
display: flex;
flex-direction: column;



}
h2{
font-family: 'Courier New', Courier, monospace; 
color: white; 
text-transform: uppercase;
font-size: 2rem;
align-items: center;
}
form{
width: min(400px, 100%);
margin-top: 20px;
margin-bottom: 50px;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

form > div{
width: 100%;
display: flex;
justify-content: center;
}

form ::placeholder{
font-family: 'Courier New', Courier, monospace;
}

form input{
color: white;
font-family: 'Courier New', Courier, monospace;
box-sizing: border-box;
flex-grow: 1;
min-width: 0;
height: 50px;
font-size: 1.1rem;
padding: 1em;
border-radius: 10px 10px 10px 10px;
border: 2px solid #1a2963;
background-color: #1a2963;
transition: 150ms ease;
}

.wrapper-main{
  width: 100vw;
}
form input:hover{
  border-color: #388279;
}
.referralheader{
  color:white; 
  font-family:'efco';
   font-size: 8rem;
}

form input:focus{
  outline: none;
  border-color: #388279;
}

.container1{
display: flex;
flex-wrap: wrap; /* Ensures it wraps on smaller screens */
justify-content: space-between; /* Adds space between the containers */
}

.container1 > .wrapper,
.container1 > .wrapperR {
  flex: 1 1 48%; /* 48% ensures some space between the two containers */
  margin: 10px;  /* Optional: Adds space around each container */
}

.wrapper > .wrapperL,
.wrapper > .wrapperR {
  flex: 1 1 48%; /* 48% ensures some space between the two containers */
  margin: 10px;  /* Optional: Adds space around each container */
}



form button{
  margin-top: 10px;
  border: none;
  border-radius: 1000px;
  padding: .85em 4em;
  background-color: #1a2963;
  color: white;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  cursor: pointer;
  transition: 150ms ease;
}

form button:hover{
  background-color: #388279;
}

form button:focus{
  outline: none;
  background-color: #388279;
}

a{
  outline: none;
  color: #388279;
  font-family: 'Courier New', Courier, monospace;
}

a:hover{
  text-decoration: underline;
}

form div.incorrect input{
border-color: red;
}

.button{
border: 2px solid #388279;
color: white;
padding:8px 32px;
  width: 260px;
  size: 25px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.dropdown1{
color: #060b2b; 
background-color: #388279; 
width:200px; 
border: 2px solid white; 
height: 40px; 
font-size:20px; 
font-family: 'Courier New', Courier, monospace;
}
.button1{
background-color: #060b2b;
color: white;
border: 2px solid #388279;
font-size: 20px;
font-family: 'Courier New', monospace;
  margin-right: 100px;

}
.button2{
background-color: #060b2b;
color: white;
border: 2px solid #388279;
font-size: 20px;
font-family: 'Courier New', monospace;
width: 280px;  
height: 60px;
margin-left: 20px;
margin-right: 20px;
}


.button2:hover{
background-color: #388279;
color: none;
}
.button1:hover{
background-color: #388279;
color: none;
}

.relative2, .relative3 {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: flex-start;
}

div.relative {
  position: relative;
  margin-left: 90px;
  max-width: 100%;

}

div.relative2{
  position:relative;
  margin-left: 90px;
  width: 800px;

}

div.relative3{
  position: relative;
  margin-left:90px;
  width: 800px;

}

div.relative4{
position: relative;
margin-left: 90px;
background-color: #060b2b;
width: 100vw;
justify-content: left;
align-items: left;
}


body {
  display: flex;
  flex-direction: column;
 /* align-items: center;
  justify-content: center; */
}
html, body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
overflow-x: hidden; /* Prevents horizontal scrolling */
height: auto; /* Avoid fixed height */
}



/* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1000; 
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.1s; /* 0.5 second transition effect to slide in the sidebar */
}

.sidebar.open{
  width: 100%;
}
/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
  font-family: 'Courier New', Courier, monospace;
  
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #388279;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 25px;
  font-weight: bold;
  cursor: pointer;
  background-color: #060f2b;
  color: #388279;
  padding: 10px 15px;
  border: none;
  border: 2px solid #388279;
  position: fixed;
  margin-left: 10px; 
  margin-top: 12px;
}

.user-tier-info{
  margin-top: 10vh;
}
.openbtn:hover {
  background-color: #388279;
  color:#060b2b
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
.main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}

@media(max-width: 1100px)
{
.wrapper{
  width: min(600px, 100%);
  border-bottom: 0;
}
}

.main-container {
display: flex;
}


#section2{
width: 100vw;
overflow-x:hidden;
}

.background{
  background-image: url('background.jpg'); background-repeat:no-repeat; background-attachment:fixed; background-size:cover;
}
 /* Add styling for the user tier div if needed, using existing classes */
 .user-tier-info {
  margin-top: 30px; /* Space above the tier info */
  /* Inherits .indexp and .cath styles from parent div */
}

.user-tier-info ul {
  list-style: none; /* Remove bullet points */
  padding: 0; /* Remove default padding */
}

.user-tier-info li {
  margin-bottom: 5px; /* Space between tier items */
}
.h1style{
  color:white; 
  font-family:'efco';
   font-size: 4rem;
    text-align: center;
     margin-top: 30px;
}
.error-message-inline {
  display: none; /* Hidden by default */
  color: white !important; /* Make text white for contrast */
  background-color: rgb(58, 127, 124) !important; /* TEMPORARY: Add a bright background */
  padding: 5px !important; /* TEMPORARY: Add padding to give it size */
  margin-top: 5px; /* Space above the error message */
  font-size: 0.9rem; /* Slightly smaller font size */
  /* Optional: Add padding, background, or border to make it look like a tooltip */
  /* border: 1px solid red; */
  /* border-radius: 4px; */
}
/*MOBILE VERSION */

@media only screen and (max-width: 600px){

  .background{
    background-image: url(backgroundmobile.jpg);
    background-position: center top;
    background-attachment: fixed;
  }
  .business-item {
    /* On mobile, make each item take up 90% of the container width */
    /* This overrides the flex-basis set for larger screens */
    width: 90% !important;
    /* You might want to adjust padding or other properties for mobile as well */
    /* padding: 1rem; */
}


  .referralheader {
    font-size: 6rem; /* smaller size for mobile */
    text-align: center;
    width: 95%;
    align-items: center !important;
  }

  .main {
    margin: 0 !important;
  }
  .header-main{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #060f2b;
    display: flex;
    justify-content: space-between;
    z-index: 1000;
  }

  .openbtn {
    position: fixed;
    top: 12px;
    left: 10px;
    /* Remove margin-left and margin-top! */
    margin: 0;
    
  }

  .wrapper-main, .main, .container1 {
    margin-top: 55px; /* matches header height */
  }

  .wrapper-main{
    width: 100vw;
    margin-left: 0;
  }

  .indexph{
    width: 95%;
    padding-left: 2.5vw;
  }

  .indexp{
    width: 95%;
    padding-left: 2.5vw;
  }

  .sidebar.open{
    width: 100vw !important;
  }

  .relative{
    width: 100vw;
    position: static;
    margin-left: 0 !important;
    justify-content: center;
    margin: 0;

  }
  .relative1{
    width: 100vw;
    position: static;
    align-items: center;
    justify-content: center;
    margin-left: 0 !important;
    margin: 0;


  }
  .relative2{
    position: relative;
    align-items: left;
    justify-content: center;
    width: 100vw;
    margin-left: 0 !important;
    flex-wrap: wrap;
    flex-direction: column;
    padding-left: 7.5vw;
  }
  .relative3{
    position: relative;
    align-items: left;
    justify-content: center;
    width: 100vw;
    margin-left: 0 !important;
    flex-wrap: wrap;
    flex-direction: column;
    padding-left: 7.5vw;


  }
  .relative4{
    position: static;
    justify-content: center;
    width: 100vw;
    margin-left: 0 !important;
    background-color: #060b2b;

  }
  .footer-sms-container {
  width: 100vw;
  margin: 0 auto;
}

  .button{
    margin: 0 !important;
    padding: 0;
    justify-content: center;

  }

  .button1{
    width: 85vw;
    height: 7vh;
    margin: 0 !important;
    padding: 0;
    justify-content: center;

  }

  .button2{
    width: 85vw;
    height: 5vh;
    margin: 0;
    justify-content: center;
  }

  .findbuttons{
    width: 100vw;
    display: flex;
    flex-direction: column;

  }
.wrapper{
  padding-top: 90px;
}
.wrapperR{
  width: 100vw;
}
.wrapperL{
  width: 100vw;
  margin-left: 0 !important;
  margin-top: 90px;
}

imgstyle{
  width:90vw;
  height:auto;
}


}