* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

input:read-only {
	background-color: #c9c7c7;
}

@font-face {
	font-family: gilroy;
	src: url(../fonts/Gilroy-ExtraBold.otf);
}

body, html {
	scroll-behavior: smooth;
	font-family: gilroy;
	background-color: #e4e4e4;
	/*font-weight: 600!important;*/
}

::root {
	--primary-color: #e4e4e4;
}

a {
	transition: all .3s ease;
}

/*p {
	color: #979797;
}
*/
/* Navigation Bar Goes Here */
nav {
	margin: 15px 0;
	z-index: 999;
	position: relative;
}

nav ul {
	list-style: none;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 1174px;
	margin: auto;
}

nav ul li {
	padding: 12px 25px;
	position: relative;
	transition: all .3s ease;
}

nav ul li:hover .parent {
	opacity: 1;
	visibility: visible;
}

nav ul li ul {
	width: 150px;
	flex-direction: column;
	align-items: flex-start;
	padding: 10px;
}

nav ul li .parent {
	width: auto;
	opacity: 0;
	visibility: hidden;
	position: absolute;

	display: flex;
	justify-content: space-between;
	align-items: stretch;

	top: 50px;
	background-color: white;
	padding: 25px;
	border-radius: 15px;
	transition: all .3s ease;
}

nav ul li .parent .child.line {
	height: auto;
	width: 2px;
	background-color: #5cb85c;
}

nav ul li ul li {
	padding: 0;
	width: auto!important;
	border: 0!important;
	transition: all .3s ease;
	margin-bottom: 5px;
	position: relative;
}

nav ul li ul li:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom: 3px solid #5cb85c!important;
	width: 0;
	transition: all .3s ease;
}

nav ul li ul li:hover:before {
	width: 100%;
}

nav ul li ul li a {
	border: 0!important;
	font-size: 18px!important;
}

nav ul li:first-child {
	padding: 0;
}

nav ul li a {
	text-decoration: none;
	color: #151C33;
	font-size: 18px;
}

nav ul li.social a {
	border: 0;
	border: 1px solid #151C33;
	padding: 12px 14px;
	border-radius: 50%;
}

nav ul li a {
	border-bottom: 2px solid #52b46e;
}

nav ul li:last-child {
	border: 2px solid #151C33;
	border-radius: 25px;
}

nav ul li:last-child a {
	border-bottom: 0;
}

nav ul li:first-child a {
	border-bottom: 0;
	font-size: 24px;
	font-weight: 900;
}

nav ul li:first-child {
	width: 250px;
}

nav ul li:first-child a img {
	width: 100%;
}

nav ul li:first-child {
	margin-right: auto;
}

aside {
	display: none;
}

@media screen and (max-width: 1174px) {
	nav {
		display: none;
	}
	nav ul {
		width: 100%;
	}

	aside {
		display: block;
		position: relative;
		padding: 15px;
	}

	aside {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	aside img {
		width: 150px;
	}

	aside ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		list-style: none;
		position: absolute;
		top: 0;
		left: -100%;
		transition: all .3s ease;
		background-color: white;
		height: 100vh;
		z-index: 9;
		padding: 0 55px 0 11px;
	}

	aside ul li {
		padding: 12px;
	}

	aside ul li a {
		text-decoration: none;
		color: #151C33;
	}

	aside button {
		background-color: transparent;
		outline: 0;
		font-size: 32px;
		transition: all .3s ease;
		border: 0;
	}
}

nav .btn-contact {
	transition: all .3s ease;
}

nav .btn-contact a {
	display: flex;
	justify-content: center;
	align-items: center;
}

nav .btn-contact a i {
	margin-left: 5px;
}

nav .btn-contact:hover {
	background-color: #151C33;
	color: white;
	cursor: pointer;
}

nav .btn-contact:hover a {
	color: white;
}

/* Navigation Bar Ends Here */


/* Section Hero Goes Here */
#hero {
	z-index: 1;
	position: relative;
}

#hero .container {
	width: 1174px;
	margin: auto;
	background-image: url(https://cdn.pixabay.com/photo/2023/04/20/10/19/coding-7939372_1280.jpg); /*url("../img/santa.png");*/
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	height: 450px;
	border-radius: 35px;
}

#hero .container .parent {
	background-color: rgba(82,180,110,0.8);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	height: 100%;
	border-radius: 35px;
}

#hero .container .parent .child {
	padding: 50px;
}

#hero .container .parent .child h1 {
	color: #151C33;
	text-transform: uppercase;
	font-size: 60px;
	font-weight: 900;
}

#hero .container .parent .child .btn-wrapper {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

#hero .container .parent .child .btn-wrapper a {
	border: 2px solid #151C33;
	background: #151C33;
	color: white;
	text-decoration: none;
	padding: 15px 25px;
	margin-right: 25px;
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.d-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	height: 100%;
	flex-direction: column;
}

#hero .container .parent .child .btn-wrapper a.bg-white {
	background: white;
	color: #151C33;
	border: 2px solid white;
}

@media screen and (max-width: 1174px) {
	#hero {
		padding: 15px;
	}

	#hero .container,
	#video .container{
		width: 100%!important;
		height: 100%!important;
	}

	#video .container {
		padding: 15px;
	}

	#hero .container .parent .child h1 {
		font-size: 24px;
		margin-bottom: 25px;
	}

	#hero .container .parent .child p {
		margin-bottom: 18px;
	}

	#hero .container .parent .child .btn-wrapper a {
		font-size: 12px;
		padding: 15px 15px;
		margin-right: 15px;
	}

	#hero .container .parent .child {
		padding: 25px;
	}

	#hero .container .parent .child .btn-wrapper {
		flex-wrap: wrap;
	}
}
/* Section Hero Ends Here */

/* Section About Goes Here */
#about {
	margin: 25px 0;
}

#about .container,
#login .container,
#quiz_section .container{
	width: 1174px;
	margin: auto;
}

#about .container .parent,
#login .container .parent,
#quiz_section .container .parent{
	display: flex;
	justify-content: space-between;
	align-items: /*flex-start;*/ center;
}

#about .container .parent .child,
#quiz_section .container .parent .child,
#checkout_section .container .parent .child {
	width: calc(100% / 2);
}

#about .container .parent .child img,
#quiz_section .container .parent .child img {
	width: 100%;
	border-radius: 25px;
}

#about .container .parent .child-text {
	padding: 25px;
}

#about .container .parent .child p {
	margin-bottom: 35px;
}

