/* RECREATED BY KHEM RAJ BUDHATHOKI | FACEBOOK / @heykhem */

/* GOOGLE FONT */
@import url("https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap");

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

/* REUSEABLE */
.grid {
  display: grid;
}

.grid--2-cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--4-cols {
  grid-template-columns: repeat(4, 1fr);
}

html {
  /* font-size: 10px; */

  /* 10px / 16px = 0.625 = 62.5% */
  /* Percentage of user's browser font-size setting */
  font-size: 62.5%;
  font-family: "Source Sans Pro", sans-serif;
}

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

.tut-links {
  display: flex;
  align-items: center;
  background-color: #fff;
}

.logo-img {
  margin-left: 10px;
  width: 75px;
  padding: 0 10px;
  display: inline-block;
}

.navbar-ul {
  display: flex;
  align-items: center;
  list-style: none;
  font-size: 1.8rem;
}

.nav-links a {
  display: inline-block;
  padding: 25px 14px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #090909;
  font-weight: 600;
  font-size: 1.8rem;
}

.nav-links a:hover {
  color: #fff;
  background-color: #04aa6d;
}
.nav-links a:hover .nav-icon {
  color: #fff;
}

.nav-links .nav-icon {
  margin-left: 5px;
  color: #090909;
}

.right-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.big-btn {
  padding: 0 20px;
}

.btn {
  border: none;
  cursor: pointer;
  background-color: #fff;
}

.hero-btn:hover {
  background-color: #059862;
}

.icons {
  display: flex;
  gap: 20px;
}

.btn-icon {
  font-size: 18px;
}

.btn-icon:hover {
  color: #04aa6d;
}

.white-icon {
  color: #fff;
  font-size: 18px;
}

.big-ul {
  display: flex;
  list-style: none;
  gap: 10px;
}

.big-links {
  border-radius: 25px;
}

.big-links:nth-child(2) {
  background-color: #ffc0c7 !important;
}
.big-links:nth-child(2):hover {
  background-color: #059862 !important;
}

.big-links:last-child {
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #04aa6d;
}

.big-links:last-child a {
  color: #fff;
}

.big-links:hover {
  background-color: #059862;
}

.big-links a {
  display: flex;
  align-items: center;
  color: #090909;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.8rem;
  padding: 10px 16px;
}

.big-links:hover a {
  color: #fff;
}

.tag {
  margin-left: 3px;
  font-size: 1.1rem;
  padding: 3px 10px;
  border-radius: 100px;
  color: #090909;
  background-color: #fff;
  border: 1px solid black;
}

.section-hero {
  /* height: 600px; */
  display: flex;
  justify-content: center;
  background-color: #282a35;
  color: #fff;
}

.container {
  padding: 9rem 0;
}

.sec-title {
  font-size: 7.2rem;
  font-weight: 700;
}

.sec-desc {
  color: #ffc0c7;
  font-weight: 700;
  margin-top: 30px;
  font-size: 2.3rem;
  margin-bottom: 5rem;
}

.hero-form {
  max-width: 50rem;
  margin: auto;
  display: flex;
  /* background-color: red; */
}

.hero-form input[type="text"] {
  padding: 1.2rem 2rem;
  border: none;
  outline: none;
  width: 80%;
  border-top-left-radius: 25px;
  border-bottom-left-radius: 25px;
  border: 1px solid #282a35;
  border-right: 1px solid #04aa6d;
  background-color: white;
  font-size: 1.7rem;
  font-weight: 600;
  font-family: "Source Sans Pro", sans-serif;
  overflow: visible;
}

.hero-btn {
  width: 20%;
  padding: 1.2rem;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border: 1px solid #282a35;
  border-left: none;
  cursor: pointer;
  color: white;
  background: #04aa6d;
}

.sec-desc-more {
  font-size: 2.3rem;
  font-weight: 700;
  color: #fff;
  margin-top: 30px;
  display: block;
  text-align: center;
  margin-bottom: 7rem;
}

.sec-desc-more:hover {
  color: #059862;
}

/* ////////////////////////// */
/* HTML SECTION */
/* ////////////////////////// */
.section-html {
  background-color: #d9eee1;
}

.left {
  text-align: center;
}

.html-head {
  font-size: 10rem;
  font-weight: 700;
  /* margin-top: -18rem; */
}

