/*-- reset --*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*-- start editing from here --*/
a {
  text-decoration: none;
}

.txt-rt {
  text-align: right;
}

/* text align right */
.txt-lt {
  text-align: left;
}

/* text align left */
.txt-center {
  text-align: center;
}

/* text align center */
.float-rt {
  float: right;
}

/* float right */
.float-lt {
  float: left;
}

/* float left */
.clear {
  clear: both;
}

/* clear float */
.pos-relative {
  position: relative;
}

/* Position Relative */
.pos-absolute {
  position: absolute;
}

/* Position Absolute */
.vertical-base {
  vertical-align: baseline;
}

/* vertical align baseline */
.vertical-top {
  vertical-align: top;
}

/* vertical align top */
nav.vertical ul li {
  display: block;
}

/* vertical menu */
nav.horizontal ul li {
  display: inline-block;
}

/* horizontal menu */
img {
  max-width: 100%;
}

/*-- end reset --*/
body {
  background: #1E90FF;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to top, #76b852, #8DC26F);
  background: -moz-linear-gradient(to top, #76b852, #8DC26F);
  background: -o-linear-gradient(to top, #76b852, #8DC26F);
  /* background: linear-gradient(to bottom, #9e8600, #2800b8, #1E90FF); Darker Yellow and Blue */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Roboto', sans-serif;
}

h1 {
  font-size: 3em;
  text-align: center;
  color: #fff;
  font-weight: 100;
  text-transform: capitalize;
  letter-spacing: 4px;
  font-family: 'Roboto', sans-serif;
}

/*-- main --*/
.main-w3layouts {
  /* padding: 0 0 1em; */
}

.main-agileinfo {
  width: 35%;
  margin: 3em auto;
  background: rgba(255, 255, 255, 0.2);
  /* background-size: cover; */
  border-radius: 10px;
  /* background: url('images/bgback.jpg');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat; */
  box-shadow: 40px 40px 40px rgba(0, 0, 0, 0.3);
}

.agileits-top {
  padding: 3em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] {
  font-size: 0.9em;
  color: #fff;
  font-weight: 100;
  width: 94.5%;
  display: block;
  border: none;
  padding: 0.8em;
  border: solid 1px rgba(255, 255, 255, 0.37);
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
  background-position: -800px 0;
  background-size: 100%;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  outline: none;
}

.ones {
  /* font-size: 0.9em; */
  color: #fff;
  /* font-weight: 100; */
  width: 74px;
  display: block;
  border: none;
  /* padding: 0.8em; */
  border: 1px solid #ccc;
  /* -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1); */
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
  background-position: -800px 0;
  background-size: 100%;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Roboto', sans-serif;
}

textarea {
  outline: none;
  font-size: 0.9em;
  color: #fff;
  font-weight: 100;
  width: 97%;
  display: block;
  border: none;
  /* padding: 0.8em; */
  border: solid 1px rgba(255, 255, 255, 0.37);
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
  background-position: -800px 0;
  background-size: 100%;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Roboto', sans-serif;
}

select {
  outline: none;
  font-size: 0.9em;
  color: #fff;
  font-weight: 100;
  width: 100%;
  display: block;
  border: none;
  /* padding: 0.8em; */
  border: solid 1px rgba(255, 255, 255, 0.37);
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #fff 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #fff 4%);
  background-position: -800px 0;
  background-size: 100%;
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Roboto', sans-serif;
}

option {
  background-color: rgba(255, 255, 255, 0.1);
  color: #000;
}

input.email,
input.text.w3lpass {
  margin: 2em 0;
}

.text:focus,
.text:valid {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}

.text:focus::-webkit-input-placeholder,
.text:valid::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
  font-size: .9em;
  -webkit-transform: translateY(-30px);
  -moz-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
  visibility: visible !important;
}

::-webkit-input-placeholder {
  color: #fff;
  font-weight: 100;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #fff;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #fff;
}

:-ms-input-placeholder {
  color: #fff;
}

input[type="submit"] {
  font-size: .9em;
  color: #fff;
  background: #76b852;
  outline: none;
  border: 1px solid #76b852;
  cursor: pointer;
  padding: 0.9em;
  -webkit-appearance: none;
  /* width: 50%; */
  margin: 1em 0;
  letter-spacing: 4px;
}

input[type="reset"] {
  font-size: .9em;
  color: #fff;
  background: #76b852;
  outline: none;
  border: 1px solid #76b852;
  cursor: pointer;
  padding: 0.9em;
  -webkit-appearance: none;
  /* width: 50%; */
  margin: 1em 0;
  margin-left: 10px;

  letter-spacing: 4px;
}

input[type="submit"]:hover {
  -webkit-transition: .5s all;
  -moz-transition: .5s all;
  -o-transition: .5s all;
  -ms-transition: .5s all;
  transition: .5s all;
  background: #8DC26F;
}

input[type="reset"]:hover {
  -webkit-transition: .5s all;
  -moz-transition: .5s all;
  -o-transition: .5s all;
  -ms-transition: .5s all;
  transition: .5s all;
  background: #8DC26F;
}

.agileits-top p {
  font-size: 1em;
  color: #fff;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 300;
}

.agileits-top p a {
  color: #fff;
  -webkit-transition: .5s all;
  -moz-transition: .5s all;
  transition: .5s all;
  font-weight: 400;
}

.agileits-top p a:hover {
  color: #76b852;
}

/*-- //main --*/
/*-- checkbox --*/
.wthree-text label {
  font-size: 0.9em;
  color: #fff;
  font-weight: 200;
  cursor: pointer;
  position: relative;
}

input.checkbox {
  background: #8DC26F;
  cursor: pointer;
  width: 1.2em;
  height: 1.2em;
}

input.checkbox:before {
  content: "";
  position: absolute;
  width: 1.2em;
  height: 1.2em;
  background: inherit;
  cursor: pointer;
}

input.checkbox:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  z-index: 1;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid #fff;
  -webkit-transition: .4s ease-in-out;
  -moz-transition: .4s ease-in-out;
  -o-transition: .4s ease-in-out;
  transition: .4s ease-in-out;
}