#about .container .parent .child h1 {
	padding: 20px 0;
	font-size: clamp(45px, 5vw, 70px);
	/*font-size: 70px;*/
	-webkit-text-stroke: 1px #151C33;
	-webkit-text-fill-color: transparent;
	width: 100%;
	text-align: left;
	z-index: -1;
	opacity: 0.6;
}

#about .container .parent .child a ,
#courses .container .parent.feature-parent .child a {
	border: 2px solid #151C33;
	background: transparent;
	color: #151C33;
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	padding: 15px 25px;
	border-radius: 8px;
}

#about .container .parent .child a:hover,
#courses .container .parent.feature-parent .child a:hover {
	background-color: #151C33;
	color: white;
	cursor: pointer;
}

@media screen and (max-width: 1174px) {
	#about {
		padding: 15px;
		margin: 0;
	}

	#about .container,
	#login .container,
	#quiz_section .container{
		width: 100%;
	}

	#about .container .parent,
	#login .container .parent,
	#quiz_section .container .parent,
	#checkout_section .container .parent {
		flex-wrap: wrap;
	}

	#about .container .parent .child,
	#login .container .parent .child,
	#quiz_section .container .parent .child,
	#checkout_section .container .parent .child {
		width: 100%;
	}

	#about .container .parent .child p {
		font-size: 18px;
	}

	#about .container .parent .child {
		width: 100%;
	}
}
/* Section About Ends Here */




/* Section Features Goes Here */
#features {
	margin: 50px 0;
}

#features .container,
#checkout_section .container {
	width: 1174px;
	margin: auto;
}

#features .container .parent,
#checkout_section .container .parent {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

#features .container .parent .child {
	border-radius: 50%;
	border: 1px solid #151C33;
	display: flex;
	justify-content: center;
	align-items: center;
	word-break: break-all;
	word-wrap: break-word;
	text-align: center;
	padding: 25px;
	height: 250px;
	width: 250px;
}

#features .container .parent .child:last-child {
	background: #151C33;
	color: white;
}

@media screen and (max-width: 1174px) {
	#features {
		padding: 15px;
		margin: 0;
	}

	#features .container,
	#checkout_section .container {
		width: 100%;
	}

	#features .container .parent {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#features .container .parent .child {
		width: calc(100% / 2.1);
		margin: 25px 0;
		border-radius: 15px;
		padding: 25px;
	}

	#features .container .parent .child p {
		font-size: 18px;
	}
}
/* Section Features Ends Here */

/* Section Courses Goes Here */
#courses {

}

#courses .container {
	width: 1174px;
	margin: auto;
	border: 1px solid #151C33;
	position: relative;
	padding: 64px 83px 72px;
	border-radius: 20px;
}

#courses .container:before {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 41px;
	height: 41px;
	background-image: linear-gradient(45deg,#151C33 50%,#e4e4e4 50%,#e4e4e4 100%);
	content: "";
}

#courses .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	margin-bottom: 50px;
}

#courses .container .parent .child {
	width: calc(100% / 2);
	transition: all .3s ease;
	overflow: hidden;
	position: relative;
}

#courses .container .parent .child .inner-box,
#facts .container .parent .child .inner-box  {
	position: absolute;
	background: rgba(255, 255, 255, 0.23);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4.7px);
	-webkit-backdrop-filter: blur(4.7px);
	width: 100%;
	bottom: -100%;
	left: 0;
	right: 0;
	border-radius: 15px;
	padding: 25px;
	transition: all .3s ease;
}

#courses .container .parent .child:hover .inner-box,
#facts .container .parent .child:hover .inner-box  {
	bottom: 0;
}

#courses .container .parent.feature-parent .child {
	padding: 15px;
}

#courses .container .parent .child h1 {
	font-size: 44px;
	margin-bottom: 25px;
}

#courses .container .parent .child p {
	margin-bottom: 25px;
}

#courses .container .parent .child img {
	width: 100%;
	border-radius: 25px;
	text-align: center;
}

#courses .container .parent .child.d-flex {
	align-items: center;
	flex-direction: row;
	justify-content: center;
}


#courses .container .parent .child ul {
	padding: 0;
}

#courses .container .parent .child li {
	list-style: none;
}

#courses .container .parent .child main {
	margin: 0 auto;
}

#courses .container .parent .child main h1 {
	margin-bottom: 50px;
}

#courses .container .parent .child .wrapper {
	position: relative;
}

#courses .container .parent .child .inner-box a,
#facts .container .parent .child .inner-box a {
	border: 2px solid #151C33;
	background: #151C33;
	color: white;
	text-decoration: none;
	padding: 15px 25px;
	font-size: 14px;
	/* margin-right: 25px; */
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	transition: all .3s ease;
	align-items: center;
}

#courses .container .parent .child .inner-box a i,
#facts .container .parent .child .inner-box a i {
	font-size: 14px;
	transition: all .3s ease;
	margin-bottom: 0;
}

#courses .container .parent .child .inner-box a:hover i,
#facts .container .parent .child .inner-box a:hover i {
	transform: translateX(5px);
}

#courses .container .parent .child .wrapper:before, #courses .container .parent .child .wrapper:after {
	position: absolute;
	top: 0;
	z-index: 1;
	content: "";
	display: block;
	width: 20px;
	height: 100%;
}
/*#courses .container .parent .child .wrapper:before {
  left: 0;
  background: linear-gradient(90deg, #bebdbd, transparent);
}
#courses .container .parent .child .wrapper:after {
  right: 0;
  background: linear-gradient(-90deg, #bebdbd, transparent);
}*/

#courses .container .parent .child .items {
	position: relative;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0;
	cursor: pointer;
}
#courses .container .parent .child .items.active {
	cursor: grab;
}

#courses .container .parent .child .item {
	display: inline-block;
	margin-left: 20px;
	user-select: none;
	/*background: #52b46e;*/ /* #ffdf6e */
	border: 2px solid #52b46e;
	/*width: 50%;*/
	padding: 25px 15px;
	border-radius: 15px;
	color: #222;
	font-size: 18px;
	text-transform: uppercase;
	font-weight: bold;
}
#courses .container .parent .child .item:last-child {
	margin-right: 20px;
}

/*@media screen and (min-width: 500px) {
  #courses .container .parent .child .item {
    width: 33%;
  }
}
@media screen and (min-width: 800px) {
  #courses .container .parent .child .item {
    width: 25%;
  }
}*/
@media screen and (min-width: 1200px) {
	#courses .container .parent .child .wrapper {
		margin-left: -20px;
	}

	/* #courses .container .parent .child .item {
       width: 20%;
     }*/
}

