h2 {font-size: 12px; color: #4d4d4d; font-weight: 500;}
  
p {font-size: 12px; font-weight: 400px; }
.zlogo {text-align: center;}

label {font-size: 12px;}

.bordering {border-radius: 16px;
 background: #FFF;
 box-shadow: 0px 3.038px 18.303px 3.038px rgba(0, 0, 0, 0.07); padding: 15px 25px 30px 25px; }

.bg-left {height: 800px; }

.page-split {
  display: flex;
  height: 100vh; /* Full viewport height */
  width: 100%; /* Full width of the page */
}

.left-panel {
  flex: 0 0 60%; /* Take up 60% of the width */
  display: flex;
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  background-color: #fff; /* Optional: Background color for contrast */
}

.right-panel {
  flex: 0 0 40%; /* Take up 40% of the width */
  color: white; /* Optional: Text color for contrast */
  display: flex;
  justify-content: center; /* Center content horizontally if needed */
  align-items: center; /* Center content vertically if needed */
  background: var(--Gradient-2, linear-gradient(270deg, #E86C2A 0.01%, #B2237E 99.99%));
  position: relative;
}

.anchored-container {
  position: absolute; /* Anchor the container */
  bottom: 10px; /* Distance from the bottom of the panel */
  right: 10px; /* Distance from the right edge of the panel */
  display: flex; /* Optional: Stack text and image */
  flex-direction: column; /* Ensure text stacks over the image */
  align-items: center; /* Center text horizontally on the image */
  text-align: left; /* Center text inside the container */
}


.anchored-image {
  width: 100%; /* Adjust width of the image */
  height: auto; /* Maintain aspect ratio */
 }

.anchored-text 
  {position: absolute; /* Anchor the image relative to .right-panel */
  bottom: 100%; /* Position text vertically (center of image) */
  pointer-events: none; /* Prevent the text from interfering with clicks on the image */
  width: 110%; /* Make the text span 80% of the right panel width */
  left: 6%;
  transform: translateY(0); /* Optional: Fine-tune vertical alignment */}

/* Media query for smaller screens (800px or less) */
@media (max-height: 800px) {
  .anchored-image {
    max-height: 50vh;
    width: 70%;
    align-self: flex-end; /* Align content to the right */
    object-fit: contain;
  }}


.headline {font-size: 30px; font-weight: 500; line-height: 34px; color: white;}
.bold-statement{font-size: 15px; font-family: poppins; font-weight: 400; width: 80%; margin-top: 30px;}

.trial-signup { position: absolute;
bottom: 2%;
text-align: center;
font-weight: 300;
border-top: solid 1px #bfbfbf;
margin-top: 100px;
padding-top: 20px;}

.panel {
 display: none;
}

.panel.active {
 display: block;
}




input {
 width: 95%;
 height: 38px;
 padding: 10px;
 margin: 10px 0;
 border: 1px solid #d8d8d8;
 border-radius: 4px;
 font-size: 14px;
 font-weight: 300;
 background-color: #fcfcfc;
 box-shadow: 0px 3.038px 3.038px 0px rgba(0, 0, 0, 0.03) inset;
}


button {
 background: #2a68ec;
 border: solid 1px #2a68ec;
 color: #fff;
 padding: 3.5px 25px;
 font-size: 10px;
 border-radius: 3px;
 cursor: pointer;
 font-weight: 500;
    
}

button:hover {
 background: #fff;
 border: solid 1px #2a68ec;
 color: #2a68ec;

}

.error-message {
 color: red;
 font-size: 14px;
}


.code-inputs {
 display: flex;
 justify-content: center;
 gap: 10px;
}

.code-field {
 width: 40px;
 height: 40px;
 text-align: center;
 font-size: 18px;
 border: 1px solid #ccc;
 border-radius: 4px;
}


.departments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 23px;
  margin: 10px 0;
}

.department-tab {
  display: flex;
  justify-content: left; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #F5F5F5;
  border: solid 5px transparent;
  width: 30px;
  height: 30px;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
  color: #4d4d4d;
  font-weight: 400;
  padding: 0;
}

.department-tab:hover {
  background-color: #565656;
  border-color: #EAEAEA;
}

.department-tab.selected {
  background-color: #ffffff;
  color: #2a68ec;
  border-color: #2a68ec;
}

.butmr {margin-left: 30px; white-space: nowrap; text-align: left;}


.industries {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 gap: 23px;
 margin: 20px 0;
}

.industry-tab {
  display: flex;
  justify-content: left; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #F5F5F5;
  border: solid 5px transparent;
  width: 30px;
  height: 30px;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
  color: #4d4d4d;
  font-weight: 400;
  padding: 0;
}

.industry-tab:hover {
 background-color: #565656;
 border: solid 1px #EAEAEA;
}


.industry-tab.selected {
 background-color: #ffffff;
 color: #2a68ec;
 border: solid 5px #2a68ec;
}

.next-button {
 background-color: #001489;
 color: #fff;
 border: none;
 border-radius: 8px;
 padding: 10px 20px;
 font-size: 16px;
 cursor: pointer;
 transition: background-color 0.3s ease;
}

.next-button:hover {
 background-color: #0039a6;
}

.marketing {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 gap: 15px;
 margin: 23px 0;
}


.marketing-option {
  display: flex;
  justify-content: left; /* Center horizontally */
  align-items: center; /* Center vertically */
  background-color: #F5F5F5;
  border: solid 5px transparent;
  width: 30px;
  height: 30px;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 50%;
  color: #4d4d4d;
  font-weight: 400;
  padding: 0;
}

.marketing-option:hover {
 background-color: #565656;
 border: solid 1px #EAEAEA;
}

.marketing-option.selected {
 background-color: #ffffff;
 color: #2a68ec;
 border: solid 5px #2a68ec;
}





.mt20 {margin-top: 20px;}
.mt10 {margin-top: 10px;}
.mt30 {margin-top: 30px;}


.floatr {float: right;}



.select-container {
 position: relative;
 width: 250px;
}

.selectlist {
 /* ... (existing styles) */
 padding-right: 40px; /* Make room for the caret and the cross */
}

.select-container::before,
.select-container::after {
 content: "";
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 pointer-events: none;
}

/* Caret (Down Arrow) */
.select-container::before {
 border-left: 5px solid transparent;
 border-right: 5px solid transparent;
 border-top: 8px solid #8B8B8B;
 right: 12px;
 z-index: 1;
}

/* Cross (X) */
.select-container::after {
 content: "\2715"; /* Unicode for 'X' */
 font-size: 14px;
 right: 30px;
 z-index: 1;
 color: #8B8B8B;
}

.selectlist {
 display: block;
 width: 250px;
 padding: 7px;
 margin: 8px 0;
 font-size: 15px;
 line-height: 1.5;
 border: 1px solid #ccc;
 border-radius: 4px;
 appearance: none;
 font-family: poppins;
 height: 44px;
 background-color: #fcfcfc;
 box-shadow: 0px 3.038px 3.038px 0px rgba(0, 0, 0, 0.03) inset;
 font-weight: 300;
}

.selectlist:focus {
 border: 1px solid #8B8B8B;
 outline: none;
 box-shadow: 0 2px 4px rgba(98, 0, 234, 0.3);
}
 
   .width175 {width: 175px; font-size: 13px;}
   .width269 {width: 269px; font-size: 13px;}
   .width375 {width: 375px; font-size: 13px;}
   .width325 {width: 325px; font-size: 13px;}
   .width50 {width: 50px; font-size: 13px;}
   .width100 {width: 100px; font-size: 13px;}
   .width200 {width: 200px; font-size: 13px;}
   .width330 {width: 330px; font-size: 13px;}
   .width90 {width:550px; font-size: 13px;}
   .width300 {width: 330px; font-size: 13px;}

.ml20 {margin-left: 20px;}
.mr30 {margin-right: 30px;}
.mr40 {margin-right: 40px;}

textarea {
 width: 49%;
 height: 100px;
 padding: 10px;
 box-sizing: border-box;
 border: 1px solid #ccc;
 border-radius: 4px;
 background-color: #fcfcfc;
 box-shadow: 0px 3.038px 3.038px 0px rgba(0, 0, 0, 0.03) inset;
 font-size: 14px;
 resize: none;
 font-weight: 300;
}

.error-message {
 color: red;
 font-size: 13px;
 margin-top: 10px;
}


#spinner {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-top: 20px;
}

#spinner p {
 font-size: 14px;
 color: #555;
 margin-bottom: 10px;
}

