.modulo-quiz{
  background: rgb(245,246,250);
background: linear-gradient(180deg, rgba(245,246,250,1) 15%, rgba(255,255,255,1) 15%);
}
.quiz{
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     width: 70%;
     min-height: 660px;
     height: auto;
     margin: auto;
     display: flex;
     justify-content: center;
     align-items: center;
     background: url(https://en.clear.sale/hubfs/quiz%20october/bg.png);
     box-shadow:0 0 20px 5px rgba(0,0,0,.2);
}
/* Tela Inicial */
 .start-container {
     align-items: center;
     background-size: cover;
     display: flex;
     flex-direction: column;
     justify-content: center;
     text-align: center;
     max-width: 85%;
}
 .start-container h1 {
     font-size: 45px;
     color: #ff5500;
     margin-bottom: 20px;
}
 .start-button {
     background-color: #ff5500;
     color: white;
     border: none;
     padding: 15px 30px;
     font-size: 1.2rem;
     border-radius: 10px;
     transition: background-color 0.3s ease;
}
 .start-button:hover {
     background-color: #e64500;
}
/* Tela do Quiz */
 .quiz-container {
     align-content: center;
     width: 100%;
     min-height: 660px; 
     background-color: #000; 
     border-radius: 22px;
     position: relative;
     display: none; 
}
/* --------------todos quiz header----------------- */
 .quiz-header{
     position: absolute;
     top: 30px;
     display: flex;
     justify-content: space-between;
     padding-bottom: 20px;
     z-index: 999;
}
 .quiz-header span{
     padding: 10px;
     border-radius: 10px;
     z-index: 9999;
}
 .explanation .quiz-header{
     margin-left: 30px;
}
/* --------------cores quiz header----------------- */
 .quiz-container .black-bg .quiz-header span{
     background-color: #333;
     color: #ffffff;
}
 .quiz-container .white-bg .quiz-header span{
     background-color: #e6e6e6;
     color: #333;
}
/* --------------acabou quiz header----------------- */
 .quiz-content {
     text-align: center;
     padding: 30px;
}
 .quiz-content h1 {
     font-size: 2.5rem;
     color: #ff5500;
     margin-bottom: 20px;
}
 .options-grid {
     display: grid;
     gap: 20px;
     margin-top: 20px;
     max-width: 80%;
     margin: auto;
}
 .multiple-grid{
     grid-template-columns: repeat(4, 1fr);
}
 .three-grid{
     grid-template-columns: repeat(3, 1fr);
}
 .two-grid{
     grid-template-columns: repeat(2, 1fr);
}
 .black-bg .option {
     background-color: #333;
     color: white;
     padding: 20px;
     border-radius: 10px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     text-align: left;
}
 .white-bg .option {
     background-color:#e6e6e6;
     color: #000;
     padding: 20px;
     border-radius: 10px;
     cursor: pointer;
     transition: background-color 0.3s ease;
     text-align: left;
}
 .option:hover {
     background-color: #444;
}
/* Estilo para a tela de Contato */
.contact-container-es,
 .contact-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
}
 .quiz-screen h3{
     color: #ff4800;
     max-width: 60%;
     margin: auto;
}
.contact-container-es h1,
 .contact-container h1 {
     font-size: 2rem;
     color: #ff5500;
     margin-bottom: 20px;
}
 .quiz-screen .left-black{
     background-color: #1d1d1d;
}
 .quiz-screen .left-white{
     background-color: #fff;
}
/* .quiz-screen .right{
     background-color: #fff;
}
 */