input.checkbox:checked:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  height: .5rem;
  border-color: #fff;
  border-top-color: transparent;
  border-right-color: transparent;
}

.anim input.checkbox:checked:after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  height: .5rem;
  border-color: transparent;
  border-right-color: transparent;
  animation: .4s rippling .4s ease;
  animation-fill-mode: forwards;
}

@keyframes rippling {
  50% {
    border-left-color: #fff;
  }

  100% {
    border-bottom-color: #fff;
    border-left-color: #fff;
  }
}

/*-- //checkbox --*/
/*-- copyright --*/
.colorlibcopy-agile {
  margin: 2em 0 1em;
  text-align: center;
}

.colorlibcopy-agile p {
  font-size: .9em;
  color: #fff;
  line-height: 1.8em;
  letter-spacing: 1px;
  font-weight: 100;
}

.colorlibcopy-agile p a {
  color: #fff;
  transition: 0.5s all;
  -webkit-transition: 0.5s all;
  -moz-transition: 0.5s all;
  -o-transition: 0.5s all;
  -ms-transition: 0.5s all;
}

.colorlibcopy-agile p a:hover {
  color: #000;
}

/*-- //copyright --*/
.wrapper {
  position: relative;
  overflow: hidden;
}

.colorlib-bubbles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.colorlib-bubbles li {
  position: absolute;
  list-style: none;
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.15);
  bottom: -160px;
  -webkit-animation: square 20s infinite;
  -moz-animation: square 250s infinite;
  -o-animation: square 20s infinite;
  -ms-animation: square 20s infinite;
  animation: square 20s infinite;
  -webkit-transition-timing-function: linear;
  -moz-transition-timing-function: linear;
  -o-transition-timing-function: linear;
  -ms-transition-timing-function: linear;
  transition-timing-function: linear;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}

