@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caprasimo&display=swap');

:root {
   --primary: rgba(110, 75, 58, 1);
   --secondary: rgba(252, 233, 177, 1);
}

body {
   font-family: "Red Hat Display", sans-serif !important;
   line-height: 1.2 !important;
}


.ff-caprasimo {
   font-family: "Caprasimo", serif !important;
   font-weight: 400 !important;
   font-style: normal !important;
}

.cursor-pointer {
   cursor: pointer;
}

.logo {
   position: absolute;
   top: 30px;
   left: 50%;
   transform: translate(-50%, 0);
}

.bg-banner-form {
   background-image: url('./../img/background-form-desktop.webp');
   height: auto;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

   .bg-form {
      background-color: rgba(255, 255, 255, 0.84);
      border-radius: 25px;

      label {
         color: var(--primary) !important;
      }

      #btnSend {
         border-radius: 10px;
      }

      input[type="file"] {
         color: var(--primary);
         vertical-align: middle;

         &::before {
            content: "\F42A";
            font-family: 'bootstrap-icons';
            font-size: 20px;
            vertical-align: middle;
            margin-right: 16px;
         }
      }

      input[type="file"]::-webkit-file-upload-button {
         color: var(--primary);
         ;
         background-color: #fff;
         border: none;
         padding: 5px 15px;
         border-radius: 4px;
      }

      input[type="file"]::file-selector-button {
         color: var(--primary);
         background-color: #fff;
         border: none;
         padding: 5px 15px;
         border-radius: 4px;
      }
   }
}

.how-is-1000-de-pan {
   position: absolute;
   bottom: 3rem;
   right: 0;
   width: 52%;
}

.bg-decoration {
   background-image: url('../img/decoracion.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
}

.thanks-panaderos {
   position: absolute;
   top: 50%;
   right: 0;
   width: 47%;
   transform: translate(0, -50%);
}

.modal-content {
   background-color: rgba(253, 246, 227, 1);
}

@media screen and (max-width: 768px) {
   .logo {
      width: 120px;
      top: 15px;
   }

   .initial-video {
      height: auto;
   }

   .bg-banner-form {
      background-image: url('./../img/background-form-mobile.webp');
   }

   .how-is-1000-de-pan {
      position: initial;
      width: 100%;
   }

   .thanks-panaderos {
      background-color: rgba(183, 121, 86, 1);
      position: initial;
      width: 100%;
      padding-top: 1rem;
      padding-bottom: 1rem;
      transform: none;
   }
}

/* Bootstrap */
.text-primary {
   color: var(--primary) !important;
}

.bg-primary {
   background-color: var(--primary) !important;
}

.btn-primary {
   background-color: var(--primary) !important;
   border-color: var(--primary) !important;
   color: #fff !important;
}

.bg-secondary {
   background-color: var(--secondary) !important;
}