@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

@font-face {
    font-family: 'Omnes';
    src: url('../fonts/Omnes.eot');
    src: url('../fonts/Omnes.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Omnes.woff2') format('woff2'),
        url('../fonts/Omnes.woff') format('woff'),
        url('../fonts/Omnes.ttf') format('truetype'),
        url('../fonts/Omnes.svg#Omnes') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Omnes Medium';
    src: url('../fonts/Omnes-Medium.eot');
    src: url('../fonts/Omnes-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Omnes-Medium.woff2') format('woff2'),
        url('../fonts/Omnes-Medium.woff') format('woff'),
        url('../fonts/Omnes-Medium.ttf') format('truetype'),
        url('../fonts/Omnes-Medium.svg#Omnes-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Omnes Bold';
    src: url('../fonts/Omnes-Bold.eot');
    src: url('../fonts/Omnes-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Omnes-Bold.woff2') format('woff2'),
        url('../fonts/Omnes-Bold.woff') format('woff'),
        url('../fonts/Omnes-Bold.ttf') format('truetype'),
        url('../fonts/Omnes-Bold.svg#Omnes-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary1: 0, 127, 199;  /*  #007fc7; */
    --primary2: 35, 35, 35; /* #232323; */
    --primary3: 255, 130, 0; /* #ff8200; */
    --primary4: 115, 194, 124; /* #73C27C; */
    --primary5: 0, 128, 84; /* #008054; */
    --primary6: 242, 145, 0; /* #f29100; */
    --primary7: 19, 75, 57; /* #134b39; */
    --color_black: 0, 0, 0;
    --color_white: 255, 255, 255;
    --baseFont: 'Omnes', sans-serif;
    --fontMedium: 'Omnes Medium', sans-serif;
    --fontBold: 'Omnes Bold', sans-serif;
    --imgPrimary1: invert(30%) sepia(90%) saturate(940%) hue-rotate(171deg) brightness(106%) contrast(106%);
    --imgPrimary2: invert(8%) sepia(0%) saturate(1357%) hue-rotate(136deg) brightness(95%) contrast(86%);
    --imgWhite:invert(100%) sepia(4%) saturate(21%) hue-rotate(265deg) brightness(107%) contrast(100%);

}

.color-primary1{
    color: rgb(var(--primary1));
}
.color-primary2{
    color: rgb(var(--primary2));
}
.bg-primary1{
    color: rgb(var(--primary1));
}
.bg-primary2{
    color: rgb(var(--primary2));
}

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

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

button:focus {
    outline: none;
}

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

}

body{
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    position: relative;
    background-attachment: fixed;
}
body::after{
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(var(--color_black),0.8);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

#wrapper {
    padding: 2vw 2vw 2vw 1vw;
    height: auto;
    min-height: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}

#wrapper::before,
#wrapper::after {
    content: "";
    background-color: rgb(var(--color_white));
    display: block;
    position: absolute;
}

#wrapper::before {
    width: calc(100% - 2.7vw);
    height: 1px;
    left: 2vw;
    bottom: 1vw;
}

#wrapper::after {
    height: calc(100% - 3vw);
    width: 1px;
    right: 10px;
    top: 2vw;
}
#wrappe1::after {
    content: "";
    background-image: url('../images/box-bg.png');
    background-size: cover;
    background-position: right bottom;
    display: block;
    position: absolute;
    left: 1vw;
    top: 4vw;
    width: calc(100% - 1vw);
    height: calc(100% - 4vw);
    z-index: 0;
}

.first-container{height: 100%;}
.first-container .row{height1: 100%;}
.first-container .row .col-6{height1: 100%;}
.first-container .row .item.first,.first-container .row .item.second{}
.first-container .row .item.first{margin-bottom: 20px;}
.first-container .row .item.first.full{height: calc(100% - 10vh); margin: 5vh 0 0; position: relative;}