.colorlib-bubbles li:nth-child(1) {
  left: 10%;
}

.colorlib-bubbles li:nth-child(2) {
  left: 20%;
  width: 80px;
  height: 80px;
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 17s;
  -moz-animation-duration: 17s;
  -o-animation-duration: 17s;
  animation-duration: 17s;
}

.colorlib-bubbles li:nth-child(3) {
  left: 25%;
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  -ms-animation-delay: 4s;
  animation-delay: 4s;
}

.colorlib-bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  -webkit-animation-duration: 22s;
  -moz-animation-duration: 22s;
  -o-animation-duration: 22s;
  -ms-animation-duration: 22s;
  animation-duration: 22s;
  background-color: rgba(255, 255, 255, 0.25);
}

.colorlib-bubbles li:nth-child(5) {
  left: 70%;
}

.colorlib-bubbles li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
  background-color: rgba(255, 255, 255, 0.2);
}

.colorlib-bubbles li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  -o-animation-delay: 7s;
  -ms-animation-delay: 7s;
  animation-delay: 7s;
}

.colorlib-bubbles li:nth-child(8) {
  left: 55%;
  width: 20px;
  height: 20px;
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  animation-delay: 15s;
  -webkit-animation-duration: 40s;
  -moz-animation-duration: 40s;
  animation-duration: 40s;
}

.colorlib-bubbles li:nth-child(9) {
  left: 25%;
  width: 10px;
  height: 10px;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 40s;
  animation-duration: 40s;
  background-color: rgba(255, 255, 255, 0.3);
}

.colorlib-bubbles li:nth-child(10) {
  left: 90%;
  width: 160px;
  height: 160px;
  -webkit-animation-delay: 11s;
  animation-delay: 11s;
}

@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    -moz-transform: translateY(-700px) rotate(600deg);
    -o-transform: translateY(-700px) rotate(600deg);
    -ms-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}

@keyframes square {
  0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
    -moz-transform: translateY(-700px) rotate(600deg);
    -o-transform: translateY(-700px) rotate(600deg);
    -ms-transform: translateY(-700px) rotate(600deg);
    transform: translateY(-700px) rotate(600deg);
  }
}

/*-- responsive-design --*/
@media(max-width:1440px) {

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 94%;
  }
}

@media(max-width:1366px) {
  h1 {
    font-size: 2.6em;
  }

  .agileits-top {
    padding: 1em;
  }

  .main-agileinfo {
    margin: 2em auto;
  }

  .main-agileinfo {
    width: 36%;
  }
}

@media(max-width:1280px) {
  .main-agileinfo {
    width: 40%;
  }
}

@media(max-width:1080px) {
  .main-agileinfo {
    width: 46%;
  }
}

@media(max-width:1024px) {
  .main-agileinfo {
    width: 50%;
  }
}

@media(max-width:991px) {
  h1 {
    font-size: 2.4em;
  }

  .main-w3layouts {
    padding: 0em 0 1em;
  }
}

@media(max-width:900px) {
  .main-agileinfo {
    width: 58%;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 93%;
  }
}

@media(max-width:800px) {
  h1 {
    font-size: 2.2em;
  }
}

@media(max-width:736px) {
  .main-agileinfo {
    width: 62%;
  }
}

@media(max-width:667px) {
  .main-agileinfo {
    width: 67%;
  }
}

@media(max-width:600px) {
  .agileits-top {
    padding: 2.2em;
  }

  input.email,
  input.text.w3lpass {
    margin: 1.5em 0;
  }

  input[type="submit"] {
    margin: 2em 0;
  }

  input[type="reset"] {
    margin: 2em 0;
  }

  h1 {
    font-size: 2em;
    letter-spacing: 3px;
  }
}

@media(max-width:568px) {
  .main-agileinfo {
    width: 75%;
  }

  .colorlibcopy-agile p {
    padding: 0 2em;
  }
}

