@media (min-width: 1024px){
  html,
  body {
    height: 100vh; /* fallback for Js load */
    height: var(--doc-height);
  }

  html, main {
    background-size: cover !important;
    background-repeat: no-repeat;
  }

  h1 {
    font-size: 1.5rem;
  }
    
  .div-main{
    margin: auto;
    margin-top: 15rem;
  }

  body {
    display: flex;
    align-items: center;
    background-color: #777777;
    overflow: hidden;
  }

  /* Background */
  html, .index-main {
    background: url('./../images/bgIndex.svg');
  }

  html, .address-main, .code-main {
    background: url('./../images/bgServices.svg');
  }

  html, .review-main {
    background: url('./../images/bgBath.svg');
  }

  html, .thanks-main {
    background: url('./../images/bgThanks.svg');
  }

  /* Index */


  .button-size{
    width: 50% !important;
    margin: auto !important;
  }
  
  .sutmit-animation:hover{
      transform: scale(1.2);
    
  }

  .index-main, .address-main , .code-main, .review-main, .thanks-main{
    width: 100vw;
    width: var(--doc-width);
    height: 100vh;
    height: var(--doc-height);
    padding: 0 20px 0 20px;
    font-family: 'Bakso Sapi';
    margin: auto;
    background-color: #38c9c6;
  }

  .logo-index {
    height: 20vh;
    height: calc(var(--vh) * 20);
  }

  .logo-index img {
    width: 100%;
    height: 20vh;
    height: calc(var(--vh) * 20);
    object-fit: contain;
  }

  .logo-index-error {
    height: 20vh;
    height: calc(var(--vh) * 20);
  }

  .logo-index-error img {
    width: 100%;
    height: 20vh;
    height: calc(var(--vh) * 20);
    object-fit: contain;
  }

  .form-index {
    height: 74vh;
    height: calc(var(--vh) * 74);
  }

  /* Address */
  .address-logo {
    height: 3vh;
    height: calc(var(--vh) * 3);
  }

  .address-logo img {
    width: 100%;
    height: 3vh;
    height: calc(var(--vh) * 3);
    object-fit: contain;
  }

  .address-head {
    padding-top: 8vh;
    padding-top: calc(var(--vh) * 8);
    height: 26vh;
    height: calc(var(--vh) * 26);
  }

  .address-code {
    height: 71vh;
    height: calc(var(--vh) * 71);
  }

  /* Code */
  .body-code {
    height: 71vh;
    height: calc(var(--vh) * 71);
  }

  .form-code {
    width: 100%;
    font-size: 1.5rem;
  }

  /*Review*/

  .review-logo {
    height: 3vh;
    height: calc(var(--vh) * 3);
  }

  .review-logo img {
    height: 100%;
    width: 100%;
    height: 3vh;
    height: calc(var(--vh) * 3);
    object-fit: contain;
  }

  .review-menu {
    padding-top: 2vh;
    padding-top:  calc(var(--vh) * 2);
    height: 18vh;
    height: calc(var(--vh) * 18);
  }

  .review-information {
    height: 77vh;
    height:  calc(var(--vh) * 77);
  }

  /* Thanks */

  .thanks-logo {
    height: 26vh;
    height: calc(var(--vh) * 26);
  }

  .thanks-logo img {
    height: 100%;
    width: 100%;
    max-height: calc(var(--vh) * 3);
    object-fit: contain;
  }

  .thanks-head{
    height: 11vh;
    height: calc(var(--vh) * 11);
  }

  .thanks-info {
    height: 64vh;
    height: calc(var(--vh) * 64);
  }
}