.page05 .first-container .row .item.first.full{height: auto;}
.page02 .pic-outer{height: auto;}
.page15 .carousel-inner .pic.style02 .zoom, .pic.style02 .zoom{color: rgb(var(--color_white));}
.page15 .style02 .carousel-inner .pic .zoom .icon{filter: var(--imgWhite);}

.question-block{padding-left: 3.5vw;}
.question-block .msg{padding-left: 0;}
.question-block form{padding-left: 2vw;}

.page21 .match-game ul.list01{width: 50%; margin-right: auto;}
.page21 .match-game ul.list02{width: 35%; margin-left: auto;}
.page21 .match-game ul.list01 li,.page21 .match-game ul.list02 li{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);}

.mCSB_scrollTools .mCSB_draggerRail{background-color: transparent;}

.first-container .row .item.second1{height: 40%;}
.first-container .row .item.third{height: 100%; }

.bg01{background-color: rgba(var(--primary1),0.5); color: white;}
.bg02{background-color: rgba(var(--color_black),0.7);}
.bg03{padding: 2vw 1.5vw; color: rgb(var(--color_white)); background-color: rgba(var(--primary3),0.5);}
.bg04{padding: 2vw 1.5vw; color: rgb(var(--color_white)); background-color: rgba(var(--primary4),0.5);}
.bg05{padding: 2vw 1.5vw; color: rgb(var(--color_white)); background-color: rgba(var(--primary5),0.5) !important;}
.bg06{padding: 2vw 1.5vw; color: rgb(var(--color_white)); background-color: rgba(var(--primary6),0.5) !important;}

.bg-large{padding-bottom: 4vw;}

.page23 .item.first.content .bg04{ padding-bottom: 5vw;}

.special-bg03{height: auto;}
.page24-bg{padding-bottom: 4vw !important;}
.special-bg03 .match-game.font-large ul li{font-size:clamp(1.375rem, 1.15rem + 1.125vw, 2.5rem); margin-bottom: 15px;}
.special-bg03 .match-game ul.list01 li::after{width: 28px; height: 28px; margin-left: 15px;}
.special-bg03 .match-game ul.list02 li::before{width: 28px; height: 28px; margin-right: 15px;}
.page19-ar .special-bg03 .match-game.font-large ul li{font-size: clamp(1.125rem, 0.9125rem + 1.0625vw, 2.1875rem);}
.special-bg03 .match-game.font-medium ul li{font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem); margin-bottom: 30px;}
.page16 .match-game.font-medium ul li{font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem); margin-bottom: 15px;}
/* .page12-ar .match-game ul.list01{width: 65%;}
.page12-ar .match-game ul.list02{width: 25%;} */

.first-container.style02 .row .item.first{height1: calc(60% - 20px);}
.first-container.style02 .row .item.second{height1: 25%;}

.first-container.style02 .map-wrap{position: relative; width: 10vh; height: 18vh; left: 0; top:0;}

.page07 .first-container .row .item.first{height: calc(100% - 20px); background-color: rgba(var(--color_black),0.7);}
.page07 .carousel-control-prev-icon::before,.page07 .carousel-control-next-icon::before{color: rgb(var(--color_white));}
.page07 .carousel-inner .pic .zoom .icon{filter: var(--imgWhite);}
.page07 .carousel-inner .pic{margin-bottom: 0;}

.paris-pic.pic.style02 .zoom{color: rgb(var(--color_white));}
.paris-pic.pic.style02 .zoom .icon{filter: var(--imgWhite);}

.bg01{ padding: 2vw 1.5vw; color: rgb(var(--color_white));}


.gas-wrap{width: 40%; position: relative; display: flex; margin-left: auto;}
.gas-wrap div{position: absolute; }
.gas-wrap div img{width: 2.5vw;}
.gas-wrap .one{top: 0; right: 23%; }
.gas-wrap .two{top: 15%; right: 44%;}
.gas-wrap .three{top: 40%; right: 65%; }
.gas-wrap .four{top: 60%; right: 30%;}
.gas-wrap .five{top: 40%; right: 8%;}

.map-wrap{width: 40vh; height: 35vh; position: relative; }
.gas-wrap {
    width: 250px;
    position: relative;
}