#courses .container .parent .child.w-100 {
	width: 100%;
}

.m-0 {
	margin: 0!important;
}

#courses .container .parent.card-parent {
	flex-wrap: wrap;
	justify-content: space-between;
}

#courses .container .parent.card-parent .child {
	background-color: #52b46e; /* #ffdf6e */
	border-radius: 15px;
	width: calc(100% / 3.2);
	padding: 25px;
	margin: 15px 2px;
}

#courses .container .parent.card-parent .child i {
	font-size: 54px;
	color: white;
	margin-bottom: 15px;
}

#courses .container .parent.card-parent .child h3 {
	font-size: 24px;
	font-weight: 900;
	margin-bottom: 15px;
}

#courses .container .parent.card-parent .child p {
	color: white;
	height: 120px;
}

@media screen and (max-width: 1174px) {
	#courses {
		padding: 15px;
	}
	#courses .container,
	#courses .container .parent .child {
		width: 100%!important;
	}

	#courses .container .parent {
		flex-wrap: wrap;
	}

	#courses .container {
		padding: 15px;
	}

	#courses .container .parent .child h3 {
		font-size: 14px;
	}
}
/* Section Courses Ends Here */

/* Footer Section Goes Here */
footer {
	background: #151C33;
	margin-top: 80px;
}

footer .container {
	width: 1174px;
	margin: auto;
	padding: 50px 0;
}

footer .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer .container .parent .child {
	color: white;
	width: calc(100% / 3.5);
}

footer .container .parent .child h1 {
	color: #959595;
	font-size: 24px;
	margin-bottom: 12px;
}

footer .container .parent .child p {
	font-size: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

footer .container .parent {
	margin-bottom: 50px;
}

footer .container .parent .child h2 {
	font-size: 60px;
}

footer .container .parent .child form input,
footer .container .parent .child form button  {
	background: transparent;
	border: 2px solid white;
	outline: 0;
	color: white;
	padding: 15px 15px;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	transition: all .3s ease;
}

footer .container .parent .child form button:hover {
	background-color: white;
	color: #151C33;
	cursor: pointer;
}

footer .container .parent .child form button {
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

@media screen and (max-width: 1174px) {
	footer .container, footer .container .parent .child {
		width: 100%!important;
	}

	footer .container .parent {
		flex-wrap: wrap;
	}

	footer .container {
		padding: 25px;
	}
}
/* Footer Section Ends Here */


/* Student Profile Section Goes Here */
#student_profile {

}

#student_profile .container {
	width: 1174px;
	margin: auto;
}

#student_profile .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#student_profile .container .parent .child {
	width: calc(100% / 2);
}

#student_profile .container .parent .child.img_child {
	background-image: url(https://media.istockphoto.com/id/1147195672/photo/focused-developer-coding-on-computer-monitors-working-late-in-office.jpg?s=612x612&w=0&k=20&c=R6oPQ_vkXAxCzpi4UFsN28pdU0C0LJL8JLAX-HwO90Q=);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 550px;
	border-radius: 50%;
}

#student_profile .container .parent .child:nth-child(2) {
	padding: 25px;
}

#student_profile .container .parent .child h1 {
	font-size: 65px;
}

#student_profile .container .parent .child h2 {
	font-weight: 300;
	color: #52b46e;
	margin: 15px 0 45px 0;
}

#student_profile .container .parent .child:nth-child(2) a {
	border: 2px solid #151C33;
	background: #151C33;
	color: white;
	text-decoration: none;
	padding: 15px 25px;
	margin-right: 25px;
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: all .3s ease;
	position: relative;
	z-index: 1;
}

/*#student_profile .container .parent .child:nth-child(2) a:before {
	position: absolute;
	content: '';
	bottom: -15px;
	right: -15px;
	background-color: rgba(0,0,0,0.3);
	width: 100%;
	height: 100%;
	border-radius: 8px;
	z-index: -1;
}

#student_profile .container .parent .child:nth-child(2) a:hover:before {
	bottom: 0;
	right: 0;
}*/

#student_profile .container .parent .child:nth-child(2) a:hover {
	background: transparent;
	color: #151C33;
}

@media screen and (max-width: 1174px) {
	#student_profile .container {
		padding: 12px
	}

	#student_profile .container,
	#student_profile .container .child {
		width: 100%!important;
	}

	#student_profile .container .child {
		padding: unset!important;
	}

	#student_profile .container .child.img_child {
		height: 450px!important;
	}

	#student_profile .container .parent {
		flex-wrap: wrap;
	}

	#student_profile .container .parent .child h1 {
		font-size: 36px;
	}
}
/* Student Profile Section Ends Here */

/*Skills Section Goes Here*/
#skills .container {
	width: 1174px;
	margin: auto;
}

.title {
	-webkit-text-stroke: 1px #151C33;
	-webkit-text-fill-color: transparent;
	font-size: 64px;
	margin: 65px 0 15px 0;
	padding: 12px;
}

#skills .container .parent {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

#skills .container .parent .child {
	width: calc(100% / 5.5);
	margin: 12px;
	padding: 12px
}

@media screen and (max-width: 1174px) {
	#skills .container {
		width: 100%!important;
		padding: 12px;
	}

	#skills .container .parent .child {
		width: calc(100% / 2.5)!important;
		padding: 25px 0!important;
	}

	.title {
		font-size: 45px;
	}
}
/*Skills Section Ends Here*/

/* Portfolio Section Goes Here */
#portfolio .container {
	width: 1174px;
	margin: auto;
}

#portfolio .container .parent {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
}

#portfolio .container .parent .child {
	width: calc(100% / 3.5);
	margin: 12px;
	border: 1px solid #151C33;
	padding: 12px;
	border-radius: 15px;
}
/* Portfolio Section Ends Here */

/* Student List Section Goes Here */
#student-list .container {
	width: 1174px;
	margin: auto;
}

#student-list .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

#student-list .container .parent .child .ava_child {
	background-image: url(https://onlinecoursescertifications.com/wp-content/uploads/2023/02/computer-programming.jpg);
	background-size: cover;
	background-position: center;
	border-radius: 15px;
	background-repeat: no-repeat;
	height: 250px;
}

#student-list .container .parent .child {
	width: calc(100% / 4.5);
}

#student-list .container .parent .child p {
	margin: 5px 0 25px 0;
}