@media (orientation:portrait) and (max-width: 1023px) {
  html,
  body {
    padding: 0;
    margin: 0;
    height: 100vh;
    height: -webkit-fill-available;
    height: var(--doc-height);
    background-size: cover !important;
    background-repeat: no-repeat;
  }
  
  .div-main{
    margin: auto;
    margin-top: 10rem;
  }

  body {
    display: flex;
    align-items: center;
  }

  /* Background */

  html, .index-body {
    background: url('./../images/bgIndex.svg');
  }

  html, .address-body, .code-body {
    background: url('./../images/bgServices.svg');
  }

  html, .review-body {
    background: url('./../images/bgBath.svg');
  }

  html, .thanks-body {
    background: url('./../images/bgThanks.svg');
  }

  /* Background size */

  .index-main, .address-main, .code-main, .review-main, .thanks-main{
    width: 100vw;
    width: var(--doc-width);
    height: 100vh;
    height: var(--doc-height);
    padding: 0 15px 10px 15px;
    font-family: 'Bakso Sapi';
  }

  /* Index */
  .logo-index {
    height: 26vh;
    height: calc(var(--vh) * 26);
  }

  .logo-index img {
    /*height: 100%;*/
    width: 100%;
    height: 26vh;
    height: calc(var(--vh) * 26);
    object-fit: contain;
  }

  .logo-index-error {
    height: calc(26vh - 42px);
    height: calc(calc(var(--vh) * 26) - 30px);
  }

  .logo-index-error img {
    width: 100%;
    height: calc(26vh - 30px);
    height: calc(calc(var(--vh) * 26) - 30px);
    object-fit: contain;
  }

  .form-index {
    height: 26vh;
    height: calc(var(--vh) * 66);
  }

  /* Address */

  .address-logo {
    /*height: 3vh;*/
    height: 4vh;
    height: calc(var(--vh) * 4);
  }

  .address-logo img {
    /*height: 100%;*/
    width: 100%;
    height: 4vh;
    height: calc(var(--vh) * 4);
    object-fit: contain;
  }

  .address-head {
    padding-top: 8vh;
    padding-top: calc(var(--vh) * 8);
    height: 30vh;
    height: calc(var(--vh) * 30);
  }

  .address-code {
    height: 64vh;
    height: calc(var(--vh) * 64);
  }

  /* Code */

  .body-code {
    height: 62vh;
    height: calc(var(--vh) * 62);

  }

  .form-code {
    width: 100%;
    font-size: 1.5rem;
  }

  /* Review */

  .review-logo {
    height: 4vh;
    height: calc(var(--vh) * 4);
  }

  .review-logo img {
    width: 100%;
    height: 3vh;
    height: calc(var(--vh) * 3);
    object-fit: contain;
  }

  .review-menu {
    padding-top: 2vh;
    padding-top: calc(var(--vh) * 2);
    height: 20vh;
    height: calc(var(--vh) * 20);
  }

  .review-information {
    height: 72vh;
    height: calc(var(--vh) * 72);
  }

  .review-information h3 {
    margin-bottom: 0.25rem;
  }

  .review-information p {
    margin-bottom: 0.25rem;
  }

  .review-information table>:not(caption)>*>* {
     padding: 0.125rem;
  }

  /* Thanks */

  .thanks-logo {
    height:30vh;
    height: calc(var(--vh) * 30);
  }

  .thanks-logo img {
    height: 100%;
    width: 100%;
    max-height: 4vh;
    max-height: calc(var(--vh) * 4);
    object-fit: contain;
  }

  .thanks-head{
    height: 11vh;
    height: calc(var(--vh) * 11);
  }

  .thanks-info {
    height: 58vh;
    height: calc(var(--vh) * 58);
  }
  /*Colei*/

}