.html-para {
  font-size: 1.9rem;
  margin-top: 1.2rem;
  font-weight: 600;
}

.links {
  text-decoration: none;
  display: inline-block;
  padding: 10px 16px;
  font-weight: 600;
  font-size: 18px;
  display: block;
  width: 200px;
  border-radius: 25px;
  text-align: center;
}

.tut-btn {
  margin: 2.6rem auto;
}

.tut-green {
  color: white;
  background-color: #04aa6d;
}

.tut-green:hover {
  background-color: #059862;
}

.tut-yellow {
  color: black;
  background-color: #fff4a3;
}

.tut-yellow:hover {
  background-color: #fff080;
}

.tut-black {
  color: white;
  background-color: #282a35;
}

.tut-black:hover {
  background-color: black;
}

.tut-pink {
  color: black;
  background-color: #ffc0c7;
}

.tut-pink:hover {
  background-color: #fdb1ba;
}

.main-box {
  align-self: start;
  width: 590px;
  background-color: #e7e9eb;
  padding: 2rem;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  border-radius: 4px;
  overflow: hidden;
}

.code-head {
  font-size: 2.4rem;
  font-weight: 600;
  margin: 1rem 0;
  background-color: #e7e9eb;
}

.code-box {
  height: 300px;
  text-align: left;
  font-family: consolas;
  font-size: 1.5rem;
  background-color: #fff;
  border-left: 4px solid #04aa6d;
  padding: 10px;
  margin-bottom: 2rem;
}

/* ////////////////////////// */
/* CSS SECTION */
/* ////////////////////////// */
.section-css {
  background-color: #fff4a3;
}
.css-head {
  font-size: 10rem;
  font-weight: 700;
}

.css-para {
  font-size: 1.9rem;
  margin-top: 1.2rem;
  font-weight: 600;
}

/* ////////////////////////// */
/* JAVASCRIPT SECTION */
/* ////////////////////////// */
.section-java {
  background-color: #282a35;
}

.section-java .container {
  padding: 6.2rem 0;
}

.java-head {
  color: #fff;
  font-size: 7rem;
  font-weight: 700;
}

.java-para {
  color: #fff;
  font-size: 1.9rem;
  margin-top: 1.2rem;
  font-weight: 600;
}

.tut-white {
  color: black;
  background-color: #fff;
}

.tut-white:hover {
  color: black;
  background-color: rgb(232, 232, 232);
}

.section-java .code-box {
  height: auto;
}

/* ////////////////////////// */
/* PYTHON SECTION */
/* ////////////////////////// */
.section-pys {
  background-color: #f3ecea;
}

.section-py .container {
  padding: 6.2rem 0;
}

.py-head {
  color: black;
  font-size: 8rem;
  font-weight: 700;
}

.py-para {
  color: black;
  font-size: 1.9rem;
  margin-top: 1.2rem;
  font-weight: 600;
}

.section-py .code-box {
  height: 200px;
}

/* ////////////////////////// */
/* SQL SECTION */
/* ////////////////////////// */
.section-sql {
  background-color: #96d4d4;
}

.section-sql .container {
  padding: 6.2rem 0;
}

.sql-head {
  color: black;
  font-size: 8rem;
  font-weight: 700;
}

.sql-para {
  color: black;
  font-size: 1.9rem;
  margin-top: 1.2rem;
  font-weight: 600;
}

.section-sql .code-box {
  height: 210px;
}

/* ////////////////////////// */
/* MORE SECTION */
/* ////////////////////////// */
.section-more {
  background-color: #282a35;
}

.container {
  row-gap: 40px;
}

.box {
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  border-radius: 5px;
  padding: 24px;
  text-align: center;
  width: 88%;
  align-self: center;
  justify-self: center;
}

.more-h2 {
  font-size: 4.5rem;
  font-weight: 700;
  margin: 10px 0;
}

.more-para {
  font-weight: 600;
  margin: 3.5rem 0;
  font-size: 1.8rem;
  color: black;
}

.php--box {
  background-color: #ffc0c7;
}

.jqurey--box {
  background-color: #fff4a3;
}

.java--box {
  background-color: #f3ecea;
}

.cplus--box {
  background-color: #d9eee1;
}

.w3c--box {
  background-color: #96d4d4;
}

.bts--box {
  background-color: #e7e9eb;
}