#student-list .container .parent .child a {
	border: 2px solid #52b46e;
	background: #52b46e;
	color: white;
	text-decoration: none;
	padding: 15px 25px;
	margin-right: 25px;
	border-radius: 8px;
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

@media screen and (max-width: 1174px) {
	#student-list .container {
		padding: 12px;
	}
	#student-list .container,
	#student-list .container .parent .child {
		width: 100%!important;
	}

	#student-list .container .parent .child {
		margin: 15px 0;
	}
}
/* Student List Section Ends Here */

/* Shop Section Goes Here */
#shop .container {
	width: 1174px;
	margin: auto;
}

#shop .container .parent {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

#shop .container .parent .child {
	width: calc(100% / 4.5);
	margin: 15px 0;
}

#shop .container .parent .child img {
	width: 100%;
	mix-blend-mode: screen;
}

#shop .container .parent .child .pic {
	height: 250px;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	border-radius: 15px;
	background-position: center;
}

#shop .container .parent .child .pic_one {
	background-image: url(../img/shop/hat.png);
}

#shop .container .parent .child .pic_two {
	background-image: url(../img/shop/pen.png);
}

#shop .container .parent .child .pic_three {
	background-image: url(../img/shop/tshirts.png);
}

#shop .container .parent .child .pic_four {
	background-image: url(../img/shop/футболка.png);
}

#shop .container .parent .child .pic_five {
	background-image: url(https://books.goalkicker.com/DotNETFrameworkBook/DotNETFrameworkGrow.png);
}

#shop .container .parent .child .pic_six {
	background-image: url(https://images.manning.com/book/6/a448bd6-cfb1-4d49-ad4c-6461b48bd226/Riscutia-PTypes-HI.png);
}

#shop .container .parent .child a {
	border: 2px solid #52b46e;
	background: transparent;
	color: #52b46e;
	text-decoration: none;
	padding: 15px 25px;
	margin-right: 25px;
	border-radius: 8px;
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

#shop .container .parent .child p {
	margin: 5px 0 25px 0;
}

@media screen and (max-width: 1174px) {
	#shop .container, #shop .container .child {
		width: 100%!important
	}
	#shop .container {
		padding: 12px;
	}
}
/* Shop Section Ends Here */


/* Modal Goes Here */
/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 100px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* #151C33 w/ opacity */
}

/* Modal Content */
.modal-content {
	position: relative;
	background-color: #fefefe;
	margin: auto;
	border-radius: 25px;
	padding: 0;
	border: 1px solid #888;
	width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-animation-name: animatetop;
	-webkit-animation-duration: 0.4s;
	animation-name: animatetop;
	animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

@keyframes animatetop {
	from {top:-300px; opacity:0}
	to {top:0; opacity:1}
}

/* The Close Button */
.close {
	color: white;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: #151C33;
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 2px 16px;
	background-color: #5cb85c;
	color: white;
	border-radius: 25px 25px 0 0;
	padding: 10px 15px;
}

.modal-body {
	padding: 50px;
}

.modal-body .parent {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-body .parent .child {
	width: calc(100% / 2);
	padding: 12px;
}

.modal-footer {
	padding: 2px 16px;
	background-color: #5cb85c;
	color: white;
}

.modal-body form input, .modal-body form button {
	width: 100%;
	outline: 0;
	border: 2px solid #52b46e;
	border-radius: 10px;
	padding: 15px;
	background-color: transparent;
	transition: all .3s ease;
}

.modal-body form button:hover {
	background-color: #52b46e;
	color: white;
	cursor: pointer;
}

.modal-body form button {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal-body h1 {
	margin-bottom: 15px;
	margin: 0;
	padding: 0;
}

.modal-body form input:first-child {
	margin-right: 5px;
}

.wrapper {
	display: flex;
	width: 100%;
	padding: 5px;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width: 768px) {
	.modal-body .parent .child:first-child {
		display: none;
	}

	.modal-body .parent .child {
		width: 100%!important;
	}

	.modal-body {
		padding: 15px;
	}
}
/* Modal Ends Here */


/* Why Features Section Goes Here */
.bg-dark {
	/*background-color: rgb(13 18 36/1);*/
}

#why-features {
	margin: 80px 0;
}

#why-features .container {
	width: 1174px;
	margin: auto;
}

#why-features .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

#why-features .container .parent .child {
	width: calc(100% / 2);
	padding: 15px;
}

#why-features .container .parent .child img {
	width: 100%;
}

.purple {
	color: rgb(166 121 255/1);
}

#why-features .container .parent .child i {
	border-radius: 50%;
	padding: 12px;
	font-size: 22px;

	/* From https://css.glass */
	background: rgba(255, 255, 255, 0.23);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4.7px);
	-webkit-backdrop-filter: blur(4.7px);
	border: 1px solid rgba(255, 255, 255, 0.42);
}

#why-features .container .parent .child p {
	margin: 15px 0 2px 0;
}

#why-features .container .parent .child h2 {
	font-size: 32px!important;
	margin-bottom: 20px;
}

.pink {
	color: rgb(255 117 211/1)
}

.green {
	color: rgb(115 204 175/1)
}

.purplerish {
	color: rgb(166 121 255/1)
}

.big-size {
	font-size: 34px;
	margin-bottom: 80px;
	text-transform: uppercase;
	font-weight: 900;
	margin-top: 5px;
}

.forth-parent, .second-parent {
	text-align: right;
}

#why-features .container .parent .child:first-child {
	border-right: 1px solid #151C33;
}

@media screen and (max-width: 1174px) {
	#why-features .container,
	#why-features .container .parent .child {
		width: 100%;
	}

	#why-features .container .parent .child:first-child {
		border: 0;
	}

	.forth-parent, .second-parent {
		flex-direction: column-reverse;
		text-align: left;
	}

	#why-features .container {
		padding: 20px;
	}
}
/* Why Features Section Ends Here */

/* Binary Animation Goes Here */
.binary_animation {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

circlec{
	overflow:hidden;
}

circlec {
	position: absolute;
	z-index: 10;
}

canvas {
	width: 100%!important;
	height: 100%;
}
/* Binary Animation Ends Here */

/* Some Facts About Online lessons section Goes Here */
#facts {

}

#facts .container {
	width: 1174px;
	margin: auto;
}

#facts .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

#facts .container .parent .child {
	width: calc(100% / 2.5);
	padding: 25px;
	position: relative;
	overflow: hidden;
	margin: 15px;
	background-color: #dedbdb;
	border-radius: 15px;
}