.title{
    margin-bottom: 8px;
}
.title .icon{
    margin-right: 1vw;
    width: 3.5vw;

}

.title .icon.style02{
    margin-right: 10px;
    width:3.5vw;
}

.title .icon.style03{
    margin-right: 10px;
    width:  1.8vw;
}


h2{
    font-size: clamp(0.5rem, 0.35rem + 0.75vw, 1.25rem);
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(var(--color_white));
    text-transform: uppercase;
    font-family: var(--fontMedium);
    letter-spacing: 1px;
    margin-bottom: 8px;
    width: 100%;
}

h2 .small{text-transform: none;}

h2.large{
    font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);
}

.letter-space{
    letter-spacing: 1px;
}

.content p{font-size: clamp(1rem, -0.0096rem + 1.1538vw, 1.375rem); margin-bottom: 1rem; line-height: 1.3 !important;}

.content ul li {font-size: clamp(1rem, -0.0096rem + 1.1538vw, 1.375rem); list-style: none; line-height: 1.3 !important; margin-bottom: 1rem;  }

.msg{padding-left: 4vw; margin-bottom: 1rem !important;}

form .form-check{margin-bottom: 15px;}
.pagination{padding-left: 4vw;}
.pagination li{border-radius: 0; margin-right: 5px;}
.pagination li .page-link{border-radius: 0 !important; line-height: normal; color: #191c1e; border: none; font-family: var(--fontMedium); font-size: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);}
.pagination li .page-link:focus{background-color: rgba(var(--color_white),1); box-shadow: none;}
.pagination li.active .page-link{background-color: rgba(var(--color_white),0.5); }

form{padding: 1vw;}


form .form-check{
    padding-left: 0;
    margin-bottom: 8px;
    line-height: clamp(0.5rem, 0.35rem + 0.60vw, 1.15rem);
    min-height: auto;
}
form .form-check:last-child{margin-bottom: 0;}


.form-check-input {
    border-color: #837d7d;
    background-color:#837d7d;
    box-shadow: none;
  }

.has-white .form-check-input{
    border-color: rgba(var(--color_white),0.5);
    background-color:rgba(var(--color_white),0.5);
}

.has-white .form-check-input:checked{
    background-color: #0d6efd;
    border-color: #0d6efd;
}
  .bg02{padding:2vw 1.5vw; color: rgb(var(--color_white));}

  .pic{color: rgb(var(--color_white)); text-decoration: none; font-size1: 0.8vw; margin-bottom:30px; position: relative;}
  .pic .zoom{position: absolute; right: 8px; top: 8px; display: flex; align-items: center;  z-index: 2;}
  .pic .zoom .icon{background-image: url('../images/zoom.png'); background-repeat: no-repeat; width: 1.2vw; height: 1.2vw; background-size: cover; display: block; margin-right: 5px;
    filter: var(--imgWhite);
}

.pic .zoom.only-icon{left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align: center; justify-content: center;}
.pic .zoom.only-icon .icon{width: 5vw; height: 5vw;}
.pic.style02 .zoom.only-icon{left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align: center; justify-content: center;}

.pic.style02 .zoom{top: auto; bottom: 8px;}

.pic.blue-color .zoom{color: rgb(var(--primary1));}
.pic.blue-color .zoom .icon{filter: var(--imgPrimary1);}
.pic.white-color .zoom{color: rgb(var(--color_white));}
.pic.white-color .zoom .icon{filter: var(--imgWhite) !important;}

.pic-outer{width: 100%; height: auto;}
.pic-outer img{height: inherit;}
/* .page01 .pic .zoom{left: 0; right: 0; top: 0; bottom: 0; margin: auto; text-align: center; justify-content: center;}  */


   .next-link,.prev-link {
    font-size: 1vw;
    text-transform: uppercase;
    font-family: var(--fontMedium);
    color: rgb(var(--color_white));
}

.page15 .first-container{height: auto;}

.form-check-input{margin-top: 0.08em; font-size: clamp(0.5rem, 0.35rem + 0.60vw, 1.15rem);
    width: 1.4em; height: 1.4em;
}

.fancybox-close{background-position: -3px 0;}

.prev-link{margin-right: 10px;}

.env-logo {
    /* padding-top: calc(var(--bs-gutter-x) * .25);
    padding-bottom: calc(var(--bs-gutter-x) * .5); */

    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);

}
.pg-welcome .env-logo, .pg-quiz .env-logo{
    left: calc(var(--bs-gutter-x) / 2);
}

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