.more-btn {
  color: #fff;
  background-color: #282a35;
  margin-bottom: 2rem;
}

.more-btn:hover {
  background-color: black;
}

.cont-gap {
  column-gap: 2rem;
  row-gap: 6rem;
  padding: 2rem;
}

.small-box {
  width: 80%;
  padding: 4rem 2rem;
  font-size: 3rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
  align-self: center;
  border-radius: 4px;
  justify-self: center;
  cursor: pointer;
}

.c-lang {
  width: 90%;
  grid-column: 1 / 3;
  padding: 5rem 2rem;
}

.cs-lang {
  padding: 5rem 2rem;
  width: 90%;
  grid-column: 3 / -1;
}

.new-lang {
  width: 90%;
  grid-column: 1 / 3;
  padding: 4rem 2rem;
}

.new-r-lang {
  width: 90%;
  grid-column: 3 / -1;
  padding: 4rem 2rem;
}

.light-pink {
  background-color: #f3ecea;
}

.light-pink:hover {
  background-color: #f0f0f0;
}

.light-green {
  background-color: #d9eee1;
}

.light-green:hover {
  background-color: #deeee4;
}

.clr-turquoise {
  background-color: #96d4d4;
}

.clr-turquoise:hover {
  background-color: #b8f4f4;
}

.d-pink {
  background-color: #ffc0c7;
}

.d-pink:hover {
  background-color: #fac3ca;
}

.d-yellow {
  background-color: #fff4a3;
}

.d-yellow:hover {
  background-color: #fdf5b8;
}

.small-box span {
  margin: 1rem 0;
}

/* ////////////////////////// */
/* EDITOR SECTION */
/* ////////////////////////// */
.section-editor {
  background-color: #282a35;
}

.edit-box {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 9.6rem 0 0 0;
}

.edit-head {
  text-align: center;
  font-size: 6.5rem;
  font-weight: 700;
  color: white;
}

.edit-head-4 {
  color: white;
  text-align: center;
  font-size: 2rem;
  font-weight: 500;
  margin-top: 2.5rem;
}

.mac-look {
  margin-top: 6rem;
  width: 942px;
  display: flex;
  flex-flow: column;
  background-color: #f1f1f1;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  overflow: hidden;
}

.ribbon {
  padding: 15px;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
}
.circle-box {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 20%;
}

.color-box {
  width: 15px;
  height: 15px;
  border-radius: 100%;
}

.circle-box .lal {
  background-color: #ed594a;
}

.circle-box .pile {
  background-color: #fdd800;
}

.circle-box .hara {
  background-color: #5ac05a;
}

.url-box {
  width: 80%;
  border-radius: 3px;
  border: none;
  background-color: white;
  height: 22px;
  color: #666;
  font-size: 1.4rem;
  padding: 5px;
  display: flex;
  align-items: center;
}

.switch-bar {
  display: flex;
}

.sw-btn {
  padding: 8px 16px;
  width: auto;
  border: none;
  display: block;
  outline: 0;
  font-size: 1.7rem;
  font-weight: 600;
  font-family: "Source Sans Pro", sans-serif;
  background-color: transparent;
  cursor: pointer;
}

.sw-btn:hover,
.active-btn {
  background-color: #e7e9eb;
}

.editor-links {
  width: 942px;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  margin: 0 auto;
  gap: 20px;
  margin-top: 3rem;
  padding-bottom: 9.6rem;
}

.edit-btn {
  font-size: 1.8rem;
  font-weight: 600;
  font-family: "Source Sans Pro", sans-serif;
  border: none;
  border-radius: 5px;
  display: inline-block;
  padding: 6px 18px;
  text-decoration: none;
  cursor: pointer;
  background-color: #04aa6d;
  color: #ffffff;
}

.tfe:hover {
  background-color: #059862;
}

.tbe {
  color: black;
  background-color: #fff4a3;
}

.tbe:hover {
  background-color: #f6e77a;
}

/* ////////////////////////// */
/* SPACES SECTION */
/* ////////////////////////// */
.section-spaces {
  background-color: #282a35;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 5.6rem 0;
}

.spaces-head {
  color: white;
  font-size: 6.5rem;
  font-weight: 700;
  margin-top: 4.5rem;
}

