body { background: url("../images/bg.webp") center center no-repeat; background-size: cover; background-attachment: fixed; font-family: "Poppins", sans-serif; font-size: 14px; }
body * { margin: 0; padding: 0; box-sizing: border-box; }
a { text-decoration: none; }
img { max-width: 100%; display: block; }
h1 { font-size: 32px; line-height: 120%; }
h2 { font-size: 30px; line-height: 120%; }
h3 { font-size: 26px; line-height: 120%; }
h4 { font-size: 22px; line-height: 120%; }
.big-h { font-size: 32px;}
.center { margin-right: auto; margin-left: auto; }
.space-after-10 { margin-bottom: 10px; }
.space-after-20 { margin-bottom: 20px; }
.space-after-50 { margin-bottom: 50px; }
.font-big { font-size: 140%; }
.font-med { font-size: 120%; }
.font-80 { font-size: 80%; }
.spl-text { font-family: "Khand", sans-serif; font-weight: 500; }
.reg-text { font-family: "Poppins", sans-serif; font-weight: 400; }
.text-center { text-align: center; }
.text-left { text-align: left; }
strong { font-weight: 600; }
.fat { font-weight: 800; }
.purple-text { color: #330066; }
h2 { font-size: 30px; }
.clear-ul { text-align: left; margin: 0; padding: 0; list-style: none;}
.normal-ul { padding-left: 30px; }
.styled-ul li { padding-left: 25px; background: url("../images/list-bullet.png") left 5px no-repeat; background-size: 18px; margin-bottom: 8px; }
.sep-line { width: 100%; height: 1px; background-color: #808080; display: block; margin: 5px 0; }
.flex-box { display: flex; flex-wrap: wrap;  }
.flex-2a .flex-child { width: 44%; margin: 3%; }
.fix-padding-10 { padding: 10px; }
.fix-padding-15 { padding: 12px 15px; }
.fix-padding-20 { padding: 20px; }
.pt-0 { padding-top: 0; }
.full-img { width: 100%;}
.max-500 { max-width: 500px; margin-right: auto; margin-left: auto; }

.pc-flex-wrap { display: flex; justify-content: space-between; align-items: center; margin: 30px auto; flex-wrap: wrap; }
.flex-top { align-items: stretch; }
.pc-3 { width: 32%;}
.pc-2 { width: 49%;}
.pc-4 { width: 24%;}

.content-wrapper { padding: 10px; max-width: 1000px; margin: 0 auto; width: 100%; overflow: hidden; }
.main-banner { position: relative; }
.main-banner img { filter: drop-shadow(3px 3px 4px rgb(0 0 0 / 40%)); }
.main-banner-captian { position: absolute; width: 90%; left: 50%; bottom: 0; transform: translate(-50%, 50%); }
.dont-memorize { margin-top: 8%; }
.purple-link-gr { width: 100%; text-align: center; display: block; padding: 7px 10px; margin: 5px auto; background-image: linear-gradient(30deg, #8500e1, #490088); border-radius: 10px; color: #fff; font-size: 22px; border: solid 2px #fff; box-shadow: 3px 3px 5px rgb(0 0 0 / 30%); max-width: 400px; }
.purple-link-gr span { background-color: #b10064; border: solid 1px #fff; border-radius: 5px; margin-right: 10px; padding: 2px 7px; font-size: 60%; color: #ff0; vertical-align: middle;  }
.purple-link-gr.inline { display: inline-block; width: auto; }
.purple-link-gr:hover { background-image: linear-gradient(30deg, #490088, #8500e1); }
.red-link-gr { position: relative; margin: 5px auto; width: 92%; margin-left: 8%; text-align: center; display: block; padding: 7px 10px; padding-left: 7%;  background-image: linear-gradient(30deg, #bd0076, #9e0049); border-radius: 10px; color: #fff; font-size: 17px; border: solid 2px #fff; box-shadow: 3px 3px 5px rgb(0 0 0 / 30%); }
.red-link-gr .cap { position: absolute; left: 0; top: 0; transform: translate(-60%, 50%); background-color: #b10064; border: solid 1px #fff; border-radius: 5px; margin-right: 10px; padding: 2px 7px; font-size: 60%; color: #ff0; vertical-align: middle;  }
.red-link-gr .reg-text { font-size: 80%; vertical-align: middle; }
.online-zoom { margin-top: 10px; }
.box-wrapper-wh { padding: 20px 10px; background-color: #fff; border:solid 1px #330066; border-radius: 10px; overflow: hidden; }
.box-wrapper-gr { background-image: linear-gradient(140deg, #fef3ea, #edfbf9); padding: 20px 10px; border:solid 1px #330066; border-radius: 10px; overflow: hidden; }
.box-wrapper-dgr { background-image: linear-gradient(140deg, #A42BF2, #5B2B87); padding: 20px 10px; border:solid 1px #330066; border-radius: 10px; overflow: hidden; color: #fff; }
.box-wrapper-gr.clear, .box-wrapper-dgr.clear { padding: 0; }

.blue-box { position: relative; background-image: linear-gradient(180deg, #e0e6f2, #c9d5e9); border: solid 1px #2b55a8; border-radius: 10px; padding: 3px 15px; }
.question-bot:after { content:""; position: absolute; right: 5%; top: -10%; height: 160%; aspect-ratio: 1; background: url("../images/question-bot.webp") center center no-repeat; background-size: contain; }
.bg-torn-paper { background: url("../images/torn-paper-bg.webp") -4px top no-repeat; background-size: 100% auto; padding: 24px 5px 18px; font-size: 27px; transform: scale(1.1); margin-top: -7%; }
.bg-torn-paper { background: url("../images/torn-paper-bg.webp") -4px top no-repeat; background-size: 100% auto; padding: 24px 5px 18px; font-size: 27px; transform: scale(1.1); margin-top: -7%; }
.shadow-boxes .flex-child { background-color: #fff; border-radius: 10px; box-shadow: 2px 4px 5px rgb(0 0 0 / 20%); padding: 15px; }
.tick-mark { position: relative; text-indent: 12px; }
.tick-mark:before { content:""; position: absolute; left: 0; top: 0; width: 35px; height: 35px; transform: translate(-20%, 10px); background: url("../images/tick-mark.webp") center center no-repeat; background-size: contain; }
.for-every-learner { width: 80%; margin-left: 20%;}
.grey-box { background-color: #edf2ee; border: solid 1px #333; border-radius: 10px; overflow: hidden; box-shadow: 3px 4px 8px rgb(0 0 0 / 24%); }
.for-parents-img { margin-top: -50px; }
.dark-bg { background: url("../images/dark-bg.webp") center center no-repeat; background-size: cover; background-attachment: fixed; padding: 30px 20px; border-radius: 10px; }
.dark-bg * { color: #fff; }
.indigo-link { background-color: #cfb0e6; color: #000; font-size: 17px; padding: 5px; display: block; margin: 10px auto; border-radius: 10px; border: solid 1px #fff; max-width: 400px; width: 100%; }
.lang-img { margin-top: 20px; }

@media screen and (max-width:820px){
	.pc-flex-wrap { display: block; }
	.pc-3, .pc-2, .pc-4 { width: 100%;}
}