@media(max-width:480px) {
  h1 {
    font-size: 1.8em;
    letter-spacing: 3px;
  }

  .agileits-top {
    padding: 1.8em;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 91%;
  }

  .agileits-top p {
    font-size: 0.9em;
  }
}

@media(max-width:414px) {
  h1 {
    font-size: 1.8em;
    letter-spacing: 2px;
  }

  .main-agileinfo {
    width: 85%;
    margin: 1.5em auto;
  }

  .text:focus,
  .text:valid {
    background-position: 0 0px;
  }

  .wthree-text ul li,
  .wthree-text ul li:nth-child(2) {
    display: block;
    float: none;
  }

  .wthree-text ul li:nth-child(2) {
    margin-top: 1.5em;
  }

  input[type="submit"] {
    margin: 2em 0 1.5em;
    letter-spacing: 3px;
  }

  input[type="reset"] {
    margin: 2em 0 1.5em;
    letter-spacing: 3px;
  }

  input[type="submit"] {
    margin: 2em 0 1.5em;
  }

  input[type="reset"] {
    margin: 2em 0 1.5em;
  }

  .colorlibcopy-agile {
    margin: 1em 0 1em;
  }
}

@media(max-width:384px) {
  .main-agileinfo {
    width: 88%;
  }

  .colorlibcopy-agile p {
    padding: 0 1em;
  }
}

@media(max-width:375px) {
  .agileits-top p {
    letter-spacing: 0px;
  }
}

@media(max-width:320px) {
  .main-w3layouts {
    padding: 1.5em 0 0;
  }

  .agileits-top {
    padding: 1.2em;
  }

  .colorlibcopy-agile {
    margin: 0 0 1em;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"] {
    width: 89.5%;
    font-size: 0.85em;
  }

  h1 {
    font-size: 1.7em;
    letter-spacing: 0px;
  }

  .main-agileinfo {
    width: 92%;
    margin: 1em auto;
  }

  .text:focus,
  .text:valid {
    background-position: 0 0px;
  }

  input[type="submit"] {
    margin: 1.5em 0;
    padding: 0.8em;
    font-size: .85em;
  }

  input[type="reset"] {
    margin: 1.5em 0;
    padding: 0.8em;
    font-size: .85em;
  }

  .colorlibcopy-agile p {
    font-size: .85em;
  }

  .wthree-text label {
    font-size: 0.85em;
  }

  .main-w3layouts {
    padding: 1em 0 0;
  }
}


/* Add your existing CSS here */

.hidden {
  display: none;
}

.form-row {
  display: flex;
  /* justify-content: space-between; */
  margin-bottom: 6px;
}

.form-group {
  /* flex: 1; */
  margin-right: 10px;
  /* Add space between multiple boxes */
}

.form-group:last-child {
  margin-right: 0;
  /* Remove margin for the last box in the row */
}

.form-group.full-width {
  flex: 100%;
  margin-right: 0;
  /* No margin for full-width elements */
}

label {
  display: block;
  margin-bottom: 5px;
  color: #fff;
  font-size: small;
}

input[type="text"],
input[type="email"],
textarea,
input[type="date"],
select {
  /* width: 100%; */
  padding: 5px;
  /* margin-bottom: 10px; */
  border: 1px solid #ccc;
  border-radius: 10px;
}

textarea {
  height: 25px;
}

input[type="submit"],
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="reset"],
button {
  padding: 10px 20px;
  background-color: #b2c418;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type="submit"]:hover,
button:hover {
  background-color: #45a049;
}

input[type="reset"]:hover,
button:hover {
  background-color: #ffffff;
}

#previewContent {
  margin-top: 20px;
}

#countryCode {
  width: 60px;
}

/* #phoneNumber {
  width: 97%;

} */

#email,
#companyName,
#mfullname,
#remark,
#promo,
#othervenue,#website {
  width: 97%;

}

#venue {
  width: 100%;
}
#fullname{
  width: 97%;
}