.loader {
 border: 4px solid #f3f3f3; /* Light gray */
 border-top: 4px solid #3498db; /* Blue */
 border-radius: 50%;
 width: 30px;
 height: 30px;
 animation: spin 1s linear infinite;
}

@keyframes spin {
 0% {
   transform: rotate(0deg);
 }
 100% {
   transform: rotate(360deg);
 }
}



.hidden {
 display: none !important; /* Forcefully hide elements regardless of other styles */
}

.progress2 {
 display: flex; /* Create a flex container */
 justify-content: flex-start; /* Spread columns evenly across the container */
 font-size: 11px; 
 font-weight: 300;
 margin-top: 30px;
 margin-bottom: 20px;
 text-align: left;
 gap: 50px;
}

.column {
 display: flex; /* Make each column a flex container */
 align-items: center; /* Center SVG and text vertically */
 flex-direction: row; /* Ensure SVG and text are side by side */
}

.column img {
 height: 24px; /* Adjust size of SVG or image as needed */
 width: auto;
}

.column span {
 margin-left: 10px; /* Add spacing between SVG and text */
}

.fw300 {font-weight: 300;}
.fw500 {font-weight: 500;}
.ml10 {margin-left: 10px;}
.mb30 {margin-bottom: 30px;}
.ml30 {margin-left: 30px;}
.ft12 {font-size: 12px;}