#facts .container .parent .child i{
	margin-bottom: 15px;
	font-size: 32px;
}

#facts .container .parent .child h3 {
	margin-bottom: 15px;
	color: #52b46e;
	font-size: 24px;
}

#facts .container .parent .child .inner-box h3{
	color: #151C33!important;
	font-size: 18px;
}

#facts .container .parent .child.icon-child i {
	margin-bottom: unset;
	font-size: 18px;
}

#facts .container .parent .child.icon-child {
	display: flex;
	justify-content: center;
	align-items: center;
	width: unset;
	background-color: white;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	padding: 15px 18px;
	font-size: 18px;
	font-weight: 900;
}

#facts .container .parent .child .inner-box {
	bottom: -110%;
}

#facts .container .parent .child .inner-box h3 {
	margin-bottom: 25px;
}

@media screen and (max-width: 1174px) {
	#facts .container {
		width: 100%;
	}

	#facts .container .parent {
		flex-wrap: wrap;
	}

	#facts .container .parent .child {
		width: 100%;
	}

	#facts .container .parent .child.icon-child {
		display: none;
	}
}
/* Some Facts About Online lessons section Goes Here */


/* Partners Section Goes Here */
#partners .container {
	width: 1174px;
	margin: auto;
}

@media screen and (max-width: 1174px) {
	#partners {
		padding: 4px;
	}
	#partners .container {
		width: 100%;
	}
}

#partners .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

#partners .section-header h2 {
	-webkit-text-stroke: 1px #151C33;
	-webkit-text-fill-color: transparent;
	font-size: clamp(45px, 5vw, 65px);
	text-align: center;
	margin-bottom: 25px;
}

#partners .section-header p {
	text-align: center;
}

#partners .container .parent .child {
	width: calc(100% / 5.5);
	border: 1px solid #151C33;
	text-align: center;
	padding: 25px;
	border-radius: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 150px;
	margin-bottom: 25px;
}

#partners .container .parent .child img,
#partners .container.mobile-view-slider .item img {
	width: 100%;
	max-width: 120px;
	filter: grayscale(100%);
	padding: 15px;
	transition: all .3s ease;
	cursor: pointer;
}

#partners .container .parent .child:hover img,
#partners .container.mobile-view-slider .item:hover img  {
	filter: grayscale(0);
}

#partners .row  {
	position: relative;
}

.swiper-button-next, .swiper-button-prev {
	color: #151C33!important;
}

#partners .container.mobile-view-slider .item {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #f7f9fc;
	margin: 12px;
	border-radius: 15px;
	height: 250px;
}

#partners .container.mobile-view-slider .item img {

}

#partners .mobile-view-slider {
	display: none;
}

@media screen and (max-width: 768px) {
	#partners .mobile-view-slider {
		display: block;
	}
	#partners .pc-view-slider {
		display: none;
	}
}

#partners .swiper-button-prev, #partners .swiper-rtl .swiper-button-next {
	left: 40px;
}

#partners .swiper-button-next, #partners .swiper-rtl .swiper-button-prev {
	right: 40px;
}

#partners .swiper-pagination {
	display: none;
}
/* Partners Section Ends Here */

/* Profile Section Goes Here */
#qr_profile {

}

#qr_profile .container {
	width: 1174px;
	margin: auto;
	height: 100%;
}

#qr_profile .container .parent {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

#qr_profile .container .parent .child {
	width: calc(100% / 2);
	padding: 15px;
}

#qr_profile .container .parent .child p {
	font-weight: 900!important;
}

#qr_profile .container .parent .child h1 {
	font-size: clamp(32px, 5vw, 62px);
	margin-bottom: 20px;
	text-transform: uppercase;
	font-weight: 900;
	-webkit-text-stroke: 1px rgb(115 204 175/1);
	-webkit-text-fill-color: transparent;
}

#qr_profile .container .parent .child img {
	width: 100%;
}

@media screen and (max-width: 1174px) {
	#qr_profile .container, #qr_profile .container .parent .child {
		width: 100%;
	}
}
/* Profile Section Ends Here */

.page {
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: auto;
}

/* Video Section Goes Here */
#video .container {
	width: 1174px;
	margin: auto;
}

#video .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#video .container .parent .child {
	width: 100%;
}

#video .container .parent .child video {
	width: 100%;
	border-radius: 15px;
}

#video #add-information .collapsible {
	border-radius: 5px;
}

#video .locked {
	background-color: #151C33;
	color: white;
	border: 1px solid #151C33;
	padding: 18px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	outline: none;
	transition: all .3s ease;
	border-radius: 5px;
	font-size: 15px;
	margin: 5px 0;
}
/* Video Section Ends Here */


/* Login Page Goes Here */

/*.login-page {
	width: 360px;
	padding: 8% 0 0;
	margin: auto;
}*/
/*.form {
	position: relative;
	z-index: 1;
	background: #FFFFFF;
	max-width: 360px;
	margin: 0 auto 100px;
	padding: 45px;
	text-align: center;
	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}*/

#login {
	height: 100vh;
}

#login .container {
	width: 100%;
}

#login .container,
#login .container .parent {
	height: 100%;
}

#login .container .parent .child {
	width: calc(100% / 2);
}

@media screen and (max-width: 1174px) {
	#login .container .parent .child {
		padding: 25px!important;
		width: 100%;
	}

	#login .container .parent .child:nth-child(2) {
		display: none;
	}
}

#login .container .parent .child:first-child {
	padding: 150px;
}

#login .container .parent .child:nth-child(2) {
	height: 100%;
	background-color: transparent;
	border-bottom-left-radius: 150px;
}

#login .container .parent .child canvas {
	height: 100%!important;
	aspect-ratio: unset;
	background-color: transparent;
	border-bottom-left-radius: 150px;
}