.contact-container-es p,
 .contact-container p {
     font-size: 1.2rem;
     color: #333;
}
/* Animação de piscar para destacar a resposta correta */
 @keyframes blink {
     0% {
         background-color: #ff5500;
    }
     50% {
         background-color: #ff480075;
    }
     100% {
         background-color: #ff5500;
    }
}
 .blink {
     animation: blink 1s infinite;
}
/* Tela de Resposta Correta */
 #correct-answer-screen {
     text-align: center;
}
/* BOTÃO START */
 .quiz button {
     --primary-color: #f50;
     --secondary-color: #fff;
     --hover-color: #c1490c;
     --arrow-width: 10px;
     --arrow-stroke: 2px;
     align-items: center;
     background: var(--primary-color);
     border: 0;
     border-radius: 5px;
     box-sizing: border-box;
     color: var(--secondary-color);
     display: flex;
     font-weight: 700;
     gap: .6em;
     justify-content: space-between;
     padding: 1em 1.8em;
     transition: background .2s;
     width: 50%;
}
 button #next-bnt {
     width: 29%;
    /* float: inline-end;
     */
     bottom: 38px;
     right: 24px;
     position: absolute;
}
 .quiz button .arrow-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .quiz button .arrow {
     margin-top: 1px;
     width: var(--arrow-width);
     background: var(--primary-color);
     height: var(--arrow-stroke);
     position: relative;
     transition: 0.2s;
}
 .quiz button .arrow::before {
     content: "";
     box-sizing: border-box;
     position: absolute;
     border: solid var(--secondary-color);
     border-width: 0 var(--arrow-stroke) var(--arrow-stroke) 0;
     display: inline-block;
     top: -3px;
     right: 3px;
     transition: 0.2s;
     padding: 3px;
     transform: rotate(-45deg);
}
 .quiz button:hover {
     background-color: var(--hover-color);
     cursor: pointer;
}
 .quiz button:hover .arrow {
     background: var(--secondary-color);
}
 .quiz button:hover .arrow:before {
     right: 0;
}
/* --------RESPOSTAS------- */
 .explanation{ 
     overflow: hidden;
     width: 100%;
     min-height: 660px;
     height: 100%;
     position: relative;
     border-radius: 16px;
}

