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

:root {
    --color_black: 0, 0, 0;
    --color_white: 255, 255, 255;
    --baseFont: 'Karla', sans-serif;

}

body {
    font-family: var(--baseFont);
    color: rgb(var(--color_black));
}

a,
a:hover,
a:focus {
    outline: none;
    text-decoration: none;
}

button:focus {
    outline: none;
}

.container{max-width: 1440px; width: 100%;}


body{

}
.pg-quiz::before {
    content: "";
    inset: 0;
    position: absolute;
    background: rgba(0,0,0,0.5);
  }
.pg-quiz{position:relative;}
#wrapper{margin: 0 auto; overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100vh;
    min-height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
}

.pg-quiz h3{
color: rgb(var(--color_white));
font-weight: 700;
font-size: clamp(0.9375rem, 0.825rem + 0.5625vw, 1.5rem);
margin-bottom: 0;
}

.pg-quiz .logo{
    width: 46vw;
    position:relative;
}
.pg-quiz h2{
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 2rem);
    font-weight: 800;
    line-height: normal;
    letter-spacing: -0.32px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.pg-quiz p{
    opacity: 0.75; line-height: 22px;  letter-spacing: -0.32px;

}
.quiz-btn{
    color: rgb(var(--color_white));
    display: inline-block;
    overflow: hidden;
    margin: 0 auto;
    margin-top: clamp(1.875rem, 1.5rem + 1.875vw, 3.75rem);
    position: relative;
    border-radius: 15px;
    width: 26.45vw;
    max-width: 400px;
    padding: clamp(0.625rem, 0.4125rem + 1.0625vw, 1.6875rem);
    border-radius: 16px;
    background: linear-gradient(180deg, #F9D279 0.5%, #ED9B46 100%);
    border: 4px solid rgb(var(--color_white));
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    box-shadow: 0 5px #ED9B46;
    transform: translateY(4px);
transition: all .1s linear;
}


.quiz-btn svg{
    filter: drop-shadow(0 0 1px rgba(var(--color_black),0.2));
}
.quiz-btn img{
    width: 26.45vw;
}

.quiz-btn span{
    color: rgb(var(--color_white));
font-family: Karla;
font-size: clamp(1rem, 0.8rem + 1vw, 2rem);
font-weight: 800;
line-height: normal;
text-transform: uppercase;
margin-left: clamp(0.625rem, 0.45rem + 0.875vw, 1.5rem);
text-shadow: 1px 1px 1px rgba(var(--color_black),0.2);
}

.quiz-btn:active{
    box-shadow: 0 0px #ED9B46;
    transform: translateY(8px);
}

/* Loader Style 16 */

.quiz-btn:before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100%;
    background-image: linear-gradient(120deg, rgba(255,255,255, 0) 30%, rgba(255,255,255, .8),rgba(255,255,255, 0) 70%);
    top: 0;
    left: -100px;
    animation: shine 3s infinite linear;
}

@keyframes shine {
    0% {left: -100px}
    20% {left: 100%}
    100% {left: 100%}
}

/* 25-11-2023*/
.pg-memory-card .logo, .pg-jigsaw-puzzle .logo{
    width: 44vw;
}
.quiz-btn.btn-green{
    background: linear-gradient(180deg, #4CD75E 0.5%, #00754A 100%);
    box-shadow: 0 5px #00754A;
}

.quiz-btn.btn-green:active{
    box-shadow: 0 0px #2CAE55;
}


.env-logo {
    position: absolute;
    left: var(--bs-gutter-x);
    top: 50%;
    transform: translateY(-50%);
}

.env-logo img{
    width: 15vw;
}


.bottom-strip .mb-2{margin-bottom: 0 !important;}
#bottom-block {background-color: rgba(var(--color_black),0.5); padding:10px 20px; border-radius: 50px;}
#bottom-block .arrows{width: 30px; height: 30px; background-color: rgba(var(--color_white),0.7); border-radius: 50%; display: flex; justify-content: center; align-items: center;
    transition: all .3s linear;
}
#bottom-block .arrows img{max-width: 40%;}
#bottom-block .icon-set{display: flex; padding: 0 1vw;}
#bottom-block .icon-set a{color: inherit;  border-radius: 10px; padding: 10px; width: 60px; height: 60px; background-color: #cbd2d1; display: flex; align-items: center; justify-content: center; flex-direction: column; font-family: var(--fontBold);
    font-size: clamp(0.5rem, 0.35rem + 0.75vw, 1.25rem);
    margin: 0 5px;
    transition: all .3s linear;
    transform: translateY(0);
}
#bottom-block .arrows:hover{
    transform: scale(1.2);
}

#bottom-block .icon-set .icon{margin-bottom: 5px;}
#bottom-block .icon-set .icon img{max-width: 25px; max-height: 25px;}
#bottom-block .icon-set .text{font-size: 8.4px; white-space: nowrap; text-transform: uppercase;}
#bottom-block .icon-set a.library{color: #eb2c19;}
#bottom-block .icon-set a.start{color: #59be67;}
#bottom-block .icon-set a.sound{color: #408fca;}
#bottom-block .icon-set a.test{color: #ff9a4d;}
#bottom-block .icon-set a.arabic{color: #df6959;}
#bottom-block .icon-set a.off{color: #60caa7;}
#bottom-block .icon-set a:hover,#bottom-block .arrows:hover{background-color: rgb(var(--color_white));}
#bottom-block .icon-set a:hover{transform: translateY(-5px);}

@media only screen and (max-width:767px){
    .logo,.pg-jigsaw-puzzle .logo{width: 75vw;}
    .quiz-btn{width: 55vw;}
 }


@media only screen and (min-width: 393px) and (max-width: 932px){
   .pg-quiz #wrapper{padding-bottom: 80px;}
   .pg-quiz .logo {width: 38vw;}
   .pg-quiz .quiz-btn{margin-top: 20px;}
}