html {height: 100%;}
body {font-size: 14px;font-family: 'Nunito Sans', Arial;background:  linear-gradient(180deg, #dcdcdcf0 0%, #f9f9f9 7%);background-attachment: fixed;}
header {padding-top: 30px !important;}
.logo span {}
a {text-decoration: none;color:#111;}
.ib {display: inline-block;}
h1 {font-size: 30px;}
h2 {font-size: 25px;margin: 20px 0 0;}
h2 p {font-size: 16px;}
h3 {font-size: 20px;margin: 20px 0 0;}
button {border: 2px solid #e7e7e7;border-radius: 4px;padding: 5px;}
ul {}
footer a {display: inline-block;text-decoration: underline;margin: 5px;}
.w3-container {  }
.padding-bottom {padding-bottom: 16px;}

.controller {padding: 2px;border: 1px solid #9e9c9b;border-bottom: 1px solid #6d4929;background-image: -webkit-gradient(linear, left top, left bottom, from(#A88164), to(#906b57));border-radius: 5px 5px 0 0;height: 25px;margin-top: 15px;}
.gameslink {    border-radius: 3px;
  border-bottom:2px solid #1d96ff59;}
.gameslink span { font-size: x-small;
  position: absolute;
  top: -11px;
  left: -16px;
  background: red;
  color: white;
  padding: 0px 5px;
  border: 1px solid;}
.controller a {color: #eee;display: inline-block;font-size: 13px;}

.searchform {margin: 3px auto;padding: 0;border: 1px solid #ebebeb;width: 324px;background: #fff;border-radius: 4px;}
.searchform .search {width: 250px;border: 0;padding: 5px 7px;outline: none;}

.searchform .btn {background-color: #e7e7e7;border: 0;padding: 4px 16px;color: #323232;width: 67px;border-radius: 3px;}
.searchform .btn:hover {cursor: pointer;background: #ccc;}
h1 i {color: gray;}

h3 i{background:#815741;color: #fff;padding: 0 5px;}
h3 span {}
span.current {background:#f2f8f9;padding: 0 5px;}

.pron {font-size: 24px; color: gray;}
.pron span , .hearspan {color: black;    color: #c98b18;border: 1px solid #eee;padding: 3px;border-radius: 50%;}
.hearspan a {color: black;}

.pron span:hover {background: #f5f5f5;}
.w3-card, .w3-card-2, .w3-card-4 {border-radius: 5px;box-shadow: #e3e2e2 -1px 1px 4px 0px;}

.def li {list-style: circle;color: #777;margin: 5px;font-size: 1.5em;padding: 2px;color: #777;}
.def li a {color: #333;text-decoration: none;border-bottom: 1px solid #777;}

.more p, p.means h2 {border-left: 10px solid #eee;padding: 1px 10px;color: #4a4a4a;}
.more a {text-decoration: none;color: #4a4a4a;}

ul.similar {padding: 0;color: #4a4a4a;}
.similar li {list-style: none;display:inline-block;margin: 2px;border: 1px dashed #bbb;border-radius: 11px;padding: 2px 10px;}
.similar li a {padding: 3px;}
.similar li a:hover {background: #f5e2cb;}

a.nearby {background: #f5f5f5;padding: 3px;margin: 2px;display: inline-block;}

.searchresult li {margin: 10px;list-style: decimal;color: gray;}
.searchresult li a {border-bottom: 1px solid brown;padding: 5px;color: #5f1d08;}

.halist a , a.addlink {display: inline-block;border: 6px inset #decdc0;margin: 5px 2px;padding: 6px;width: 48px;font-size: 21px;text-align: center;border-radius: 6px;background: #f7eadf;text-shadow: 1px 1px white;color: #616161;} 
.halist a:hover {background: #eee;}

.sidebar a {border: 1px solid #eee;padding: 5px;display: block;border-bottom: none;}
.sidebar h4 {border-bottom: 4px solid #6d492924;border-radius: 8px;text-align: center;background: #fcfcfc;}

.sidebar a:hover{background: #f5f5f5;}
.sidebar a span {vertical-align: middle;}
.sidebar .material-icons {font-size: 15px;}

div.vote {display: inline-block;}
div.vote button {background: none;border: none;height: 22px; width: 45px;vertical-align: bottom;color: #999;}
div.vote button:hover {cursor: pointer;}

span.imp {float: right;}
span.imp a {color: gray;}

a.addlink {font-size: 12px;width: 80px;float:right; }
h2.means  {font-size: 18px;margin: 0;}

.lessons h1 {text-align: center;}
.lessons {}
.lessonholder h3 {background: #eee;}
.lessonholder ul li {list-style: none;padding: 6px 3px; border-bottom: 1px solid #eee;}
.lessonholder ul li a {}
.lessonholder ul li a:hover {text-decoration: underline;}


ul.lessons .lessonimg {    height: 85%;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
ul.lessons .lessonwords , .lessonwords {/* height: 20%; */background: #444;color: #fff;text-align: center;overflow: auto;position: absolute;bottom: 0;left: 0;width: 100%;/* height: 100%; */padding: 10px 0px;}
ul.lessons li:hover, ul.lessons li.active {cursor: pointer;box-shadow: 0px 0px 19px #0898d9 !important;}
ul.lessons {}
ul.lessons h2 {text-align: center;}
ul.lessons {margin-left: -23px;}
ul.lessons li {margin: 12px 0;list-style: none;width: 32%;height: 240px;display: inline-block;background: #fff;position: relative;box-shadow: #ababab 2px 16px 9px -12px;}
.lessonwords {}
.lessonwords span {margin: 0 3px;}
ul.lessons li .addpic { position: absolute;top:3px;right: 3px;color: #cfb091; }

ul.letter_row {}
ul.letter_row .letter {display: inline-block;width: 13%;font-size: 45px;border: 1px solid #ddd;border-radius: 6px;text-align: center;height: 72px;color: #787878;font-weight: 600;} 
ul.letter_row .letter:hover, .letter.active {color: #222;cursor: pointer;box-shadow: #cda467 1px 3px 4px;background: #ffc1071c;}

ul.horiz .letter {font-size: 12px;height: 20px;background: #eee;}
ul.letter_row .letter span {font-size: 12px;display: grid;}

ul.letter_row .vert {margin-left: -20px;color: #ccc;font-size: 16px;width: 18px;background: #f3f2f2;float: left;margin-right: 4px;vertical-align: middle;line-height: 85px;}
.horiz {}
.horiz2 {}
.horiz2 .letter{background: #fff !important;font-size: 10px;}
ul.numbers .letter { width: 25%;margin: 3%;}

.hahupics ul.letter_row.alpha_row:nth-child(odd) {background: #fffbf3;}


/*auido recorder */
#recordingsList audio {display: block;}
#recordingsList a {    padding: 5px;border-radius: 5px;margin: 5px;display: inline-block;}
#recordingsList .uploadbtn {background: lightblue;}
#recordingsList .downloadbtn {}
#aud {display: none;}

.rec {display: inline-block;border-radius: 50%;}
.rec-in {background: red;width: 20px;height: 20px;border: 2px solid red;vertical-align: top;}
.rec-out {border: 2px solid;border-radius: 6px;padding: 2px 5px 2px 2px;background: #222;}
a.arec {color: white;font-family: Arial; font-weight: bold;}

div.adminfn {
	background: #f8fafc;
	border: 1px solid #d7dee8;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
	color: #263241;
	margin: 12px 0 18px;
	padding: 14px;
}
.adminfn__head {
	align-items: baseline;
	border-bottom: 1px solid #e3e8ef;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 12px;
	justify-content: space-between;
	margin-bottom: 12px;
	padding-bottom: 10px;
}
.adminfn__head strong {
	font-size: 16px;
}
.adminfn__head span {
	color: #64748b;
	font-size: 13px;
}
.adminfn__grid {
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(240px, 1fr) minmax(320px, 1.5fr);
}
.adminfn__panel {
	background: #fff;
	border: 1px solid #e3e8ef;
	border-radius: 6px;
	padding: 12px;
}
.adminfn__panel--wide,
.adminfn__panel--category {
	grid-column: span 1;
}
.adminfn__panel h2 {
	color: #334155;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	margin: 0 0 10px;
	text-transform: uppercase;
}
.adminfn form {
	margin: 0;
}
.adminfn__row,
.adminfn__actions,
.adminfn__aiControls {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.adminfn__actions {
	align-items: stretch;
}
.adminfn input[type="text"],
.adminfn input[type="number"],
.adminfn select,
.adminfn textarea {
	background: #fff;
	border: 1px solid #cbd5e1;
	border-radius: 5px;
	color: #1f2937;
	font: inherit;
	min-height: 34px;
	padding: 6px 8px;
}
.adminfn input[type="text"] {
	min-width: 150px;
}
.adminfn select {
	max-width: 260px;
}
.adminfn textarea {
	display: block;
	line-height: 1.35;
	margin: 8px 0;
	min-height: 78px;
	resize: vertical;
	width: 100%;
}
.adminfn button,
.adminfn input[type="submit"] {
	background: #2563eb;
	border: 1px solid #1d4ed8;
	border-radius: 5px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	min-height: 34px;
	padding: 6px 10px;
}
.adminfn button:hover,
.adminfn input[type="submit"]:hover {
	background: #1d4ed8;
}
.adminfn__danger {
	background: #b91c1c !important;
	border-color: #991b1b !important;
}
.adminfn__danger:hover {
	background: #991b1b !important;
}
.adminfn__aiControls {
	justify-content: space-between;
}
.adminfn__aiControls label {
	color: #475569;
	font-size: 13px;
}
.adminfn__aiControls input {
	margin-left: 4px;
	width: 56px;
}
.adminfn__candidates {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}
.adminfn__candidate {
	background: #f8fafc;
	border: 1px solid #e3e8ef;
	border-radius: 6px;
	overflow: hidden;
	width: 122px;
}
.adminfn__candidate img {
	background: #fff;
	display: block;
	height: 120px;
	object-fit: cover;
	width: 120px;
}
.adminfn__candidate button {
	border-radius: 0;
	width: 100%;
}
@media (max-width: 820px) {
	.adminfn__grid {
		grid-template-columns: 1fr;
	}
	.adminfn__row,
	.adminfn__actions,
	.adminfn__aiControls {
		align-items: stretch;
		flex-direction: column;
	}
	.adminfn input[type="text"],
	.adminfn select,
	.adminfn button,
	.adminfn input[type="submit"] {
		width: 100%;
	}
}
img.picture {border-radius: 5px;width: 40%;}
.m1 {margin: 5px}
button.choose:hover {cursor: pointer;}
.picholder {overflow: hidden;height: 150px;width: 400px;}
.inst .material-icons {vertical-align: baseline;font-size: small;}

p.inst {color: #777;}

ul.contrul {margin: 0 auto; text-align: center; position: -webkit-sticky; position: sticky; top: 0; background-color: #fff; padding: 15px 0; z-index: 1; box-shadow: #e9e6e6 1px 10px 5px -7px; }
div#controller {display: unset;}
ul.contrul li {display: inline-block;padding: 4px 19px 0;background: #ffc1071c;border: 2px #bba290 solid;border-radius: 5px;color: #585858;}
ul.contrul li:hover {background:#efdca5 ;}

ul.quizzes.w3-disabled {filter: blur(5px);}
ul.quizzes {margin: 0 auto;text-align: center;}
ul.quizzes button {margin: 6px;padding: 7px;font-size: 20px;cursor: pointer;background: linear-gradient(0deg, #e1e1e1, #f1f4f5);border: 0;border-radius: 2px;box-shadow: #999 1px 1px 3px;} 
ul.quizzes .aud {height: 80px;padding: 2%;}
span.correct {color: #67bd08;font-size: 40px;visibility:hidden;}
span.incorrect {color: red;font-size: 40px;display: none;}
span.approved {color: #2d81f9;}
.burger { display: none;}
.homebg {    background: linear-gradient(183deg, #010a06, #033802);}
.homeh1 {font-size: 60px;}

.dimg {padding: 25px;min-height: 330px; border-bottom: 1px solid #C8E5F1; box-shadow: 0px 8px 5px -5px #f0f7fc; }
.nav li {display: inline-block;list-style: none;margin-right: 12px;}
.nav li:hover {text-decoration: underline;}
.nav .active {background: #fdfbf6;padding: 3px 15px;border-radius: 3px;border-top: 1px solid #9d9d9d;}
    ul.nav .material-icons {vertical-align: bottom;}

h3 .material-icons {vertical-align: text-top;}

.features .m4 {position: relative;padding: 20px;border-radius: 10px;min-height: 150px;background: #f8f5ed;border: 4px solid #fff;}


.colors .colors {background-color: brown;}
.admin {float: left; }
.admin a {border-bottom: 1px dotted;padding: 10px 10px 0px 0px;color: #32a015;}
.quizzes h4 {font-size: 4rem;} /* alphabet quiz h4 */

.quizbtn {font-weight: bold;border-color: #4f6e26 !important;}

.ans {}
.vnm-confetti-button {z-index: 10;}
/*reg login */
.card {margin: 0 auto; }
.card input[type=email],.card input[type=text], .card input[type=password] {padding: 5px;min-width: 50%;margin: 0 0 20px;}
.card button {min-width: 50%;}
.card button:hover {cursor: pointer;}
.card label {text-align: left;}
.reg {background: linear-gradient(0deg, #6ec30d, #05ca1d); color: #fff; box-shadow: #ccc 2px 3px 4px; font-size: 21px; font-weight: bold;}
.msidebar {left: 0px;top: 0;width: 70% !important;display: none;z-index: 10 !important;box-shadow: #a2a0a0 0px 0px 9px;}
.msidebar .w3-card {box-shadow: none;}
.msidebar .w3-padding {padding: 0px !important;}

.defbutton {background: -webkit-gradient(linear, left top, left bottom, from(#A88164), to(#906b57));border: none; font-size: 20px; color: #fff; border-radius: 4px;}
.pro {background: url(/images/1.jpeg) no-repeat;background-size: contain;background-position-y: -225px;}
.propage .topforms, .propage .nav , .showplans .nav{display: none  ;}

.pro h1 {text-align: center;line-height: 60px;font-weight: bold;padding: 0 4%;color: #FFF;}
.features {list-style: none;margin: 0;padding: 0;color: #6a531c;}
.features .pd {}
.features h3 {font-weight: bold;}
.features .m4:before {content: ''; display: block; position: absolute; width: 3rem; height: 3rem; left: 50%; top: -20px; margin: 0 0 0 -1rem; border-radius: 100%; background: url(/images/check.svg) center/50% no-repeat; } 
.testimonial p {position: relative;}
.testimonial span.names{text-align: right;display: block;}
.testimonial .quote {font-size: 71px;position: absolute;top: -17px;left: 7px;color: #c8bea6;}
.testimonial p {border-radius: 5px;padding: 20px 40px;background: #f8f5ed;}
.testimonial img {width: 41px;height: 41px;border-radius: 50%;border: 2px solid #fff;}

p.catquiz {text-align: center;background: #fffbed;}
p.catquiz a {padding: 9px 3px; border-right: 2px #ffffff solid;    display: inline-block; color: #4a4a4a;} 
p.catquiz a:hover {text-decoration: underline;background: #ffc1071c;}
p.catquiz .current {border-top: 5px solid #A88164;background: #ffc1071c;}
p.catquiz a span {vertical-align: middle;font-size: 17px;}
input.namehi{display: none;}

.tabler {width: 100%;counter-reset: rowNumber;}
.tabler tbody tr {}
.tabler tbody tr:nth-child(even) {background: #eee;}

/*.tabler tbody tr::before {display: table-cell; counter-increment: rowNumber; content: counter(rowNumber); padding: 2px; vertical-align: middle; } */
.hahupics div.hp {display: inline-block;margin: 5px 2px;width: 31%;height: 240px;background: #fff;}
.hahupics .alpha_li {width: 100% !important;font-size: 1.4em !important;/* height: 36% !important; */border: none !important;}
.alpha_li a {color:#fff;}
.hahupics .hp_l {text-align: center;text-transform: capitalize;background: #f3f3f3;padding: 3px 12px;}
.hahupics .letter:hover {box-shadow: none !important;background: #f5f5f5 !important;}
.hp_img{height: 49%; background-size: contain !important; background-position-x: center !important; position: relative;text-align: center; } 
.hp_img img {max-width: 100%;max-height: 100px;}
.hahupics ul.letter_row .letter span {font-size: 14px;}
.hp_img .hear {position: absolute;left: 7px;bottom: 9px;color: #eecd91;border: 2px solid #fbf6ef;border-radius: 50%;padding: 3px;background: #fff;}

.homebg .lessons li {box-shadow: #191919 2px 16px 9px -12px;height: 227px;}

.prol {background: #fffdf7;position: relative;}
.back .material-icons {vertical-align: bottom;}
.-prol:before {content: 'pro'; display: block; position: absolute; top: 0px;right: 0px;font-size: 10px;background: #906b57;padding: 1px 3px;color: white;}

.prolesson {display: none;}
.back {border-bottom: 4px solid #6d492938;border-radius: 5px;text-align: center;background: #fcfcfc;padding: 10px;display: inline-block;}

.prolesson li a {display: inline-block;margin-right: 5px;color: #555;}
.prolesson li a span {vertical-align: middle;font-size: 16px;}
.prolesson li a:hover   {text-decoration: underline;color: #111;}

.notice {font-size: 1em;border-left: 6px solid #b78542;}
.notice a {color: white !important;background: #4c4b49;padding: 1px 5px;border-radius: 4px;border-bottom: 2px solid #ce984c;}

.prouser .person {color: green;}
.notpro .hahupicshide { cursor: not-allowed; opacity: 0.3;    filter: blur(4px);}
.notpro .catquiz {-display: none; /* enable finally when ready to charge */}
.notpro .hahupics {height: 2000px; overflow: hidden;}

.score .w3-row {padding:0 5px;border-bottom: 1px solid #eee;text-transform: capitalize;}
.score .w3-row:nth-child(odd) { }
.score a:hover {text-decoration: underline;}

.mar {display: none;}
.tlesson {}
.tlesson h1 {line-height: 120%;
    font-weight: 800;margin: 10px 0;}
.tlesson a {color: brown;text-decoration: underline;}

/*pagination */
ul.pager {}
ul.pager li {display: inline-block;background: #f4f4f4;padding: 7px;}
ul.pager li.active {}
ul.pager li a {color: #5f1d08;text-decoration: underline;}

.blog .post {border-bottom: 1px solid #ddd;font-size: 16px;}
.blog .post table {}
.blog .post table tr {}
.blog .post table tr td {}

.blog .post table { 
  border: 1px solid #ddd;
  border-radius: 13px; 
  border-spacing: 1px;
  border-collapse: separate !important;
  }
.blog .post table td { border: none; padding: 20px; }

.blog .post table tr:last-child > td {
  border-bottom: none;
}
.blog .post table tr:nth-child(1){
  font-size: 20px;
}

.blog .post table tr:nth-child(even) {background: #f5f5f5}
.inline-player {margin: 4px 0;text-transform: capitalize;padding: 5px;border-radius: 8px;font-size: 15px;color: #3f3f3f;}
.ips { padding: 4px;border-radius: 3px;}
.ips.Male {background: #e6f3ff;}
.ips.Female { background: #ffedf0;}
.ips.Polite {background: #fff5e2;}

.inline-player .hear { background: #fcf7ea; border: 1px solid #ede1d5; box-shadow: 1px 1px 2px #e9e9e9; padding: 1px 6px; height: 29px; display: inline-block; border-radius: 4px; }
.italic {font-style: italic;}
.reply {padding-left: 37px;}
.aonly {display: none;}

span.say {color: #f6b13b;}
span.cv {float: left;margin-top: 25px;padding: 0px 13px;}
.adult-word {border-top: 1px solid red;}
/* names */
.names .searchresult li a {border-bottom: 1px solid #eee;padding: 5px;color: #5f1d08;text-transform: capitalize;font-size: 20px;}
.names .searchresult li.Female a {color: hotpink;}
.names .searchresult li.Male a {color: steelblue;}

.namesabc a {padding: 1px 6px;margin: 4px 1px;background: #f6efd9;display: inline-block;border-bottom: #e1dcac 2px solid;box-shadow: 2px 2px 3px #ededed;color: #4d4b4b;}

.inline-block {display: inline-block;}
.nav>li>a {position: relative;    padding: 3px 15px;}

.hidden {display: none;}
p.secure {  padding: 5px;text-align: center;font-weight: bold;background: #fcf2bb;border-radius: 5px; border: 1px solid gold; margin: 4px; color: #535151;}
.btn-theme {color: #fff;
  background-color: #A88164;
  border-color: #6d4929;} 
#translatedText {background:wheat;padding:10px;}

  @keyframes fadeOutUp {
    0% {
      opacity: 1;
      transform: translateY(0);
    }
    100% {
      opacity: 0;
      transform: translateY(-50px);
    }
  }
  
  .animate-score {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em;
    color: green;
    animation: fadeOutUp 3s ease-out forwards;
  }
  .propage blockquote {width: 47%;
    display: inline-flex;}


/* billings */
.toggle-card {display:flex; margin-bottom:20px}
.toggle-btn {flex:1; padding:10px; text-align:center; cursor:pointer; background-color:#e0e0e0}
.toggle-btn.active {background-color:#379fd0; color:#fff}
.plans-container {display:flex; justify-content:space-around; flex-wrap:wrap}
.monthly-plan, .one-time-plan {width:100%; display:none}
#monthly-price, #one-time-price {display:none}
.plan-card {transition:all 0.3s ease;}
.plan-card:hover {transform:translateY(-5px); box-shadow:0 10px 20px rgba(0, 0, 0, 0.1);}
.toggle-btn {transition:all 0.3s ease;}
.toggle-btn:hover {opacity:0.9;}
.mostpopular {background:linear-gradient(45deg, #ff6b6b, #feca57); color:white; font-weight:bold; font-size:0.9rem; text-transform:uppercase; padding:0.5em 1em; border-radius:25px; box-shadow:0 4px 6px rgba(0, 0, 0, 0.1); position:relative; overflow:hidden; transition:all 0.3s ease; width:72%; margin:auto;}
.mostpopular::before {content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:rgba(255, 255, 255, 0.1); transform:rotate(45deg); z-index:1; transition:all 0.3s ease;}
.mostpopular:hover {transform:translateY(-3px); box-shadow:0 6px 8px rgba(0, 0, 0, 0.15);}
.mostpopular:hover::before {left:100%;}
.oldprice {    color: #aaa;
  font-weight: normal;
  font-size: 20px;
  vertical-align: super;
  text-decoration: line-through;
}


:root {--primary-color:#000; --secondary-color:#555; --background-color:#fff; --text-color:#777;}
.checkout-container {max-width:600px;}
.checkout-card {border:none; border-radius:20px; box-shadow:0 10px 30px rgba(0, 0, 0, 0.1); overflow:hidden; transition:all 0.3s ease;}
.checkout-card:hover {transform:translateY(-5px); box-shadow:0 15px 35px rgba(0, 0, 0, 0.1);}
.checkout-header {background-color:#f8f9fa; padding:30px;}
.checkout-body {padding:40px;}
.form-control, .form-select {border:none; border-bottom:2px solid #e0e0e0; border-radius:0; padding:15px 5px; margin-bottom:25px; transition:all 0.3s ease;}
.form-control:focus, .form-select:focus {border-color:var(--secondary-color); box-shadow:none;}
#card-element {border-bottom:2px solid #e0e0e0; padding:15px 5px; margin-bottom:25px; transition:all 0.3s ease;}
#purchase-btn, #card-button {border:none; border-radius:50px; padding:15px 30px; font-size:18px; font-weight:bold; transition:all 0.3s ease; width:100%;}
#purchase-btn:hover, #card-button:hover {background-color:var(--secondary-color); transform:translateY(-2px); box-shadow:0 4px 10px rgba(0, 0, 0, 0.1);}
.secure {display:flex; align-items:center; justify-content:center; margin-top:30px; color:#6c757d;}
#loading {width:20px; height:20px; margin-left:10px;}
.price-tag {font-size:2.5rem; font-weight:bold; color:var(--secondary-color);}
.form-label {font-weight:600; color:var(--primary-color);}
/* end billing */


/* mobile  */
@media only screen and (max-device-width: 800px) {
    
    header {padding: 8px !important;position: relative;}
    .homeh1 {font-size: 31px;line-height: 35px;}
    ul.lessons li {height: 150px; }
    .homebg .lessons {width: 100% !important;padding-inline-start:0;}
    ul.lessons .lessonwords { /* height: 32%; */font-size: 12px;padding: 2px 0px;}
    .topforms {padding: 5px 0;}
    /* a.logo {top: -15px;position: absolute;padding: 14px 0 !important;}  */
    a.logo img{ height: 33px !important; }
     h1 {-white-space: nowrap;font-size: 26px !important;}
     .pro h1, .homebg h1 {white-space: normal;padding: 10px 11px !important;margin: 0;line-height: initial;}
    .pron {margin: 0;-white-space: nowrap;}
    .def li {-white-space: nowrap;}
    p { margin: 15px 0 0; }
    hr {margin:  5px 0;}
    .topdef {padding-top: 0px !important;}
    img.picture { width: 30%;}
    .controller { border: 0;border-bottom: 1px solid #6d4929; background: #906b57; border-radius: 0; height: 10px;}
    ul.letter_row .alpha_li {font-size: 28px;height: 95px;}
    ul.letter_row .vert{height: 66px;}
    ul.letter_row {padding-inline-start: 11px;}
    .burger {display: block;}
    ul.nav {padding: 0;font-size: 13px;clear: both;justify-content: center;float: none !important;}
    .features li {width: 100% !important;}
    .features .m4 { min-height: 230px; }
    .pro {background-position-y:1px;}
    .nav>li>a {padding:2px 3px;}
    .hahupics ul.letter_row {padding-inline-start: 5px !important;}
    .nav li { margin-right: 4px;}
    .nav .active {padding: 6px 7px; }
    .nav li a {padding: 6px 5px; }
    .w3-dropdown-content {right: 9%;}
    .catli {font-size: 20px;}
    .cat-thumb {font-size: 30px;}
    .thirdword {display: block;}
    .score {}
    .persondropdown {position: absolute;top: 18px;right: 0px;}
    .homebg .lessons li {        height: 150px !important;}
    .propage blockquote {width: 100%;}

}