p.dropdown-toggle{cursor: pointer;}
.dropdown-toggle a{transition: all .3s linear; position: relative; right: -10px;}
.dropdown-toggle:hover a{right: -20px; }
.dropdown-toggle::after{display: none;}
.dropdown-menu{background-color: transparent !important; color: rgb(var(--color_white)); padding: 0; border: none; top: -8px !important;}
.message-block{margin-top: 8vh;}
.message-block p:first-child{font-family: var(--fontMedium);}


.accordion-item:first-of-type,.accordion-item:last-of-type{border-radius: 0;}
.accordion-item{ background-color: rgba(var(--primary1),0.5); border: none; margin-top: 1rem;}
.accordion-item img{margin-right: 1vw; width: 2.5vw;}
.accordion-header{background: transparent; border: none; border-radius: 0; padding: 0;}
.accordion-header .accordion-button{border: none; box-shadow: none; background: transparent; border-radius: 0; font-size: inherit; text-transform: uppercase; min-height: 70px;}
.accordion-button::after{filter: var(--imgWhite); margin-top: auto;}

.accordion-header p{text-transform: none; font-family: var(--baseFont);}

.accordion-body{padding:0 3vw 2vw 3.5vw;}

.carousel-control-next, .carousel-control-prev{opacity: 1; width: 6%; background-color: none;}
.carousel-control-next-icon,.carousel-control-prev-icon{background-image: none;}
.carousel-control-prev-icon::before,.carousel-control-next-icon::before{font-family: "bootstrap-icons"; color: rgba(var(--primary1),0.6);}
.carousel-control-prev-icon::before{content: "\F284";}
.carousel-control-next-icon::before{content: "\F285";}

.carousel-inner .pic.style02 .zoom, .pic.style02 .zoom{color: rgb(var(--primary1));}
.carousel-inner .pic .zoom .icon,.pic.style02 .zoom .icon{filter: var(--imgPrimary1);}

.style02 .carousel-inner .pic .zoom .icon{filter: var(--imgWhite);}
.style02 .carousel-control-prev-icon::before,.style02 .carousel-control-next-icon::before{color: rgb(var(--color_white));}

.style03 .carousel-control-prev{right: 40px; bottom: 40px; left: auto; top: auto; z-index: 3;}
.style03 .carousel-control-next{right: 0; bottom: 40px; left: auto; top: auto; z-index: 3;}
.style03 .carousel-control-prev-icon::before,.style03 .carousel-control-next-icon::before{color:rgb(var(--color_white))}

.first-container.style02 .carousel-control-prev-icon::before,.first-container.style02 .carousel-control-next-icon::before{color: rgba(var(--color_white),0.6);}
.first-container.style02 .carousel-inner .pic.style02 .zoom{color: rgb(var(--color_white));}
.first-container.style02 .carousel-inner .pic .zoom .icon{filter: var(--imgWhite);}

.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: 40px; height: 40px; 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 .icon-set{display: flex; padding: 0 1vw;}
#bottom-block .icon-set a{color: inherit;  border-radius: 20px; 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);}
.bottom-block {display:none;}
.carousel-small .pic-outer{height: auto;}
.carousel-medium .pic-outer{height: auto;}

.page21 .bg05.content.left-block{height: 100%;}