.form input {
	font-family: "Roboto", sans-serif;
	outline: 0;
	background: #f2f2f2;
	width: 100%;
	border: 0;
	margin: 0 0 15px;
	padding: 15px;
	box-sizing: border-box;
	font-size: 14px;
}
.form button {
	font-family: "Roboto", sans-serif;
	text-transform: uppercase;
	outline: 0;
	background: #4CAF50;
	width: 100%;
	border: 0;
	padding: 15px;
	color: #FFFFFF;
	font-size: 14px;
	-webkit-transition: all 0.3 ease;
	transition: all 0.3 ease;
	cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
	background: #43A047;
}
.form .message {
	margin: 15px 0 0;
	color: #b3b3b3;
	font-size: 12px;
}
.form .message a {
	color: #4CAF50;
	text-decoration: none;
}
.form .register-form {
	display: none;
}
/*.container {
	position: relative;
	z-index: 1;
	max-width: 300px;
	margin: 0 auto;
}
.container:before, .container:after {
	content: "";
	display: block;
	clear: both;
}
.container .info {
	margin: 50px auto;
	text-align: center;
}
.container .info h1 {
	margin: 0 0 15px;
	padding: 0;
	font-size: 36px;
	font-weight: 300;
	color: #1a1a1a;
}
.container .info span {
	color: #4d4d4d;
	font-size: 12px;
}
.container .info span a {
	color: #151C33000;
	text-decoration: none;
}
.container .info span .fa {
	color: #EF3B3A;
}*/
/*body {
	background: #76b852; !* fallback for old browsers *!
	background: rgb(141,194,111);
	background: linear-gradient(90deg, rgba(141,194,111,1) 0%, rgba(118,184,82,1) 50%);
	font-family: "Roboto", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}*/
/* Login Page Goes Here */

/* Globals */
.content p {
	margin-top: 0;
	margin-bottom: 20px!important;
}
.btn-download {
	padding: 15px 20px;
	border: 1px solid #4CAF50!important;
	color: #4CAF50!important;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .3s ease;
	margin-right: 15px;
}

.btn-download:hover {
	background-color: #4CAF50;
	color: white!important;
}

.content .btn-wrapper {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.exam {
	background-color: indianred;
}

.lecture {
	background-color: #4CAF50;
}

.p-1 {
	padding: 5px 8px;
}

.w-medium {
	width: 80px;
}

.d-flex {
	display: flex;
}

.flex-row {
	flex-direction: row;
}

.mr-1 {
	margin-right: 10px;
}

.rounded-1 {
	border-radius: 5px;
}

.align-items-center {
	align-items: center;
}
/* Globals */

.text.single-line {
	overflow: hidden;
	/*text-overflow: ellipsis;*/
	/*white-space: nowrap;*/
}

.hyper_link {
	text-decoration: none;
	color: #151C33;
	margin: 15px 0;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	transition: all .3s ease;
}

.hyper_link:hover {
	color: #4CAF50;
}

hr {
	margin: 15px 0;
}



.align-items-stretch {
	align-items: stretch;
}

.w-100 {
	width: 100%;
}

.ml-2 {
	margin-left: 15px;
}

/* Cart Sidebar */
.icon-cart{
	position: relative;
}
.icon-cart span{
	position: absolute;
	background-color: #5cb85c;
	width: 30px;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	color: #fff;
	top: -80%;
	right: -30px;
}
.title{
	font-size: xx-large;
}
.listProduct .item img{
	width: 90%;
	filter: drop-shadow(0 50px 20px #151C339);
}
.listProduct{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.listProduct .item{
	background-color: #EEEEE6;
	padding: 20px;
	border-radius: 20px;
}
.listProduct .item h2{
	font-weight: 500;
	font-size: large;
}
.listProduct .item .price{
	letter-spacing: 7px;
	font-size: small;
}
.listProduct .item button{
	border: 2px solid #151C33;
	background: #151C33;
	color: white;
	text-decoration: none;
	padding: 15px 25px;
	font-size: 14px;
	/* margin-right: 25px; */
	border-radius: 8px;
	display: flex;
	justify-content: space-between;
	transition: all .3s ease;
	align-items: center;
	font-size: 14px;
}

.listProduct .item button i {
	font-size: 14px!important;
	margin-bottom: 0!important;
}

/* cart */
.cartTab{
	width: 400px;
	background-color: #151C33;
	color: #eee;
	position: fixed;
	top: 0;
	right: -400px;
	bottom: 0;
	display: grid;
	grid-template-rows: 70px 1fr 70px;
	transition: .5s;
	z-index: 9999;
}
body.showCart .cartTab{
	right: 0;
}
/*body.showCart .container{
    transform: translateX(-250px);
}*/
.cartTab h1{
	padding: 20px;
	margin: 0;
	font-weight: 300;
}
.cartTab .btn{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}
.cartTab button{
	background-color: #5cb85c;
	border: none;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	cursor: pointer;
	padding: 15px 25px;
	font-size: 14px;
}

.final_result {
	display: flex;
	padding: 20px;
	justify-content: space-between;
	align-items: center;
}

.cartTab .close{
	background-color: #eee;
	color: #151C33;
}

.quantity, .quantity span {
	display: flex!important;
	justify-content: center;
	align-items: center;
}

.listCart .item img{
	width: 100%;
}
.listCart .item{
	padding: 5px;
	display: grid;
	border-bottom: 1px solid white;
	grid-template-columns: 50px 180px 85px 1fr;
	gap: 10px;
	text-align: center;
	align-items: center;
}
.listCart .quantity span{
	display: inline-block;
	width: 25px;
	height: 25px;
	background-color: #eee;
	border-radius: 50%;
	color: #555;
	cursor: pointer;
}
.listCart .quantity span:nth-child(2){
	background-color: transparent;
	color: #eee;
	cursor: auto;
}
.listCart .item:nth-child(even){
	background-color: #eee1;
}
.listCart{
	overflow: auto;
}
.listCart::-webkit-scrollbar{
	width: 0;
}
@media only screen and (max-width: 992px) {
	.listProduct{
		grid-template-columns: repeat(3, 1fr);
	}
}


/* mobile */
@media only screen and (max-width: 768px) {
	.listProduct{
		grid-template-columns: repeat(2, 1fr);
	}
}

nav svg{
	width: 15px!important;
}

#cart_section {
	position: fixed;
	bottom: 50px;
	right: 50px;
	background-color: #151C33;
	padding: 19px 23px;
	border: 5px solid #5cb85c;
	border-radius: 50%;
}

#cart_section svg {
	fill: white;
	stroke: white;
	width: 25px!important;
}

#cart_section svg path {
	color: white;
}

/* Check out Page Goes Here */
#checkout_section h2 {
	margin-top: 15px;
}

@media screen and (min-width: 1174px) {
	#checkout_section .container .parent {
		align-items: flex-start;
	}

	#checkout_section .container .parent .child:first-child {
		position: sticky;
		top: 20px;
	}
}

#checkout_section .container .parent .child ul {
	list-style: none;
}

#checkout_section .container .parent .child i {
	color: #5cb85c;
	font-weight: 900!important;
}

