/* Landing page
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.landing {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  background-color: rgb(18, 18, 18);
}
.landing2 {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  background-color: rgb(197, 197, 141);
}
.landing3 {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.373);
}
.logo-2{
  padding-top: 2em;
}
.phone {
  position: relative;
  padding: 0 1em;
  width: 88%;
}
/* value
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.value {
  text-align: center;
}
.value h1 {
  font-weight: 300;
  border: 1px solid #fff;
  border-radius: 50%;
  width: 2.5em;
  margin: 0 auto;
  padding: 1rem 0;
} 

/* bgimage
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.blueBg {
  background: var(--nc-ac-1);
  padding: 1rem .5rem 0 .5rem;
  margin:  0;
}

.center {
  text-align: center;
}
dl {
  margin-left: 1rem;
}

/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.register {
  border: 1px solid var(--nc-bg-3);
}

.register input[type=text], 
.register input[type=email], 
.register input[type=tel], 
textarea {
  width: 100%;
  padding: .5em;
  margin: .3em 0;
  /*box-shadow:inset 2px 3px 5px rgb(167, 166, 166);*/
}
/* Footer Styles */
.vibrant-footer {
  background-color: var(--nc-d-lk-1); /* Vibrant yellow */
  padding: 20px;
  text-align: center;
  animation: fadeIn 1s ease; /* Fade-in animation */
}

/* Footer Content Styles */
.footer-content {
  color: #000000; /* White text */
  text-align: center;
}

/* Animation Keyframes */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}
@keyframes bubble-bounce {
  0% { bottom: 0; }
  50% { bottom: 20px; }
  100% { bottom: 0; }
}

.question-mark-btn {
  animation: bubble-bounce 5s infinite; /* Bounce every 5 seconds */
}
/************LOGO**************/
.animate__lightSpeedInRight {
  animation-name: lightSpeedInRight;
  animation-timing-function: ease-out;
  animation-duration: 2s;
  animation-delay: 1s;
}
@keyframes lightSpeedInRight {
  from {
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    transform: skewX(-5deg);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}
.animate__zoomIn {
  animation-name: zoomIn;animation-duration: 2s;
  animation-delay: .3s;
}

@keyframes zoomIn {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__lightSpeedInRight,
.animate__zoomIn {
    animation-fill-mode: both;
}
/* Bigger than 35 */
@media (min-width: 35rem) {
  .landing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .phone {
    width: 100%;
    z-index: 3;
  }
}
/* Bigger than 768px */
@media (min-width: 48rem) {
  .phone {
    padding-right: 2em;
  }
  .bgimage {
    padding: 3em 0;
  }
  .landing-bg {
    position: relative;
    top: -0.5em;
  }
}

/* Bigger than 960px */
@media (min-width: 60rem) {
  .landing {
    grid-template-columns: 1.5fr 1fr;
  }
  .landing-bg {
    position: relative;
    top: -4em;
  }
  .phone {
    padding: 0;
    margin-bottom: -2rem;
  }
}
/* Bigger than 1280px */
@media (min-width: 80rem) {
  .form-col-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0;
  }
}
/******************* RWD tafla *************************/

@media screen and (max-width: 37.5em) {
  table {
    border: 0;
    width: 98%;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 2px solid var(--nc-tx-1);
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid var(--nc-tx-1);
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}