:root {
   --color-men: #34e1d2;
   --color-emo: #fcc017;
   --color-com: #5b707c;
}

.example {
   padding: 15px;
   width: 100%;
   background-color: #ffffff;
   margin-top: 50px;
}

.black-background-box {
   margin-top: 50px;
   padding: 15px;
   width: 100%;
   background-color: #000000;
}

.btn-index {
   margin-top: 50px;
   margin-bottom: 45px;
}

@font-face {
   font-family: helvetica-light;
   src: url("../helvetica-light.ttf");
}

@font-face {
   font-family: pop;
   font-style: normal;
   font-weight: bold;
   src: url("../Poppins-SemiBold.ttf");
}

@font-face {
   font-family: lulo-clean;
   src: url("../Net-Lulo-Clean-W01-One-Bold.ttf");
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

h1 {
   color: var(--color-com);
   font-family: pop;
}

h2 {
   color: var(--color-emo);
   font-family: pop;
   font-size: 2.5rem;
}

h3 {
   font-family: helvetica-light;
   color: #000000;
   font-size: 1.4rem;
}

label {
   color: var(--color-com);
}

p {
   font-family: helvetica-light;
   color: #000000;
}

li {
   font-family: helvetica-light;
   color: #000000;
}

.btn-primary {
   background-color: var(--color-emo);
   border-color: var(--color-emo);
   color: var(--color-com);
   font-family: helvetica-light;
   white-space: normal;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
   background-color: var(--color-emo) !important;
   border-color: var(--color-com) !important;
   outline-color: var(--color-com) !important;
   color: #f2f2f2 !important;
   outline: none !important;
   box-shadow: none !important;
}

.inside-btn-container {
   display: flex;
   align-items: center;
   font-size: small;
}

.form-control:focus {
   border-color: var(--color-emo);
   box-shadow: inset 0 0px 0px #5b707c, 0 0 8px --color-emo;
}

.progress {
   margin-bottom: 20px;
}

.custom-container {
   border: solid;
   border-color: #5b707c;
   background: linear-gradient(135deg, #f2f2f2 50%, --color-com);
}

.custom-container-result {
   border: solid;
   background: #ffffff;
   border-style: solid;
   border-radius: 2rem;
   border-color: gray;
   box-shadow: 5px 5px 5px 5px lightslategray;
   margin-top: 60px;
   margin-bottom: 40px;
   padding: 5%;
}

@media screen and (max-width: 600px) {
   .btn-custom {
      background-color: var(--color-emo);
      width: 110px;
      height: 60px;
      margin: 5px;
      font-size: 14px;
      font-weight: bold;
   }

   .btn-custom:hover {
      background-color: #f8d880;
      color: #f2f2f2 !important;
   }

   .button-container {
      margin-top: 10px;
      margin-bottom: 10px;
   }

   .question-text-container {
      min-height: 8rem;
      margin-bottom: 25px;
   }

   h4 {
      font-family: pop;
      color: var(--color-com);
      font-size: 1.0rem;
      font-weight: bold;
      vertical-align: middle;
   }
}

@media screen and (max-width: 3400px) and (min-width: 600px) {
   .btn-custom {
      background-color: var(--color-emo);
      width: 175px;
      height: 60px;
      margin: 10px;
      font-weight: bold;
   }

   .btn-custom:hover {
      background-color: #f8d880;
   }

   .button-container {
      margin-top: 25px;
      margin-bottom: 25px;
   }

   .question-text-container {
      min-height: 10rem;
      margin-bottom: 25px;
   }

   h4 {
      font-family: pop;
      color: var(--color-com);
      font-size: 1.2rem;
      font-weight: bold;
      vertical-align: middle;
   }
}

.custom-textarea {
   resize: none;
   font-size: large;
}

.canvas-container {
   margin: 25px;
   max-width: 700px;
   display: inline-block;
   page-break-after: always;
}

.form-range {
   width: 80%;
   height: 1.5rem;
   padding: 0;
   background-color: var(--color-emo);
   border-radius: 1rem;
   box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem --color-com;
   appearance: none;
}

.form-range::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 30px;
   height: 30px;
   background: #5b707c;
   border-radius: 50%;
   cursor: pointer;
}

.card-com {
   border-radius: 1rem;
   border-color: var(--color-com);
   box-shadow: 5px 7px var(--color-com);
}

.card-emo {
   border-radius: 1rem;
   border-color: var(--color-emo);
   box-shadow: 5px 7px #fcc017;
}

.card-men {
   border-radius: 1rem;
   border-color: var(--color-men);
   box-shadow: 5px 7px var(--color-men);
}

.card-title-text {
   margin-bottom: 35px;
   min-height: 275px;
}

.btn-cta {
   height: 120px;
}

.card-deck {
   margin-bottom: 35px;
}

.list-group {
   margin-top: 50px;
}

.row {
   margin-top: 35px;
}

.lead {
   padding: 7px;
}

.cta-phone {
   margin-left: 25%;
   margin-right: 25%;
}