#KnowledgeSlider .carousel-indicators [data-bs-target]{border-radius: 0 !important; text-indent:0; opacity: 1; font-size: 18px; line-height: 30px; height: 30px; width: 30px; padding: 0; color: #191c1e; border: none; font-family: var(--fontMedium); }
#KnowledgeSlider .carousel-indicators .active{ opacity: 1; background-color: rgba(var(--color_white),0.5);}
#KnowledgeSlider .carousel-indicators{justify-content: flex-start; padding-left: 4vw; position: relative; margin: 0 0 1rem;}
#KnowledgeSlider{}

ol li{margin-bottom: 0.5rem;}
ol li:last-child{margin-bottom: 0;}

.match-game ul{margin: 0; padding: 0; list-style: none;}
.match-game ul li{position: relative; font-size:clamp(0.5rem, 0.35rem + 0.75vw, 1.25rem);}
.match-game ul.list01 li{text-align: right;}
.match-game ul.list01 li::after1{content: ""; background-image: url('../images/bullet-point.png'); background-repeat: no-repeat; background-position: 0 0; width: 18px; height: 18px; background-size: cover; display: inline-block; margin-left: 5px; vertical-align: middle;}
.match-game ul.list02 li::before1{content: ""; background-image: url('../images/bullet-point.png'); background-repeat: no-repeat; background-position: 0 0; width: 18px; height: 18px; background-size: cover; display: inline-block; margin-right: 5px; vertical-align: middle;}

form .form-check{position: relative; display: flex; align-items: center;}
.form-check-input[type=radio]{border-radius: 15%;}
form .form-check .form-check-label{margin-left: 5px;}
.form-check .form-check-label-correct, .form-check-label-correct2, .form-check-label-correct3, .form-check-label-correct4, .form-check-label-correct5{ color: green; font-family: var(--fontBold); margin-left: 5px; font-size: clamp(0.5rem, 0.35rem + 0.75vw, 1.25rem);}
.form-check .form-check-label-wrong, .form-check-label-wrong2, .form-check-label-wrong3, .form-check-label-wrong4, .form-check-label-wrong5{ color: red; font-family: var(--fontBold); margin-left: 5px; font-size: clamp(0.5rem, 0.35rem + 0.75vw, 1.25rem);}

.page09 .pic-outer{height: auto;}
.page09 .pic{margin-bottom: 0;}

.pic-outer.large{height: auto;}
.pic-outer.xl-large{height: auto;}

.page11 .first-container .row .item.first{height: calc(100% - 20px); background-color: rgba(var(--color_black),0.7);}
.page11 .carousel-control-prev-icon::before,.page11 .carousel-control-next-icon::before{color: rgb(var(--color_white));}
.page11 .carousel-inner .pic .zoom .icon{filter: var(--imgWhite);}
.page11 .carousel-inner .pic{margin-bottom: 0;}

.match-game.font-large ul li{font-size: clamp(1.125rem, 1.05rem + 0.375vw, 1.5rem);}

.page13 .first-container .row .item.first{height: calc(100% - 20px); background-color: rgba(var(--color_black),0.7);}
.page13 .carousel-control-prev-icon::before,.page13 .carousel-control-next-icon::before{color: rgb(var(--color_white));}
.page13 .carousel-inner .pic .zoom .icon{filter: var(--imgWhite);}
.page13 .carousel-inner .pic{margin-bottom: 0;}

.block-item{padding: 2vw; display: flex; flex-direction: column; height: 100%;}
.extra-space{padding-bottom: 4vw;}
.item-one{background-color: rgba(0,255,0,0.45);}
.item-two{background-color: rgba(0,128,84,0.45);}
.item-three{background-color: rgba(0,127,199,0.45);}
.item-four{background-color: rgba(242,145,0,0.45);}
.block-item .icon-wrap{height: 80px; margin:0 0 20px; display: flex; justify-content: center; align-items: center; width: 100%;}
.block-item .icon-wrap img{max-width: 80px; max-height: 80px; margin: auto auto 0; width: auto;}


.has-video .fancybox-inner {padding-top: 56.25%;}
.has-video .fancybox-inner iframe{position: absolute; left: 0; top: 0;}

