.elementor-12287 .elementor-element.elementor-element-0e9cfa2{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-12287 .elementor-element.elementor-element-4c99c00{--display:flex;box-shadow:0px 6px 32px 1px rgba(0,0,0,0.5);}.elementor-12287 .elementor-element.elementor-element-4c99c00.e-con{--align-self:center;}.elementor-12287 .elementor-element.elementor-element-90113d9{width:var( --container-widget-width, 230px );max-width:230px;--container-widget-width:230px;--container-widget-flex-grow:0;}.elementor-12287 .elementor-element.elementor-element-90113d9.elementor-element{--align-self:center;}.elementor-12287 .elementor-element.elementor-element-90113d9 img{width:100%;max-width:230px;}.elementor-12287 .elementor-element.elementor-element-d053689{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-12287 .elementor-element.elementor-element-b5cb9d5{--display:flex;}.elementor-12287 .elementor-element.elementor-element-dfa0edf .elementor-heading-title{color:#171717;}.elementor-12287 .elementor-element.elementor-element-0a69bd8{--display:flex;--min-height:0vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-start;--gap:75px 75px;--row-gap:75px;--column-gap:75px;--flex-wrap:wrap;--align-content:space-between;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12287 .elementor-element.elementor-element-0a69bd8.e-con{--align-self:center;}.elementor-12287 .elementor-element.elementor-element-1d4aebb{--display:flex;--min-height:0vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:34px 34px;--row-gap:34px;--column-gap:34px;--flex-wrap:wrap;--align-content:flex-start;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12287 .elementor-element.elementor-element-1d4aebb.e-con{--align-self:center;--flex-grow:0;--flex-shrink:1;}.elementor-12287 .elementor-element.elementor-element-337ab3d{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-12287 .elementor-element.elementor-element-b19065f .elementor-button{background-color:var( --e-global-color-93f66d1 );box-shadow:0px 6px 32px 1px rgba(0,0,0,0.5);border-radius:20px 20px 20px 20px;}.elementor-12287 .elementor-element.elementor-element-b19065f .elementor-button-content-wrapper{flex-direction:row;}.elementor-12287 .elementor-element.elementor-element-b19065f .elementor-button .elementor-button-content-wrapper{gap:20px;}.elementor-12287 .elementor-element.elementor-element-707bbb2 .elementor-button{background-color:var( --e-global-color-93f66d1 );}.elementor-12287 .elementor-element.elementor-element-6aaf28f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-12287 .elementor-element.elementor-element-35a89f4{width:100%;max-width:100%;}.elementor-12287 .elementor-element.elementor-element-35a89f4 > .elementor-widget-container{margin:0% 10% 0% 10%;}.elementor-12287 .elementor-element.elementor-element-35a89f4.elementor-element{--align-self:center;--flex-grow:1;--flex-shrink:0;}@media(min-width:769px){.elementor-12287 .elementor-element.elementor-element-0e9cfa2{--content-width:600px;}.elementor-12287 .elementor-element.elementor-element-0a69bd8{--width:100%;}.elementor-12287 .elementor-element.elementor-element-1d4aebb{--width:100%;}}/* Start custom CSS for theme-site-logo, class: .elementor-element-90113d9 */.thelogo{
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.25));
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-35a89f4 */.thelayer{
    padding: 0;
      margin: 0;
      width: 100vw;

      align-items: center;
      background-color: white;
      font-family: janna-lt-w20-regular, sans-serif;
}
.thequiz{
    width: 100%;
      display: flex;
      align-items: center;

}

@font-face {
      font-display: block;
      font-family: "Janna-LT-W20-Regular";
      src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/a9c47d30-0eca-434f-8082-ac141c4c97b3.eot?#iefix");
      src: url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/a9c47d30-0eca-434f-8082-ac141c4c97b3.eot?#iefix") format("eot"), url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/26c24286-5aab-4747-81b9-54330e77fb14.woff") format("woff"), url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9c4c7fff-85b6-442f-9726-af5f49d49e53.ttf") format("truetype"), url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/a24f53ee-e15e-4931-89a3-b6f17fbfcd72.svg#a24f53ee-e15e-4931-89a3-b6f17fbfcd72") format("svg");
    }

    

    ::placeholder {
      /* Chrome, Firefox, Opera, Safari 10.1+ */
      color: gray;
      opacity: 1;
      /* Firefox */
    }

    :-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: gray;
    }

    ::-ms-input-placeholder {
      /* Microsoft Edge */
      color: gray;
    }



    .thelayer.correct {
      background-color: #FED963;
    }

    .thelayer.wrong {
      background-color: #FED963;
    }

    .container {
      max-width: 40rem;
      color: grey;
      border-radius: 0;
      padding: 10px;
      direction: rtl;
      box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.25), inset 0 4px 0 0#efedea;
      backdrop-filter: blur(6px);
      font-family: janna-lt-w20-regular, sans-serif;
    }

    #question {
      direction: rtl;
      font-size: 23px;
      font-weight: bold;
      font-family: janna-lt-w20-regular, sans-serif;
    }

    .btn-grid {
        width:50rem; 
        font-size: 18px;
        padding-right: 8%;
        
        display: grid;
  grid-template-columns: repeat( 2, 1fr );
  grid-template-rows: repeat( 2, 1fr );
    }

    .slc-grid {
      font-size: 18px;
      padding-right: 8%;
    }

    .txt-grid {
      display: grid;
      grid-Template-Columns: repeat(1, auto);
      gap: 10px;
      margin: 20px 0;

    }


    .quizbtn {
      border: 1px solid #630cd4;
      background-color: #630cd4;
      border-radius: 0;
      padding: 5px;
      color: white;
      outline: none;
      font-size: 23px;
      font-weight: bold;

      margin-top: 10px !important;
    }
    .btn-grid .quizbtn{
        height: 80% !important;
        box-shadow: 0px 6px 32px 1px rgba(0,0,0,0.5);
        transition: all .2s ease-in-out;
    }
    .btn-grid .quizbtn span{
      display: block;
      background-color: #630cd487;
      margin-top: 100%
    }

    .quizbtn:nth-child(odd) {
      right: 0;
    }

    .quizbtn:nth-child(even) {
      margin-right: 5%;
    }

    .quizbtn:hover {
      border-color: black;
    }

    .quizbtn.correct {
      /*background-color: #FED963;*/
      background-color: gray;
      color: black;
    }

    .txt.wrong {
      background-color: #FED963;
      
      color: black;
    }

    .txt {
      border: 1px solid grey;
      background-color: rgba(255, 255, 255, 0.8);
      border-radius: 0;
      padding: 5px;
      color: black;
      outline: none;
      font-size: 23px;
      font-weight: bold;
    }
    .fullname{
      display: flex;
      max-width: 200px;
    }
    .txt:hover {
      border-color: black;
    }

    .txt.correct {
      background-color: #FED963;
      color: black;
    }

    .txt.wrong {
      background-color: #FED963;
      color: black;
    }

    .slc {

      border: 1px solid #630cd4;
      background-color: #630cd4;
      border-radius: 0;
      padding: 5px;
      color: white;
      outline: none;
      font-size: 23px;
      font-weight: bold;
      width: 97%;
      margin-top: 10px;
    }

    .slc:hover {
      border-color: black;
    }

    .slc.correct {
      background-color: #FED963;
      color: black;
    }

    .slc.wrong {
      background-color: #FED963;
      color: black;
    }

    .start-btn,
    .next-btn {
      font-size: 1.5rem;
      font-weight: bold;
      padding: 0px 10px;
      width: 90%;
    }

    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .hide {
      display: none;
    }

    /* Background Styles Only */

    

    #imgs {
      background-repeat: no-repeat;
      background-size: cover;
    }


    .side-links {
      position: absolute;
      top: 15px;
      right: 15px;
    }

    .side-link {
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      margin-bottom: 10px;
      color: white;
      width: 180px;
      padding: 10px 0;
      border-radius: 0;
    }

    .side-link-youtube {
      background-color: red;
    }



    .side-link-github {
      background-color: #6e5494;
    }

    .side-link-text {
      margin-left: 10px;
      font-size: 18px;
    }

    .side-link-icon {
      color: white;
      font-size: 30px;
    }

    #imgs {
      transition-duration: 1000ms;
    }

    .note {
      color: red;
      font-size: small;
      padding: 0;
      margin-top: -8px;
      margin-right: 4px;
      gap: 0;
    }

    .float-parent {
      padding: 0;
      margin: 0;
      width: 100vw;
      align-items: center;
      background-color: white;
    }

    .float-child {
      background-size: contain;
      background-repeat: no-repeat;
      height: 100%;
      width: 50%;
      float: left;
      padding: 20px;
      border: 1px solid lightgray;
      margin: auto;
      max-height: 500px;
    }

    #question {
      width: 90%;
      padding-left: 30px;
      padding-right: 30px;
      font-size: 18px;
    }

    .descriptions {
      width: 90%;
      padding-left: 5px;
      padding-right: 5px;
      font-size: small;
      color: gray;
    }

    @media only screen and (max-width: 600px) {
      #question {
        font-size: 14px;
      }

      .slc,
      .txt,
      .quizbtn {
        font-size: 14px;
        margin: 0;
      }

      .start-btn,
      .next-btn {
        margin-top: 20px;
      }

      html,
      body {
        height: 0;
      }

      .float-parent {
        display: flex;
        float: left;
        width: 100%;
        height: 600px;
        flex-direction: column;
      }

      #imgs {
        margin: 0;
        order: 2;
        float: left;
        width: 100%;
        height: 300px;
      }

      #que {
        margin: 0;
        order: 1;
        float: left;
        width: 100%;
        height: 300px;
      }

      h2 {
        padding: 0;
      }

      .descriptions {
        font-size: 8px;
      }

      .contact{
        max-height: 23px;

        margin: 0;
        padding: 0;
        grid-gap: 0;
      }
      .contact .txt{
        max-height: 23px;
        margin: 0;
        padding: 0;
        grid-gap: 0;
      }
      .lname{
        display: none;
      }
    }

    @media only screen and (min-width: 601px) {

      .float-parent {
        justify-content: center;
        height: 500px;
        max-height: 500px;
      }

    }
    
    @media only screen and (max-width: 601px) {

.btn-grid {
        width:35rem; 
        font-size: 18px;
        padding-right: 8%;
        
        display: grid;
  grid-template-columns: repeat( 2, 1fr );
  grid-template-rows: repeat( 2, 1fr );
    }
    
    .btn-grid .quizbtn{
        height: 70% !important;
        width: 50% !important;
        margin:0;
        padding:2px;
    }
    .btn-grid .quizbtn span{
        
    }
    
    }
    
    .btn-grid .quizbtn:hover{
        transform: scale(1.05)
    }/* End custom CSS */