/* Style for the preview section */
#previewSection {
  background-color: rgba(51, 51, 51, 0.6);
  /* Dark background for contrast */
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  overflow-x: auto;
  /* Allow horizontal scrolling on small screens */
}

/* Style for the table */
#previewSection table {
  width: 100%;
  border-collapse: collapse;
  color: white;
  /* White font color */
  font-size: 18px;
  /* Larger font size */
}

#previewSection table td {
  padding: 10px;
  border: 1px solid #555;
  /* Border color */
}

#previewSection table td strong {
  color: #ff9c5a;
  /* Green color for field names */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #previewSection table {
    font-size: 16px;
    /* Slightly smaller font size for tablets */
  }

  #previewSection table td {
    padding: 8px;
    /* Reduce padding for smaller screens */
  }
}

@media (max-width: 480px) {
  #previewSection table {
    font-size: 14px;
    /* Smaller font size for mobile */
  }

  #previewSection table td {
    padding: 6px;
    /* Further reduce padding for very small screens */
  }

  /* Stack table rows vertically on very small screens */
  #previewSection table,
  #previewSection table tbody,
  #previewSection table tr,
  #previewSection table td {
    display: block;
    width: 100%;
  }

  #previewSection table td {
    text-align: left;
    /* Align text to the left */
    border: none;
    /* Remove borders for a cleaner look */
    border-bottom: 1px solid #555;
    /* Add a bottom border for separation */
  }

  #previewSection table td:last-child {
    border-bottom: none;
    /* Remove bottom border for the last row */
  }

  #previewSection table td strong {
    display: block;
    /* Make field names block-level for better readability */
    margin-bottom: 5px;
    /* Add space between field name and value */
  }
}

h2 {
  text-align: center;
  margin: 0px 0px 15px 0px;
  font-size: smaller;
  color: #fff;
}

h4 {
  text-align: center;
  /* margin: 0px 0px 15px 0px; */
  font-size: large;
  color: #fff;
}

/* From Uiverse.io by Shoh2008 */
#verifyButton,
#resetButton {
  padding: 10px 20px;
  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  outline: none;
  border: none;
  border-radius: 10px;
  transition: 0.5s;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  color: #363636;
  box-shadow: 0 0 10px #ffffff, inset 0 0 10px #ffffff;
  margin-right: 15px;
}

#verifyButton:hover,
#resetButton:hover {
  animation: a 0.5s 1 linear;
}

@keyframes a {
  0% {
    transform: scale(0.7, 1.3);
  }

  25% {
    transform: scale(1.3, 0.7);
  }

  50% {
    transform: scale(0.7, 1.3);
  }

  75% {
    transform: scale(1.3, 0.7);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* From Uiverse.io by Shoh2008 */
#backButton,
#homeButton {
  padding: 10px 20px;
  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  outline: none;
  border: none;
  border-radius: 10px;
  transition: 0.5s;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  color: #363636;
  box-shadow: 0 0 10px #ffffff, inset 0 0 10px #ffffff;
  margin-right: 15px;
}

#backButton:hover,
#homeButton:hover {
  animation: a 0.5s 1 linear;
}

@keyframes a {
  0% {
    transform: scale(0.7, 1.3);
  }

  25% {
    transform: scale(1.3, 0.7);
  }

  50% {
    transform: scale(0.7, 1.3);
  }

  75% {
    transform: scale(1.3, 0.7);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* From Uiverse.io by Shoh2008 */
#yesButton,
#noButton {
  padding: 10px 20px;
  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  outline: none;
  border: none;
  border-radius: 10px;
  transition: 0.5s;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  color: #363636;
  box-shadow: 0 0 10px #ffffff, inset 0 0 10px #ffffff;
  margin-right: 15px;
}

#yesButton:hover,
#noButton:hover {
  animation: a 0.5s 1 linear;
}