#cust-tabs{border: none; justify-content: end; position: absolute; right: 1vw; bottom: 1vw;}
#cust-tabs li{position: relative;}
#cust-tabs li button{border-radius: 0; background-color: transparent; border: none; color: rgb(var(--color_white)); text-transform: uppercase; font-size: 28px;}
#cust-tabs li:first-child::after{content: ""; width: 1px; height: 15px; background-color: rgb(var(--color_white));
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

}
#cust-tabs li button.active{font-family: var(--fontMedium);}

.title.position-absolute{left: 1vw; top: 1vw; width: calc(100% - 2vw); z-index: 2;}
.accordion.style02 .accordion-body{padding-left: 2vw;}

.left-text{margin-left: 35px;}
.right-text{margin-left: -35px;}

/* @media only screen
and (min-device-width: 1114px)
and (max-device-height: 705px)
and (orientation : landscape)
{
    h2{font-size: 12px;}
    .content p,ol li{font-size: 12px;}
}


@media only screen and (min-width: 993px) and (max-width: 1024px) and (orientation: landscape){
    h2{font-size: 12px;}
    .content p,ol li{font-size: 12px;}
}

@media only screen and (max-width: 800px) and (orientation : portrait) {
    h2{font-size: 12px;}
    .content p,ol li{font-size: 12px;}
}

@media
  (min-device-width: 800px)
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .pic-outer{height: 50vh;}
    h2{ font-size: 16px;}
    .title{margin-bottom: 10px;}
    .content p{font-size: 16px; margin-bottom: 15px;}
    form .form-check .form-check-label{font-size: 16px; vertical-align: middle;}
    ol li{font-size: 16px;}
}

@media only screen
and (min-device-width: 1138px)
and (max-device-height: 712px)
and (orientation : landscape)
{
    form .form-check .form-check-label{font-size: 15px;}
    .content p{font-size: 15px;}
    h2{font-size: 15px;}
}


@media only screen
and (min-device-width: 1024px)
and (max-device-height: 600px)
and (min-resolution: 192dpi)
and (-webkit-device-pixel-ratio:2)
and (orientation : landscape)

{
  h2{font-size: 12px;}
  .content p,ol li{font-size: 12px;}
} */

/* @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape){

    #wrapper::after{right: 5px;}
    #wrapper::before{width: calc(100% - 3vw);}

    .first-container{height: 97.5%;}

    h2{font-size: 10px; margin-bottom: 5px; padding-bottom: 5px;}
    .title{margin-bottom: 5px; align-items: flex-start;}
    .title .icon.style02{display: flex; margin-right: 5px; width: 3vw;}
    .content p,ol li{font-size: 7.5px; margin-bottom: 5px; line-height: 1;}
    .pagination li{margin-right: 2px;}
    .pagination li .page-link{font-size: 7.5px; padding: 2px 4px;}
    .bg01,.bg02{padding: 1.5vw;}
    .first-container .row .item.first{margin-bottom: 10px; height: calc(60% - 10px);}

    .title .icon.style03{display: flex; margin-right: 5px;}

    form{padding-left: 6vw;}
    form .form-check{margin-bottom: 3px; line-height: 0.8;}
    form .form-check .form-check-label{font-size: 10px;}
    .form-check-input{width: 0.5em; height: 0.5em;}
    .form-check .form-check-input{margin-left:-1em; border-radius: 0.15em;}

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



} */


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