.explanation .correct{
  position: absolute;
      right: 10px;
    top: 20px;
}
 .explanation .texto{
     min-height: 660px;
     height: 100%;
    /* margin-left: 15px;
     */
}
 .black-bg p{
     font-size: 14px;
     font-family: Montserrat;
     font-weight: 500;
     line-height: 24px;
}
 .black-bg .left-black p{
     color:#fff;
}
 .black-bg .right-white p{
     color:#58585C;
}
 .white-bg .right-black p{
     color:#fff;
}
 .explanation .left-white .title, .explanation .left-black .title{
     align-self: stretch;
     color: #FF4800;
     font-size: 32px;
     font-family: Montserrat;
     font-weight: 700;
     line-height: 48px;
     word-wrap: break-word;
}
/*  .explanation .next-question{
    /*igual no fundo branco e no fundo preto*
     width: 264px;
     padding-top: 8px;
     padding-bottom: 8px;
     padding-left: 24px;
     padding-right: 12px;
     left: 32px;
     top: 608px;
     position: absolute;
     background: #FF4800;
     border-radius: 8px;
     justify-content: space-between;
     align-items: center;
     display: flex;
} */
 .explanation .conteudo {
       padding-top: 50px;
     margin: auto;
     height: 100%;
     width: 80%;
     display: flex;
     justify-content: center;
     flex-direction: column;
     gap: 10px;
}
 .black-bg .conteudo .cta{ 
     padding: 8px 22px;
     font-family: montserrat, sans-serif;
     color: #fff;
     border: 2px solid #414143;
     border-radius: 8px;
     justify-content: space-between;
     align-items: center;
     display: flex;
}
 .conteudo .cta{
     transition: all 0.5s ease;
}
 .conteudo .cta:hover{
     box-shadow: 2px 2px 2px 0px #ff4800;
     cursor: pointer;
}
 .black-bg .conteudo .cta p{
     margin: 0;
     color: #FFF;
}
 .white-bg .conteudo .cta{
     padding: 8px 22px;
     font-family: montserrat, sans-serif;
     border: 2px solid #e6e6e6;
     border-radius: 8px;
     justify-content: space-between;
     align-items: center;
     display: flex;
}
 .white-bg .conteudo .cta p{
     margin: 0;
     color: #000;
}
 .explanation .conteudo .cta .arrow-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .black-bg .conteudo .cta .arrow::before {
     content: "";
     box-sizing: border-box;
     border: solid #e6e6e6;
     border-width: 0 2px 2px 0;
     display: inline-block;
     top: -3px;
     right: 3px;
     transition: 0.2s;
     padding: 3px;
     transform: rotate(-45deg);
}
 .white-bg .conteudo .cta .arrow::before {
     content: "";
     box-sizing: border-box;
     border: solid #e6e6e6;
     border-width: 0 2px 2px 0;
     display: inline-block;
     top: -3px;
     right: 3px;
     transition: 0.2s;
     padding: 3px;
     transform: rotate(-45deg);
}
 .explanation .right-white{
     background: #cecfd6;
     background: linear-gradient(180deg, #fff, #e5e5e5);
     font-family: Montserrat, sans-serif;
     display: flex;
     gap: 0px;
     flex-direction: column;
     padding: 90px 30px;
     justify-content: flex-end;
}
 .explanation .right-black{
     background: linear-gradient(180deg, #141414, #000);
     font-family: Montserrat, sans-serif;
     display: flex;
     gap: 0px;
     flex-direction: column;
     padding: 90px 30px;
     justify-content: flex-end;
}
/* .explanation .icons-right{
     font-size: 13px;
     font-weight: 400;
     line-height: 24px;
     width: 264px;
     word-wrap: break-word;
}
 */
 .explanation hr{
     border: 1px solid #CECFD6;
     width: 100%;
}
 .explanation h5{
     margin: 0;
     font-size: 20px;
     color: #ff4800;
}
 .explanation .icons-right .share-icons{
     padding-left: 8px;
     padding-right: 8px;
     padding-top: 4px;
     padding-bottom: 4px;
     left: 32px;
     top: 472px;
     border-radius: 8px;
     justify-content: flex-start;
     align-items: center;
     gap: 8px;
     display: inline-flex;
}
 .right-white .icons-right .share-icons{
     background: #F1F2FA;
}
 .right-black .icons-right .share-icons{
     background: #3A3A3D;
}

 .explanation .icons-right .share-icons .arrow{
     width: 16px;
     height: 16px;
     justify-content: center;
     align-items: center;
     display: flex 
}
 .explanation .icons-right .share-icons .fb{
     width: 16px;
     height: 16px;
     justify-content: center;
     align-items: center;
     display: flex 
}
 .explanation .icons-right .share-icons .fb:hover{

}
 .explanation .share-icons a{
    height: inherit;
}
 .explanation .icons-right .share-icons .x{
     width: 16px;
     height: 16px;
     padding-top: 2px;
     padding-bottom: 2.01px;
     padding-left: 2.15px;
     padding-right: 2px;
     justify-content: center;
     align-items: center;
     display: flex 
}
 .explanation .icons-right .share-icons .linkedin{
     width: 16px;
     height: 16px;
     justify-content: center;
     align-items: center;
     display: flex 
}
 .explanation .next-question .arrow-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
}
 .explanation .items{
     align-self: stretch;
     height: auto;
     flex-direction: column;
     justify-content: flex-start;
     align-items: flex-start;
     display: flex;
}
 .explanation .item{
     align-self: stretch;
     padding: 4px 8px;
     background: radial-gradient(133% 72.62% at 0% 61.65%, #3A3A3D 0%, rgba(155.24, 155.24, 163.20, 0) 82%);
     border-radius: 4px;
     width: fit-content;
}
 .explanation .items .item p{
     color:#fff;
     margin: 0;
}
 .quiz-container .finish-btn, .quiz-container .next-btn{
    /* display: block;
     */
     position: absolute;
     width: 28%;
     right: 2%;
     bottom: 5%;
}
/* ----------- QUESTION 2 --------------- */
 .quiz-container .white-bg{
     background-color: #fff;
     align-content: center;
     border-radius: 15px;
     display: none;
     min-height: 660px;
     position: relative;
     width: 100%;
}
/* ultimo frame */
 .contact-container{
     background: url(https://en.clear.sale/hubfs/quiz%20october/bg-contact-1.png);
}
.contact-container-es,
 .contact-container{
     min-height: 660px;
     background-repeat: no-repeat;
     background-position: right bottom;
    /* display: flex;
     */
}

.contact-container-es{
     background: url(https://en.clear.sale/hubfs/quiz%20october/fondo-es.png);
     background-repeat: no-repeat;
     background-position: right bottom;
      background-size: 25%;
  
}
 .contact-container-es p,
 .contact-container p{
     color: #fff;
     margin: 30px;
}
 .contact-container-es .results .item,
 .contact-container .results .item{
     backdrop-filter: blur(5px);
     background-color: hsla(0, 0%, 100%, .32);
     border-radius: 20px;
     display: flex;
     padding: 30px;
     flex-direction: column;
     align-items: flex-start;
     justify-content: space-evenly;
}
.contact-container-es .results .item img,
 .contact-container .results .item img{
     margin-bottom: 3rem;
}
.contact-container-es .results .item h1,
 .contact-container .results .item h1{
     color: #fff;
}
.contact-container-es .results .item h2,
 .contact-container .results .item h2{
     text-align: left;
     color: #fff;
     font-size: 50px;
     margin: 0;
}
.contact-container-es .results .item p,
 .contact-container .results .item p{
     text-align: left;
     color: #fff;
     font-size: 14px;
     margin: 0;
}
.contact-container-es a,
 .contact-container a{
   width: 100%; 
    justify-items: center;
}
 @media (max-width: 600px) {
     .quiz {
         border-radius: 0px;
         background: linear-gradient(180deg, #141414, #000);
         width: 100%;
         box-shadow: none;
    }
   .quiz,
   .quiz-container,
   .quiz-container .white-bg,
   .explanation .texto{
         min-height: 530px;
   }
   
     .quiz-container {
         border-radius: 0px;
    }
     .start-container h1 {
         font-size: 35px;
         line-height: 1.2;
    }
     .options-grid {
         display: flex;
         gap: 10px;
         flex-direction: column;
    }
     .quiz-header{
         display: none;
    }
     .explanation .conteudo {
         display: flex;
         padding: 30px;
         flex-direction: column;
         gap: 10px;
         margin: 0;
         width: 100%;
    }
     .quiz-content h1 {
         margin: 0 0 20px 0;
    }
     .explanation .right-black, .explanation .right-white{
         padding: 30px;
    }
     .icons-right{
         display: none;
    }
     .explanation hr {
         display: none;
         border: none;
    }
     .quiz-container .finish-btn, .quiz-container .next-btn {
         bottom: 3%;
         width: 50%;
    }
     .explanation{
         border-radius: 0px;
    } 
   .quiz-container .white-bg { 
    border-radius: 0px;
   }
   .explanation .right-black { 
     display: flex;  
     padding: 0 30px 30px;
   }
   .explanation .texto { 
   height: 100%;
   } 
   .contact-container-es .results .item img,
   .contact-container .results .item img{
    display: none; 
   }
   .contact-container {
    background: #050505;
   }
   .contact-container .results .item { 
    padding: 10px;
    flex-direction: row;
    align-items: center;
}
   .contact-container .results .item p { 
    max-width: 80%;
   }
   .contact-container .results .item h2 {
    font-size: 26px;
   }
   .explanation .correct{ 
     display: none;
}
}