#checkout_section table {
	margin-top: 15px;
	border-collapse: collapse;
	width: 100%;
}

#checkout_section table th, #checkout_section table td {
	padding: 12px 18px;
}


.remove_btn {
	padding: 5px 18px;
	cursor: pointer;
	background-color: transparent;
	border: 0;
	outline: 0;
	width: 100%;
	color: red;

}
.remove_btn i {
	font-weight: 900!important;
	font-size: 18px;
}

.green_color {
	color: #5cb85c;
}

.big_size {
	font-size: clamp(24px, 5vw, 45px);
}

#checkout_section .container .parent .child {
	padding: 25px;
}

.input_wrapper {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	margin-bottom: 10px;
	width: 100%;
}

.input_wrapper input, .input_wrapper button {
	padding: 10px 18px;
	border-radius: 5px;
	outline: 0;
	border: 0;
	width: 100%;
	margin-top: 5px;
	padding-left: 10px;
}

.big_wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.big_wrapper .input_wrapper:nth-child(2) {
	margin-left: 15px;
}

.submit_btn {
	background-color: #5cb85c;
	font-weight: 900;
	color: white;
}

.image_wrapper img {
	width: 250px;
}

.image_wrapper {
	margin-top: 15px;
	text-align: center;
}

#checkout_section .container .parent .child a {
	text-decoration: none;
	color: white;
	background-color: #5cb85c;
	border-radius: 5px;
	width: 100%;
	padding: 10px 18px;
	text-align: center;
	margin-top: 25px;
}

/* Check out Page Ends Here */

/* Complete Purchase */
#purchase_completed .container {
	width: 100%;
	margin: auto;
	height: 100vh;
	padding: 15px;
}

@media screen and (min-width: 1174px) {
	#purchase_completed .container {
		width: 1174px!important;
	}
}

#purchase_completed .container .parent {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

#purchase_completed .container .parent .child {
	text-align: center;
	background-color: white;
	padding: 50px;
	border-radius: 5px;
}

#purchase_completed .container .parent .child p {
	margin-bottom: 30px;
}

#purchase_completed .container .parent .child img {
	margin-bottom: 10px;
}

#purchase_completed .container .parent .child a {
	text-decoration: none;
	color: white;
	border-radius: 5px;
	background-color: #5cb85c;
	padding: 15px 25px;
	transition: all .3s ease;
}

#purchase_completed .container .parent .child a:hover {
	background-color: #489348;
}
/* Complete Purchase */




/* Shop Page Section Goes Here */
#shop_page_section h2 {
	color: #5cb85c;
}

#shop_page_section .container .parent .child ul {
	list-style: none;
}

#shop_page_section .container .parent .child hr {
	width: 60%;
}

#shop_page_section .container .parent .child h3 {
	margin-bottom: 15px;
}

#shop_page_section .container .parent .child ul li a {
	text-decoration: none;
	color: #151C33;
}

#shop_page_section .container {
	width: 100%;
	margin: auto;
}

@media screen and (max-width: 1048px) {
	#shop_page_section .container {
		padding: 25px;
	}
}

@media screen and (min-width: 1174px) {
	#shop_page_section .container {
		width: 1174px;
	}

	.sticky {
		position: sticky;
		top: 20px;
		margin-bottom: 25px;
	}

	#shop_page_section .container .parent .child:first-child {
		width: 30%;
		height: fit-content;
	}

	#shop_page_section .container .parent .child:nth-child(2) {
		width: 70%;
	}

	#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory .child {
		height: auto;
		width: auto!important;
	}
}

#shop_page_section .container .parent {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory .child {
	box-shadow: 0 4px 40px rgba(0,0,0,0.03);
	transition: all .3s ease;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory .child:hover {
	background-color: #5cb85c;
	color: white;
}

#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory .child .inner-box {
	display: flex;
	justify-content: space-between;
	align-items: center;

}

#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory .child i {
	margin-bottom: 10px;
	font-size: 35px;
}

#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory .child .inner-box div {
	width: 100%;
	margin-top: 10px;
}

#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory .child .inner-box a,
#shop_page_section .container .parent .child:nth-child(2) .parent .subcategory .child .inner-box button {
	background-color: #151C33;
	display: flex;
    justify-content: space-between;
	padding: 12px 25px;
	border-radius: 5px;
    align-items: center;
    width: 100%;
	color: white;
	text-decoration: none;
}

#shop_page_section .container .parent .child:nth-child(2) .parent .child .inner-box a i,
#shop_page_section .container .parent .child:nth-child(2) .parent .child .inner-box button i {
	font-size: 14px;
	margin-bottom: 0;
}

#shop_page_section .price-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#shop_page_section .range-section {
	padding-right: 50px;
	margin-bottom: 45px;
}

#shop_page_section label {
  font-size: 14px;
  font-weight: 500;
}

#shop_page_section p {
  font-size: 16px;
  font-weight: 600;
}

#shop_page_section .range-slider {
  position: relative;
  margin: 15px 0 30px 0;
}

#shop_page_section .range-fill {
  height: 6px;
  background-color: #36b37e;
  position: absolute;
  z-index: 1;
}

#shop_page_section input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  background: transparent;
  position: absolute;
  left: 0;
}

#shop_page_section input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  background: #36b37e;
  cursor: pointer;
  margin-top: -5px;
  position: relative;
  z-index: 1;
}

#shop_page_section input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: #e8e8e8;
  border-radius: 3px;
  border: none;
}
/* Shop Page Section Ends Here */


/* Initial state, hide all elements */
[data-filter] {
	transition: all .3s ease;
	display: none;
}

/* Show elements with the selected data-filter value */
[data-filter="active"] {
	display: block;
	transition: all .3s ease;
}

#languageFilter {
	padding: 12px;
    width: 80%;
    outline: 0;
    border: 1px solid #36b37e;
    background: transparent;
}

.code_container, .output_container {
	padding: 15px;
	background: #d3d3d3;
    border-left: 5px solid #4caf50;
	border-radius: 5px;
	color: #151C33;
}

.code_container.red {
	border-color: red;
}

.table_container {
	width: 100%;
	border-radius: 10px;
}

.table_container, tr, td, th {
	border: 1px solid #151C33;
	border-collapse: collapse;
}

.table_container td,.table_container th {
	padding: 15px;
}

.table_container thead {
	background-color: #4caf50;
	color: white;
}

.table_container tbody tr:nth-child(2n) {
	background-color: #d3d3d3;
}

h2 {
	margin: 15px 0;
}