/* @media only screen and (min-width: 640px) and (max-width: 767px) and (orientation: landscape){

    #wrapper::after{right: 5px;}
    #wrapper::before{width: calc(100% - 3vw);}

    .first-container{height: 92%;}

    h2{font-size: 8px; margin-bottom: 5px; padding-bottom: 5px;}
    .title{margin-bottom: 5px; align-items: flex-start;}
    .title .icon.style02{display: flex; margin-right: 5px; width: 3vw;}
    .content p,ol li{font-size: 7.5px; margin-bottom: 5px; line-height: 1;}
    .pagination li{margin-right: 2px;}
    .pagination li .page-link{font-size: 7.5px; padding: 2px 4px;}
    .bg01,.bg02{padding: 1.5vw;}
    .first-container .row .item.first{margin-bottom: 10px; height: calc(60% - 10px);}

    .title .icon.style03{display: flex; margin-right: 5px;}

    form{padding-left: 6vw;}
    form .form-check{margin-bottom: 3px; line-height: 0.8;}
    form .form-check .form-check-label{font-size: 8px;}
    .form-check-input{width: 0.5em; height: 0.5em;}
    .form-check .form-check-input{margin-left:-1em; border-radius: 0.15em;}

    .pic-outer{height: 40vh;}
} */



/* @media only screen and (min-width: 480px) and (max-width: 639.98px) and (orientation: landscape) {

    #wrapper::after{right: 5px;}
    #wrapper::before{width: calc(100% - 3vw);}

    .first-container{height: 92%;}

    h2{font-size: 8px; margin-bottom: 5px; padding-bottom: 5px;}
    .title{margin-bottom: 5px; align-items: flex-start;}
    .title .icon.style02{display: flex; margin-right: 5px;}
    .content p,ol li{font-size: 6px; margin-bottom: 5px; line-height: 1;}
    .pagination li{margin-right: 2px;}
    .pagination li .page-link{font-size: 6px; padding: 2px 4px;}
    .message-block p:first-child{ font-size: 7px;}

    .bg01,.bg02{padding: 1.5vw;}
    .first-container .row .item.first{margin-bottom: 10px; height: calc(60% - 10px);}

    .title .icon.style03{display: flex; margin-right: 5px;}

    form{padding-left: 6vw;}
    form .form-check{margin-bottom: 0; line-height: 0.8;}
    form .form-check .form-check-label{font-size: 8px;}
    .form-check-input{width: 0.5em; height: 0.5em;}
    .form-check .form-check-input{margin-left:-1em; border-radius: 0.15em;}

    .pic-outer{height: 35vh;}

    .accordion-header .accordion-button{padding: 1.5vw; min-height: 35px;}
    .accordion-button::after{width: 2vw; height: 2vw; background-size: cover;}
} */

.icon-wrap {margin-right: 1vw; width: 2.5vw;}
.icon svg {max-width: 100%; height: auto; }
.icon-wrap svg {max-width: 100%; height: auto; }

.s0 { fill: none;stroke: #ffffff;stroke-miterlimit:100;stroke-width: 6 }



@-webkit-keyframes scanAnimation {
    0%   {transform: scale(.7);}
    100% {transform: scale(1.1);}
}
@-moz-keyframes scanAnimation {
    0%   {transform: scale(.7);}
    100% {transform: scale(1.1);}
}
@-o-keyframes scanAnimation {
    0%   {transform: scale(.7);}
    100% {transform: scale(1.1);}
}
@keyframes scanAnimation {
    0%   {transform: scale(.7);}
    100% {transform: scale(1.1);}
}

.animate-icon{
    margin-left: 2px;
    animation: scanAnimation 1.5s alternate infinite ease-in;
}

@-webkit-keyframes zoomAnimation {
    0%   {transform: scale(.7);}
    100% {transform: scale(1.1);}
}

@-moz-keyframes zoomAnimation {
    0%   {transform: scale(.7);}
    100% {transform: scale(1.1);}
}

@-o-keyframes zoomAnimation {
    0%   {transform: scale(.7);}
    100% {transform: scale(1.1);}
}

@keyframes zoomAnimation {
    0%   {transform: scale(.7);}
    100% {transform: scale(1.1);}
}


.zoom-animation{
  animation: zoomAnimation 1.5s alternate infinite ease-in;
}


@-webkit-keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}
@-moz-keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}
@-o-keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}
@keyframes rotate{
    from{ transform: rotate(-360deg); }
    to{ transform: rotate(360deg); }
}