.fields {
 display: flex; /* Create a flex container */
 justify-content: flex-start; /* Spread columns evenly across the container */
 font-size: 11px; 
 font-weight: 300;
 text-align: left;
 gap: 10px;}

 .field-column {
   flex: 1;
 }



input::placeholder, textarea::placeholder {
color: #4d4d4d; /* Change the color */
 font-size: 13px; /* Adjust font size */
opacity: 1; /* Optional: Adjust visibility */
font-weight: 300;
}

.blue {color: #2a68ec;}
.blue .svg-icon {
filter: invert(29%) sepia(86%) saturate(750%) hue-rotate(191deg) brightness(95%) contrast(89%);
}


.logo {
display: flex;
gap: 20px;
justify-content: flex-start;
margin-top: 5px;
width: 100%;
}

.logo-option {
width: 50%;
height: auto;
cursor: pointer;
border: 1px solid #bfbfbf;
transition: border 0.3s, background-color 0.3s;
border-radius: 8px;
display: flex;
align-items: center;
font-size: 13px;
padding: 6px;
}

.logo-option:hover {
background-color: #f1f1f1;
border: none; 
}

.logo-option.selected {
background-color: #ffffff;
border: solid 1px #2a68ec;
}

h4 {font-weight: 600; font-size: 13px;}


/* Progress Bar Styles */
#progress-container {
margin-top: 20px;
text-align: center;
}

.progress-bar {
width: 100%;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
height: 20px;
margin-top: 10px;
position: relative;
}

.progress-bar-fill {
height: 100%;
width: 0%;
background-color: #2a68ec;
transition: width 0.5s ease-in-out;
}

button.inactive {
  background-color: #ccc; /* Grey background for inactive */
  cursor: not-allowed; /* Change the cursor */
  border: solid 1px #ccc;
}

.pointer {cursor: pointer;}