.spaces-mini-head {
  color: white;
  font-size: 2.4rem;
  font-weight: 700;
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
}

.space-btn {
  width: 300px;
  font-size: 2.2rem;
  padding: 14px 20px;
  margin-bottom: 7.5rem;
}

/* ////////////////////////// */
/* COLOR SECTION */
/* ////////////////////////// */
.section-color {
  background-color: #f3ecea;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 6.5rem 0;
}

.color-head {
  color: black;
  font-size: 6.5rem;
  font-weight: 700;
  margin-top: 4.5rem;
}

.color-mini-head {
  color: black;
  font-size: 2rem;
  font-weight: 600;
  margin-top: 2.4rem;
  margin-bottom: 3.5rem;
}

/* ////////////////////////// */
/* CODE GAME SECTION */
/* ////////////////////////// */
.section-cgame {
  background-color: #96d4d4;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  padding: 6.5rem 0;
}

.cgame-head {
  color: black;
  font-size: 4.8rem;
  margin-top: 4.5rem;
  font-family: "Freckle Face", cursive;
}

.cgame-mini-head {
  color: black;
  font-size: 3.2rem;
  margin-top: 1rem;
  margin-bottom: 3rem;
  font-family: "Freckle Face", cursive;
}

.cgame-btn {
  margin-top: 3rem;
}

/* ////////////////////////// */
/* EXERCISE QUIZ SECTION */
/* ////////////////////////// */
.section-exquiz {
  background-color: #282a35;
  padding: 6.5rem 0;
}

.exquiz-head {
  color: white;
  font-size: 4.5rem;
  margin-top: 4.5rem;
  text-align: center;
}

.exquiz-mini-head {
  color: white;
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 3rem;
  text-align: center;
  font-weight: 600;
}

.go-box {
  height: 200px;
  margin: 7.2rem 0;
  display: flex;
  justify-content: space-evenly;
}

.go-boxes {
  align-self: center;
  justify-self: center;
  align-items: center;
}

.go-boxes a {
  width: 500px;
  padding: 70px 50px;
  opacity: 0.97;
  font-size: 3.5rem;
  text-decoration: none;
  font-weight: 600;
  display: block;
  text-align: center;
  border-radius: 5px;
}

/* ////////////////////////// */
/* WEB TEMPLATE SECTION */
/* ////////////////////////// */
.section-webtemp {
  background-color: #e7e9eb;
  padding: 4.5rem 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
}

.webtemp-imgbox {
  /* width: 1200px; */
  margin: 0 auto;
}
.webtemp-img {
  margin: 0 auto;
  width: 75%;
  display: block;
}

.webtemp-head {
  color: black;
  font-size: 4.8rem;
  margin-top: 4.5rem;
}

.webtemp-mini-head {
  color: black;
  font-size: 2rem;
  margin-top: 1rem;
  margin-bottom: 3rem;
  font-weight: 600;
}

.strong {
  font-weight: bold;
}

.webtemp-btn {
  width: 50%;
  margin-top: 4rem;
  font-size: 1.8rem;
  border-radius: 25px;
  padding: 16px 0;
}

/* ////////////////////////// */
/* CARRER SECTION */
/* ////////////////////////// */
.section-carrer {
  background-color: #282a35;
  padding: 4.5rem 6rem 4.5rem 6rem;
  position: relative;
}

.carrer-head {
  color: #ffc0c7;
  font-size: 6.2rem;
  margin-top: 5rem;
  margin-bottom: 5rem;
  font-weight: 600;
}

.carrer-btn {
  width: 200px;
  font-size: 1.8rem;
  display: block;
  padding: 17px 55px;
  border-radius: 50px;
  display: inline-block;
}

.carrer-icon {
  width: 200px;
  position: absolute;
  right: 190px;
  bottom: -30px;
  transform: rotate(5deg);
  z-index: 1000;
}

.veri-box {
  position: absolute;
  z-index: 999;
  top: 100%;
  transform: translate(0, -50%);
  right: 3%;
  /* overflow: hidden; */
}

.carrer-cert {
  width: 200px;
  transform: rotate(20deg);
}

/* ////////////////////////// */
/* HOW TO SECTION */
/* ////////////////////////// */
.section-howto {
  background-color: #fff;
  padding: 4.5rem 6rem 5.5rem 6rem;
  position: relative;
}