@keyframes a {
  0% {
    transform: scale(0.7, 1.3);
  }

  25% {
    transform: scale(1.3, 0.7);
  }

  50% {
    transform: scale(0.7, 1.3);
  }

  75% {
    transform: scale(1.3, 0.7);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* Base button styles */
#rfrButton,
#rfmButton {
  font-size: 14px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  outline: none;
  border: none;
  border-radius: 10px;
  transition: 0.5s;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  color: #363636;
  box-shadow: 0 0 10px #ffffff, inset 0 0 10px #ffffff;
  padding: 10px 20px;
  width: auto; /* Default width */
  margin: 10px;
  text-align: center; /* Center the text inside the button */
  /* word-wrap: break-word; Allow word wrapping */
}

/* Make sure span tags inside buttons behave like block elements */
#rfrButton span,
#rfmButton span {
  display: block; /* Forces each part to be on a new line */
  line-height: 1.2; /* Adjust line height for better readability */
}

/* Hover effect */
#rfrButton:hover,
#rfmButton:hover {
  animation: a 0.5s 1 linear;
}

@keyframes a {
  0% {
    transform: scale(0.7, 1.3);
  }

  25% {
    transform: scale(1.3, 0.7);
  }

  50% {
    transform: scale(0.7, 1.3);
  }

  75% {
    transform: scale(1.3, 0.7);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* Responsive Styles */

/* For Large Screens (Desktops and large tablets) */
@media (min-width: 1200px) {
  #rfrButton,
  #rfmButton {
    font-size: 14px;
    /* padding: 15px 30px; */
    width: auto;
    margin: 10px;
  }
}

/* For Medium Screens (Large tablets and smaller desktops) */
@media (max-width: 1199px) and (min-width: 768px) {
  #rfrButton,
  #rfmButton {
    font-size: 14px;
    /* padding: 14px 28px; */
    width: auto;
    margin: 10px;
  }
}

/* For Small Screens (Tablets and large phones) */
@media (max-width: 768px) and (min-width: 480px) {
  #rfrButton,
  #rfmButton {
    font-size: 14px;  /* Adjust font size for readability */
    /* padding: 12px 25px; */
    width: 100%;  /* Make buttons take full width */
    margin: 10px 0; /* Adjust margin */
  }
}

/* For Extra Small Screens (Mobile Phones) */
@media (max-width: 479px) {
  #rfrButton,
  #rfmButton {
    font-size: 14px;  /* Larger font for small screens */
    /* padding: 15px 30px; Larger padding for easier tapping */
    width: 100%;  /* Full width */
    margin: 10px 0;
  }
}


.updateContainer,
.mettingContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#updateButton {
  padding: 10px 20px;
  font-size: 18px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  outline: none;
  border: none;
  border-radius: 10px;
  transition: 0.5s;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  color: #363636;
  box-shadow: 0 0 10px #ffffff, inset 0 0 10px #ffffff;
  margin-right: 15px;
}

#updateButton:hover {
  animation: a 0.5s 1 linear;
}

@keyframes a {
  0% {
    transform: scale(0.7, 1.3);
  }

  25% {
    transform: scale(1.3, 0.7);
  }

  50% {
    transform: scale(0.7, 1.3);
  }

  75% {
    transform: scale(1.3, 0.7);
  }

  100% {
    transform: scale(1, 1);
  }
}


.msg-w3layouts {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
}

.msg-agileinfo {
  width: 70%;
  /* Adjust width as needed */
  /* background-image: url('images/bgback.jpg'); */
  /* background-size: cover; */
  /* Ensures the image stays at its original size */

  /* padding: 20px; */
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);

  box-shadow: 40px 40px 40px rgba(0, 0, 0, 0.3);
  text-align: center;
  /* background-image: url('images/bgback.jpg');
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat; */
}

/* position: absolute; 
left: 0;
width: 92%;
height: auto; 
  background-color: #333; 
  padding: 20px;
  border-radius: 10px;
  margin-top: 20px;
  overflow-x: auto;
  align-items: center;
  justify-content: center;
  z-index: 1; */