@media (orientation:landscape) and (max-width: 1023px)   {
  html,
  body {
    width: 100vw; /* fallback for Js load */
    width: -webkit-fill-available;
    width: var(--doc-height);
    background-size: cover !important;
    background-repeat: no-repeat;
  }

  body {
    align-items: center;
    margin:0;
    overflow:hidden;
  }
    
    
  .div-main{
    margin: auto;
    margin-top: 10rem;
  }
  
  .wrapper{
    transform: rotate(270deg);
    transform-origin: top left;
    top: 100dvh;
    top: var(--doc-width);
    height: 100dvw;
    height: var(--doc-height);
    width: 100dvh;
    width: var(--doc-width);
    position: absolute;
  }

  /* Index */
  html, .index-body {
    background: url('./../images/bgIndex.svg');
  }

  html, .address-body, .code-body {
    background: url('./../images/bgServices.svg');
  }

  html, .review-body {
    background: url('./../images/bgBath.svg');
  }

  html, .thanks-body {
    background: url('./../images/bgThanks.svg');
  }

  .index-main, .address-main, .code-main, .review-main, .thanks-main{
    width: 100vw;
    width: var(--doc-width);
    padding: 0 15px 10px 15px;
    font-family: 'Bakso Sapi';
  }

  .logo-index {
    height: 26vh;
    height: calc(var(--vh) * 26);
  }

  .logo-index img {
    height: 100%;
    width: 100%;
    max-height: 26vh;
    max-height: calc(var(--vh) * 26);
    object-fit: contain;
  }

  .logo-index-error {
    height: calc(26vh - 30px);
    height: calc(var(--vh) * 26 - 24px);
  }

  .logo-index-error img {
    width: 100%;
    height: calc(26vh - 30px);
    height: calc(var(--vh) * 26 - 24px);
    object-fit: contain;
  }

  .form-index {
    height:  65vh;
    height:  calc(var(--vh) * 65);
  }

  /* Address */

  .address-logo {
    height: 4vh;
    height: calc(var(--vh) * 4);
  }

  .address-logo img {
    width: 100%;
    height: 4vh;
    height: calc(var(--vh) * 4);
    object-fit: contain;
  }

  .address-head {
    padding-top: 8vh;
    padding-top: calc(var(--vh) * 8);
    height: 30vh;
    height: calc(var(--vh) * 30);

  }

  .address-head h1 {
    font-size: 1.5rem;
  }

  .address-code {
    height: 62vh;
    height: calc(var(--vh) * 62);
  }

  /* Code */
  .body-code {
    height: 66vh;
    height: calc(var(--vh) * 66);
  }

  .form-code {
    width: 100%;
    font-size: 1.5rem;
  }

  /* Review */

  .review-logo {
    height: 4vh;
    height: calc(var(--vh) * 4);
  }

  .review-logo img {
    width: 100%;
    height: 3vh;
    height: calc(var(--vh) * 3);
    object-fit: contain;
  }

  .review-menu {
    height: 12vh;
    height: calc(var(--vh) * 12);
  }

  .review-menu h1 {
    font-size: 1.5rem;
  }

  .review-information {
    height: 72vh;
    height: calc(var(--vh) * 72);
  }

  .review-information h3 {
    margin-bottom: 0.25rem;
  }

  .review-information p {
    margin-bottom: 0.25rem;
  }

  .review-information table>:not(caption)>*>* {
    padding: 0.125rem;
  }

  /*Thanks*/

  .thanks-logo {
    height: 30vh;
    height: calc(var(--vh) * 30);
  }

  .thanks-logo img {
    height: 100%;
    width: 100%;
    max-height: 4vh;
    max-height: calc(var(--vh) * 4);
    object-fit: contain;
  }

  .thanks-head{
    height: 11vh;
    height: calc(var(--vh) * 11);;
  }

  .thanks-info {
    height: 54vh;
    height: calc(var(--vh) * 54);;
  }
}

.alert {
  padding: 0.5rem;
}


.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-35%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideInFromRight {
  0% {
    transform: translateX(35%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right{
    animation: slideInFromRight 1.2s ease-out;
}

.slide-in {
  animation: slideInFromLeft 1.2s ease-out;
}

@keyframes fadeIn {
  0% {
    opacity: 0; /* Inicia totalmente transparente */
  }
  100% {
    opacity: 1; /* Termina totalmente visível */
  }
}

.fade-in {
  animation: fadeIn 1.5s ease-in-out; /* Duração de 1.5 segundos com suavidade */
}

/* Estilo personalizado para o select com seta branca */
.select-custom {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23ffffff' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
    text-align: center;
    text-align-last: center; /* Para centralizar no Firefox */
}