.section-howto .container {
  padding-bottom: 4rem;
}

.howto-cont {
  display: flex;
  align-items: center;
  flex-flow: column;
  gap: 20px;
}

.howto-head {
  font-size: 4.5rem;
  font-weight: 700;
}

.howto-mini-head {
  font-size: 2rem;
  font-weight: 600;
}

.howto-small {
  font-size: 1.6rem;
  font-weight: 600;
}

.computer-box {
  display: flex;
  flex-flow: column;
  align-items: center;
}

.url-bold {
  font-weight: 600;
}

.display-img-box {
  padding: 10px;
  position: relative;
}

.display-img {
  width: 100%;
}

.dis-btn {
  color: #fff;
  top: 50%;
  padding: 16px;
  border: none;
  outline: none;
  cursor: pointer;
  position: absolute;
  transition: 0.6s ease;
  transform: translate(0%, -50%);
  background-color: transparent;
}

.dis-btn:hover {
  background-color: rgba(10, 10, 10, 0.466);
}

.dis-left {
  left: 12px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.dis-right {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  right: 12px;
}

.numver-txt {
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 1.4rem;
  color: #f2f2f2;
}

.caption-box {
  color: #f2f2f2;
  font-size: 1.8rem;
  padding: 8px 12px;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.vuttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 1rem 0 4rem 0;
}

.vut {
  width: 15px;
  height: 15px;
  background-color: #bbb;
  border-radius: 100%;
  cursor: pointer;
}

.vut-active,
.vut:hover {
  background-color: #717171;
}

.stand-box {
  width: 50px;
  height: 80px;
  background-color: #282a35;
}

.down-stand {
  width: 50%;
  font-size: 1.8rem;
  display: block;
  padding: 16px 0;
}

.down-stand:hover {
  background-color: #04aa6d !important;
}

/* ////////////////////////// */
/* FOOTER SECTION */
/* ////////////////////////// */
.footer {
  background-color: #282a35;
  padding: 5.2rem 0;
  display: flex;
  flex-flow: column;
  gap: 25px;
}
.course-links {
  padding: 0 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-ul {
  display: flex;
  list-style: none;
  gap: 10px;
}

.footer-links {
  background-color: white;
  display: inline-block;
  padding: 8px 16px;
  border-radius: 5px;
}

.footer-links:hover {
  background-color: rgb(236, 236, 236);
}

.footer-links a {
  color: black;
  font-size: 1.7rem;
  text-decoration: none;
  font-weight: 600;
}

.aform {
  font-size: 1.7rem;
  color: #fff;
}

.aform a {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  letter-spacing: 4px;
}

.aform a:hover {
  color: #04aa6d;
}

.social-links {
  display: flex;
  justify-content: flex-end;
  padding: 0 3rem;
}

.sicon-box {
  display: flex;
  align-items: center;
}

.copy-icon-box {
  width: 50px;
  height: 55px;
  font-size: 18px;
  border-radius: 5px;
  outline: none;
  border: none;
  cursor: pointer;
  display: block;
  color: #fff;
  background-color: transparent;
}

.copy-icon-box:hover {
  color: black;
  background-color: #fff;
}

/* COPYRIGHT TEXT */
.copyright {
  color: #fff;
  padding: 0 3rem;
  font-size: 1.5rem;
  text-align: center;
  line-height: 1.5;
  font-weight: 600;
}

.copy-a {
  color: #fff;
}

.like-btn {
  display: inline-block;
  margin: 0 auto;
  color: #fff;
}

.copy-icon {
  width: 50px;
  height: 40px;
  fill: 4px;
  font-size: 40px;
}

.author:link,
.author:visited {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.3s ease-in-out;
}

.author:hover,
.author:active {
  color: #059862;
  border-bottom: 1px solid #059862;
}

/* ///////////////////////// */
/* CREATOR CSS */
/* \\\\\\\\\\\\\\\\\\\\\\\\\ */

.context {
  width: 100%;
  height: 100vh;
  background-color: #282a35;

  display: flex;
  flex-flow: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.boxy {
  width: 400px;
  height: 200px;
  display: flex;
  flex-flow: column;
  gap: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 30px;
}

.copytxt {
  font-size: 1.4rem;
  font-weight: normal;
}

.copytxt a {
  color: #fff;
  transition: all 0.5s ease-in-out;
}