#add-information img {
	width: 100%;
	margin: 15px 0;
}

.output_container {
	border-left: 5px solid blue;
}

.note_container {
	background-color: #FFEE8C;
	padding: 15px;
	border-radius: 5px;
}

.price_status {
	position: absolute;
	top: 0;
	right: 0;
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	padding: 15px;
	background-color: #5cb85c;
	color: white;
}

.listProduct .child {
	position: relative;
}

h5, h4 {
	margin: 15px 0;
}

#editor {
    background-color: #e4e4e4;
}

#editor .container {
    width: 100%;
    max-width: 1174px;
    margin: auto;
}

#editor .container .parent {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;

}

#editor .container .parent .child {
    width: calc(50% / 2);
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media screen and (max-width: 1174px) {
    #editor .container .parent {
        flex-wrap: wrap;
    }

    #editor .container .parent .child {
        width: 100%;
    }
}

#editor .container .parent .child .code_container {
    display: flex;
    flex-direction: column;
    /* margin: 15px 0; */
    height: 100%;
	margin: 10px 0;
}

#editor .container .parent .child .code_container label {
	font-size: 24px;
	display: flex;
	align-items: center;
	text-transform: uppercase;
}

#editor .container .parent .child .code_container textarea {
	color: #151C33;
	font-weight: bold;
	font-size: 18px;
	font-family: gilroy;
}

#editor .container .parent .child:first-child .code_container:first-child {
	border-left: 5px solid #e65127;
}

#editor .container .parent .child .code_container:nth-child(2) {
	border-left: 5px solid #0a71b6;
}

#editor .container .parent .child .code_container:nth-child(3) {
	border-left: 5px solid #e7a328;
}

#editor .container .parent .child:first-child .code_container:first-child label {
	color: #e65127;
}

#editor .container .parent .child .code_container:nth-child(2) {
	color: #0a71b6;
}

#editor .container .parent .child .code_container:nth-child(3) {
	color: #e7a328;
}

#editor .container .parent .child:nth-child(2) .code_container {
	margin-left: 15px;
}

#editor .container .parent .child:nth-child(2) .code_container label {
	color: #5cb85c;
}

#editor .container .parent .child .code_container textarea,
#editor .container .parent .child iframe  {
    height: 250px;
    padding: 5px;
    border: 0;
    outline: 0;
    border-radius: 5px;
    background-color: #d3d3d3;
    width: 100%;
}

#editor .container .parent .child .code_container iframe {

    height: 100%;
}

/* Style the tab */
.tab {
  overflow: hidden;
  /*border: 1px solid #ccc;*/
  /*background-color: #f1f1f1;*/

	background-color: transparent!important;
}

/* Style the buttons inside the tab */
.tab button:first-child {
	border-left: 1px solid #ccc;
}
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
	border-top: 1px solid #ccc!important;
	border-right: 1px solid #ccc!important;
	font-weight: bold;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #dddcdc!important;
	color: #151C33!important;
}

/* Style the tab content */
.tabcontent {
  display: none;
	padding: 15px 30px;
  border: 1px solid #ccc;
  /*border-top: none;*/
	background-color: #dddcdc;
	border-radius: 0px 5px 5px 5px;
}

p a.links {
	color: #0a71b6!important;
	text-decoration: underline;
}

p code, li code {
	border: 1px solid #ccc;
	padding: 2px;
}

.keyword, .datatype_code {
	color: #c678dd;
}

.functionname_code {
	color: #61aeee;
}

.comment_code {
	/*color: #ffddbe;*/
	color: #838383;
}

.string_code {
	color: #98c379;
}

.value_code, .number {
	color: #d19a66;
}

.highlighted {
	background-color: #c3c3c3;
	/*padding: 2px;*/
}

.rate_container {
	border: 2px solid #151C33;
	padding: 25px;
	border-radius: 5px;
	margin: 15px 0;
}

.rate_container .parent {
	align-items: flex-start!important;
}

.rate_container p {
	margin: 0!important;
}

.rate_container i {
	font-size: 24px;
	border: 2px solid #61aeee;
	color: #61aeee;
	padding: 10px;
	border-radius: 5px;
}

.rate_container i {
	transition: all .3s ease;
}

@media screen and (max-width: 990px) {
	.rate_container .parent {
		flex-wrap: wrap;
	}

	.rate_container .parent .child {
		margin-top: 15px;
	}
}

.rate_container i:hover {
	cursor: pointer;
	background-color: transparent;
}

.rate_container .emojie i {
	border: 2px solid #c678dd!important;
	border-radius: 5px;
	padding: 10px;
}

.rate_container .feedback {
	background-color: transparent;
	border: 2px solid #98c379;
	border-radius: 5px;
	display: flex;
	justify-items: center;
	align-items: center;
}

.rate_container .feedback input, 
.rate_container .feedback button {
	width: 70%;
	height: 100%;
	outline: 0;
	border: 0;
	background-color: transparent;
	padding: 12px 25px;
}

.rate_container .feedback button {
	width: 30%;
	background-color: #98c379;
	color: white;
}

.bx-angry {
	color: rgb(241, 80, 80)!important;
}

.bx-sad {
	color: #ffc06f!important;
}

.bx-wink-smile {
	color: #98c379!important;
}

.bx-upside-down {
	color: #ffcc4d!important;
}

.quiz_container {
	background-color: #151C33;
	color: white;
	padding: 25px;
	border-radius: 5px;
	margin: 15px 0;
}

.quiz_container .option {
	background-color: #202843;
	transition: all .3s ease;
	cursor: pointer;
	border-radius: 5px;
}

.quiz_container a {
	margin: 0!important;
}

.bx-question-mark {
	color: #98c379;
	border: 2px solid #98c379;
	padding: 5px;
	font-size: 24px;
	margin-bottom: 15px;
	border-radius: 50%;
}

.quiz_container label {
	display: block;
	width: 100%;
	cursor: pointer;
	transition: all .3s ease;
	border-radius: 5px;
	padding: 15px 25px;
	margin: 5px 0;
}

.quiz_container .option:hover {
	color: white;;
	background-color: #98c379;
}

#video .container img {
	width: 100%;;
}

#video p, #video video, #video h1, #video .code_container, #video .note_container, #video .tip_container, #video .table_container {
	margin: 15px 0;
}

.completed {
	background-color: #b3b3b3!important;
}

.flag_img {
	width: 35px!important;
}

.flag_container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 15px 0;
}

.flag_container h3 {
	margin: 0!important;
}