.rotate-animation{
    animation-name: rotate;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.pg-quiz #wrapper{height: 100vh;}
.pg-quiz form .form-check-input{display: none;}
.pg-quiz form .button-wrap{justify-content: center; margin-top: 20px;}
.pg-quiz form .button-wrap input[type="button"]{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); background-color: rgba(var(--color_white),0.7); border: none; padding: 18px 30px;; border-radius: 10px; margin: 0 5px; transition: .3s; }
.pg-quiz form .button-wrap input[type="button"]:hover{background-color: rgb(var(--color_white)); }

.pg-quiz form .button-wrap a, #form-signup button, #questions .mehul{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); background-color: rgba(var(--color_white),0.7); border: none; padding: 10px 15px;; border-radius: 10px; margin: 0 5px; transition: .3s; }
.pg-quiz form .button-wrap a:hover, #form-signup button:hover, #questions .mehul:hover{background-color: rgb(var(--color_white)); color: #000; }

.pg-quiz h2{font-size: clamp(1rem, 0.9rem + 0.5vw, 1.5rem); margin-bottom: 20px; padding-bottom: 20px; }
.pg-quiz .content p{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); margin-bottom: 20px;}
.pg-quiz .content .msg{margin-bottom: 20px;}
.pg-quiz form .form-check .form-check-label{font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
        position: relative;
        display: block;
        background-color: transparent;
        border:1px solid rgba(var(--color_white),0.5);
        border-radius: 10px;
        padding: 18px 30px;
        margin-bottom: 20px;
        width: 100%;
        line-height: 1.35;
}
.pg-quiz form .form-check-input:checked + label {
    background-color:rgb(var(--color_white));
    color: rgb(var(--color_black));
}

.pg-welcome #wrapper {height: 100vh; min-height: 100vh;}
.pg-welcome::after{display: none;}
.pg-welcome .bg04{border-radius: 20px; padding: 30px;}
.pg-welcome p{font-family: var(--fontMedium);}

.pg-thanks h2.title{text-transform: none;}
.pg-thanks .bg04{border-radius: 20px; padding: 30px;}
.pg-thanks #wrapper::before,.pg-thanks #wrapper::after{display: none;}
.pg-thanks .env-logo{position: relative; transform: none; left: 0;}
.pg-thanks .env-logo img{width: 15vw;}
.pg-thanks::after{display: none;}

.home{background-position: center right;}
.home::after{display: none;}
.home #wrapper{padding-bottom:2vw;}
.home #wrapper::before,.home #wrapper::after{display: none;}
.home .env-text{font-size: 12px; margin-bottom: 8px;}
.home .env-logo{position: relative; transform: none; left: 0;}
.tab-links{display: flex; justify-content: center; align-items: center; }
.tab-links li{margin: 0 15px; position: relative;}
.tab-links li:first-child::after{content: "|"; color: rgb(var(--color_white)); position: absolute; right: -15px;}
.tab-links li a{color: rgb(var(--color_white)); font-size: 1.2rem;}
.tab-links li.active a{font-family: var(--fontMedium);}

.level-item{border-radius: 20px; position: relative; overflow: hidden; margin-bottom: calc(var(--bs-gutter-x));}
.level-item img{border-radius: 20px;  transition: .3s;}
.level-item:hover img{transform: scale(1.1);}
.level-item.logo-wrap img{transform: none;}
.level-item .info{color: rgb(var(--color_white)); line-height: normal; text-transform: uppercase; position: absolute; left: 0; bottom: 8px; padding: 15px; right: 0; background-color: rgba(var(--primary7),0.7);}
.level-item .info .title{font-size: clamp(1.125rem, 0.5rem + 0.8333vw, 1.5rem); margin-bottom: 0; line-height: 1;}
.level-item .info .sub-title{font-size: clamp(0.875rem, 0.6667rem + 0.2778vw, 1rem);}
#loader{position: absolute; inset: 0; display: flex; justify-content: center; align-content: center;  height: 100%; align-items: center;  background: rgba(255,255,255,0.9);}

.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;
}

.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;
}

.help-block-error { color:red; font-size: 14px !important; font-weight: bold; }