@keyframes colorChange {
  0% {
    border-color: rgb(93, 93, 93);
  }
  25% {
    border-color: rgb(146, 146, 149);
  }
  50% {
    border-color: rgb(228, 163, 231);
  }
  75% {
    border-color: rgb(139, 94, 243);
  }
  100% {
    border-color: rgb(0, 128, 255);
  }
}
@keyframes colorChange {
  0% {
    border-color: rgb(93, 93, 93);
  }
  25% {
    border-color: rgb(146, 146, 149);
  }
  50% {
    border-color: rgb(228, 163, 231);
  }
  75% {
    border-color: rgb(139, 94, 243);
  }
  100% {
    border-color: rgb(0, 128, 255);
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration-style: none;
  list-style-type: none;
  font-family: "Secular One", sans-serif;
  text-decoration: none;
  overflow-x: hidden;
}

:root {
  font-size: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-image: linear-gradient(90deg, rgb(240, 209, 236), rgb(93, 208, 236), rgb(203, 203, 203), rgb(203, 154, 235));
}

header *,
main *,
footer * {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container {
  width: 90%;
  border-radius: 1rem;
  padding: 1rem;
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  width: 100%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

section {
  background-color: rgb(158, 188, 245);
  width: 80%;
  border-radius: 3rem;
  margin: 2rem 0;
  box-shadow: 0 0 60px 30px #fff, 0 0 100px 60px #f0f, 0 0 120px 90px #0ff;
  padding: 1rem 0;
}

.title {
  padding: 1rem;
}

h2 {
  font-size: 4rem;
  color: rgb(81, 80, 80);
  padding: 1rem;
  margin: 0 1.5rem;
  font-family: "Rubik Doodle Shadow", system-ui;
  text-align: center;
}

h3 {
  font-family: "Rubik Doodle Shadow", system-ui;
  font-size: 1.5rem;
  color: rgb(130, 3, 141);
  text-align: center;
}

h4 {
  font-family: "Rubik Doodle Shadow", system-ui;
  font-size: 3rem;
  text-align: center;
  color: rgb(4, 21, 116);
  padding: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 3rem;
  background-color: rgb(251, 243, 234);
  width: 100%;
}

h5 {
  font-family: "Rubik Doodle Shadow", system-ui;
  font-size: 2rem;
  text-align: center;
  color: rgb(251, 243, 234);
  padding: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 3rem;
  background-color: rgb(209, 0, 109);
  margin: 1rem;
}

h6 {
  font-family: "Rubik Doodle Shadow", system-ui;
  font-size: 1.5rem;
  text-align: center;
  color: black;
  padding: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 3rem;
  background-color: rgb(248, 169, 209);
  margin: 1rem;
}

p {
  font-size: x-large;
  margin: 0 0.25rem;
}

i {
  font-size: 4rem;
  color: rgb(81, 80, 80);
}
i:hover {
  font-size: 6rem;
  transition: 1s;
}

/* Settings and design for Back to top button */
.backtotop {
  padding: 0.5rem;
  width: 5rem;
  height: 4.5rem;
  top: 90%;
  right: 1.5rem;
  z-index: 0;
  position: fixed;
  transform: translateY(-50%);
  color: rgb(8, 107, 227);
  background-image: linear-gradient(90deg, rgb(240, 209, 236), rgb(93, 208, 236), rgb(203, 203, 203), rgb(203, 154, 235));
  border: rgb(8, 107, 227) 0.5rem solid;
  border-radius: 2rem;
  overflow: hidden;
}
.backtotop:hover {
  border: 1.5rem;
  box-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
  z-index: 1000;
  overflow: hidden;
}
.backtotop i {
  font-size: 2rem;
  overflow: hidden;
  color: rgb(8, 107, 227);
}
.backtotop i:hover {
  overflow: hidden;
  color: rgb(81, 80, 80);
}

@keyframes colorChange {
  0% {
    border-color: rgb(93, 93, 93);
  }
  25% {
    border-color: rgb(146, 146, 149);
  }
  50% {
    border-color: rgb(228, 163, 231);
  }
  75% {
    border-color: rgb(139, 94, 243);
  }
  100% {
    border-color: rgb(0, 128, 255);
  }
}
header {
  margin: 0 0 1.5rem 0;
  width: 100%;
  height: 25%;
  background-color: rgb(8, 107, 227);
  border-bottom: 1rem rgb(77, 77, 77) solid;
  animation: colorChange 6s infinite;
  font-weight: bolder;
}
header h1 {
  font-family: "Rubik Doodle Shadow", system-ui;
  letter-spacing: 0.5rem;
  font-size: 6rem;
  margin: 2rem 10%;
  color: rgb(251, 243, 234);
}
header .navbar {
  width: 100%;
}
header .navbar li {
  display: inline;
  margin: 1rem 3rem;
  position: relative;
  font-size: xx-large;
  border-radius: 2rem;
}
header .navbar li a {
  padding: 1rem 1.5rem;
  color: rgb(251, 243, 234);
  font-weight: bolder;
}
header .navbar li a:hover {
  color: rgb(77, 77, 77);
  font-size: 2.2rem;
  transition: 1s;
  text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
}

footer {
  margin: 1.5rem 0 0 0;
  bottom: 0;
  width: 100%;
  font-size: x-large;
  background-color: rgb(8, 107, 227);
  color: rgb(251, 243, 234);
  text-align: center;
  padding: 1rem 0;
  border-top: 0.5rem solid rgb(77, 77, 77);
  animation: colorChange 6s infinite;
}
footer a:visited {
  color: rgb(251, 243, 234);
}
footer .footer-div {
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
footer .copyrights {
  margin: 0.5rem 0;
}
footer i {
  color: rgb(251, 243, 234);
}
footer i:hover {
  background-color: rgb(209, 0, 109) !important;
}

@media (max-width: 1000px) {
  header .navbar {
    flex-direction: column;
  }
}
@media (max-width: 480px) {
  header .navbar {
    flex-direction: column;
  }
}
@keyframes colorChange {
  0% {
    border-color: rgb(93, 93, 93);
  }
  25% {
    border-color: rgb(146, 146, 149);
  }
  50% {
    border-color: rgb(228, 163, 231);
  }
  75% {
    border-color: rgb(139, 94, 243);
  }
  100% {
    border-color: rgb(0, 128, 255);
  }
}
[data-page=index] {
  /* your styles here */
}
[data-page=index] .container {
  flex-direction: column;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
[data-page=index] .container img {
  width: 40%;
  border-radius: 30%;
  margin: 1.5rem;
  background-color: rgb(8, 107, 227);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border: rgb(8, 107, 227) outset 1rem;
}
[data-page=index] .container .paragraph {
  padding: 2rem 2rem;
}
[data-page=index] .logo-img img {
  width: 80%;
}

@media (max-width: 768px) {
  [data-page=index] .container img {
    width: 80%;
  }
}
@media (max-width: 500px) {
  [data-page=index] .container img {
    width: 80%;
  }
  [data-page=index] .container .paragraph {
    padding: 0 1rem;
  }
  [data-page=index] .container .first-paragraph {
    padding: 0 2rem;
  }
}

@media (max-width: 380px) {
  .first-paragraph {
    margin: 2rem;
  }
  .third-paragraph {
    margin: 1rem;
  }
}
@keyframes colorChange {
  0% {
    border-color: rgb(93, 93, 93);
  }
  25% {
    border-color: rgb(146, 146, 149);
  }
  50% {
    border-color: rgb(228, 163, 231);
  }
  75% {
    border-color: rgb(139, 94, 243);
  }
  100% {
    border-color: rgb(0, 128, 255);
  }
}
section * {
  scrollbar-width: none;
  overflow: hidden;
}

.youtube-channel p {
  font-size: 3rem;
  color: rgb(81, 80, 80);
  display: flex;
  align-items: center;
  justify-content: center;
}
.youtube-channel .youtube-icon strong {
  font-family: "Poetsen One", sans-serif;
  font-size: 2rem;
}
.youtube-channel i {
  color: red;
}
.youtube-channel a:visited {
  color: rgb(81, 80, 80);
}

#videos-main .container {
  flex-direction: column;
  display: flex;
}

.youtube-videos .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.youtube-videos .container h2 {
  text-align: center;
}
.youtube-videos .container .video-items {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 150%;
  border-radius: 3rem;
  padding: 1rem;
}
.youtube-videos .container .video-item {
  width: 100%;
  max-width: 150%;
  margin: 1rem auto 1%;
  max-height: 45rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 4.2rem;
  border: 1rem rgb(8, 107, 227) outset;
}
.youtube-videos iframe {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: rgb(8, 107, 227);
  border-radius: 3rem;
  width: 100%;
  height: 45rem;
  max-width: 150%;
  display: block;
  margin: 0 auto;
  border: 0.5rem outset rgb(209, 0, 109);
}
.youtube-videos iframe:hover {
  transition: 1s;
  border: rgb(81, 80, 80) 0.5rem outset;
}

@media screen and (max-width: 1400px) {
  .youtube-videos .container {
    flex-direction: column;
    display: block;
    width: 100%;
  }
  .video-items {
    width: 100%;
    max-width: 100%;
  }
  .video-items .video-item {
    height: 35rem;
  }
  .video-items .video-item iframe {
    height: 35rem;
  }
}
@media screen and (max-width: 1150px) {
  .youtube-videos .container {
    flex-direction: column;
    display: block;
    width: 100%;
  }
  .video-items {
    width: 100%;
    max-width: 100%;
  }
  .video-items .video-item {
    height: 30rem;
  }
  .video-items .video-item iframe {
    height: 30rem;
  }
}
@media only screen and (max-width: 830px) {
  .youtube-videos .container {
    flex-direction: column;
    display: block;
    width: 100%;
  }
  .video-items {
    width: 100%;
    max-width: 100%;
  }
  .video-items .video-item {
    height: 25rem;
  }
  .video-items .video-item iframe {
    height: 25rem;
  }
}
@media only screen and (max-width: 650px) {
  .youtube-videos .container {
    flex-direction: column;
    display: block;
    width: 150%;
  }
  .video-items {
    width: 150%;
    max-width: 150%;
  }
  .video-items .video-item {
    height: 20rem;
  }
  .video-items .video-item iframe {
    height: 20rem;
  }
}
@media only screen and (max-width: 560px) {
  .youtube-videos .container {
    flex-direction: column;
    display: block;
    width: 150%;
  }
  .video-items {
    width: 150%;
    max-width: 150%;
  }
  .video-items .video-item {
    height: 15rem;
  }
  .video-items .video-item iframe {
    height: 15rem;
  }
}
@media only screen and (max-width: 430px) {
  .youtube-videos .container {
    flex-direction: column;
    display: block;
    width: 150%;
  }
  .video-items {
    width: 150%;
    max-width: 150%;
  }
  .video-items .video-item {
    height: 12rem;
  }
  .video-items .video-item iframe {
    height: 12rem;
  }
}
@keyframes colorChange {
  0% {
    border-color: rgb(93, 93, 93);
  }
  25% {
    border-color: rgb(146, 146, 149);
  }
  50% {
    border-color: rgb(228, 163, 231);
  }
  75% {
    border-color: rgb(139, 94, 243);
  }
  100% {
    border-color: rgb(0, 128, 255);
  }
}
.contact-options {
  border-radius: 3rem;
  padding: 1rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  background-color: rgb(8, 107, 227);
}

input[type=checkbox] {
  cursor: pointer;
  height: 2rem;
  width: 2rem;
  position: relative;
  margin-left: 17rem;
  bottom: 2rem;
}

.checkboxes label {
  display: flex;
  text-align: right;
  font-size: x-large;
  margin-top: -0.5rem;
  text-align: right;
  justify-content: flex-end;
}
.checkboxes label b {
  font-size: xx-larger;
}

.form {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 3rem;
  border: rgb(158, 188, 245) solid 0.5rem;
  background-color: rgb(158, 188, 245);
}
.form:hover {
  transition: 1s;
  border: rgb(81, 80, 80) solid 0.5rem;
}
.form form {
  margin: 2rem 0;
}
.form form textarea {
  width: 30rem;
  height: 20rem;
  margin: 0 2rem;
  border-radius: 2rem;
  border: 0.3rem outset rgb(8, 107, 227);
  resize: none;
  padding: 1rem;
  font-size: large;
}
.form form textarea b {
  font-size: xx-large;
}

.textbox {
  font-size: x-large;
}

.user-inputs input {
  width: 25rem;
  height: 3rem;
  border-radius: 2rem;
  border: 0.3rem outset rgb(8, 107, 227);
  margin: -0.3rem 2rem;
  padding: 1rem;
  font-size: larger;
}

.user-inputs label {
  font-size: x-large;
}

button input {
  width: 12rem;
  height: 4rem;
  font-size: 2rem;
  border-radius: 2rem;
  background-color: rgb(8, 107, 227);
  color: rgb(251, 243, 234);
  border: rgb(251, 243, 234) 0.3rem outset;
}
button input:hover {
  cursor: pointer;
}

button {
  border-radius: 2rem;
}

.social-media-links {
  display: flex;
  flex-direction: row;
  border-radius: 1rem;
}
.social-media-links a {
  margin: 1rem;
}
.social-media-links a:hover {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 50%;
}
.social-media-links a i {
  font-size: 3rem;
  margin: 0.5rem;
  padding: 1rem;
  border-radius: 50%;
}
.social-media-links a i:hover {
  background-color: rgb(158, 188, 245);
}
.social-media-links .group-one {
  flex-direction: row;
}
.social-media-links .group-two {
  flex-direction: row;
}

@media (max-width: 1000px) {
  .social-media-links {
    display: block;
  }
  .contact-options {
    transform: scale(0.7);
    margin: -20rem 0;
  }
}
@media (max-width: 600px) {
  .contact-options {
    transform: scale(0.5);
    margin: -40rem 0;
  }
}
@media (max-width: 500px) {
  .contact-options {
    transform: scale(0.3);
    margin: -52rem -30rem;
  }
  .user-inputs input,
  textarea {
    width: 20rem;
  }
}
@keyframes colorChange {
  0% {
    border-color: rgb(93, 93, 93);
  }
  25% {
    border-color: rgb(146, 146, 149);
  }
  50% {
    border-color: rgb(228, 163, 231);
  }
  75% {
    border-color: rgb(139, 94, 243);
  }
  100% {
    border-color: rgb(0, 128, 255);
  }
}
html[lang=he][dir=rtl][data-page=services] .container {
  display: flex;
  flex-direction: column;
}
html[lang=he][dir=rtl][data-page=services] .lessons-options {
  display: flex;
  flex-direction: column;
  border-radius: 4rem;
  background-color: rgb(8, 107, 227);
  border: outset 0.5rem rgb(251, 243, 234);
  margin: 2rem 0;
}
html[lang=he][dir=rtl][data-page=services] .lessons-options .low-classes {
  display: flex;
  flex-direction: row;
  border-radius: 4rem;
}
html[lang=he][dir=rtl][data-page=services] .lessons-options .high-classes {
  display: flex;
  flex-direction: row;
  border-radius: 4rem;
}
html[lang=he][dir=rtl][data-page=services] .lesson {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  padding: 1.5rem;
  margin: 1rem;
  border-radius: 3rem;
  background-color: rgb(158, 188, 245);
  transition: 1s;
}
html[lang=he][dir=rtl][data-page=services] .lesson img {
  width: 8rem;
  height: 8rem;
  border-radius: 3rem;
  margin: 1rem;
}
html[lang=he][dir=rtl][data-page=services] .lesson:hover {
  box-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #0fa, 0 0 82px #0fa, 0 0 92px #0fa, 0 0 102px #0fa, 0 0 151px #0fa;
  transform: scale(1.05);
}
html[lang=he][dir=rtl][data-page=services] .driving-prices {
  display: flex;
  flex-direction: row;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  padding: 2rem;
  border-radius: 3rem;
  border: 0.7rem outset rgb(8, 107, 227);
}
html[lang=he][dir=rtl][data-page=services] #price {
  color: rgb(209, 0, 109);
  background-color: rgb(251, 243, 234);
  border-radius: 2rem;
  padding: 0.5rem;
  border: rgb(8, 107, 227) outset 0.5rem;
  margin: 1rem 0;
  width: 10rem;
}
html[lang=he][dir=rtl][data-page=services] .prices-list {
  flex-direction: row;
}
html[lang=he][dir=rtl][data-page=services] .prices-list .price-unit {
  margin: 1rem 2rem;
  padding: 1rem 1.5rem;
}
html[lang=he][dir=rtl][data-page=services] .lesson-units {
  flex-direction: row;
  border-radius: 3rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border: 0.5rem outset rgb(209, 0, 109);
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
}
html[lang=he][dir=rtl][data-page=services] .lesson-units .lesson-unit {
  width: 15rem;
  min-height: 6rem;
  display: block;
  padding: 0.5rem 1rem;
  border-radius: 3rem;
  border: 0.5rem outset rgb(251, 243, 234);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  margin: 1rem;
  background-color: rgb(8, 107, 227);
}
html[lang=he][dir=rtl][data-page=services] .lesson-units .lesson-unit h3 {
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  background-color: rgb(251, 243, 234);
  border-radius: 2rem;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 1000px) {
  .lessons-options {
    transform: scale(0.8);
  }
}
@media (max-width: 850px) {
  .lessons-options {
    flex-direction: column;
    transform: scale(0.8);
    display: flex;
    margin: -5rem -1rem !important;
  }
  .lessons-options .high-classes,
  .lessons-options .low-classes {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .driving-prices {
    display: flex;
    flex-direction: column !important;
  }
  .prices-list {
    display: block;
    flex-direction: column;
  }
  .lesson-units {
    flex-direction: column;
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .lessons-options {
    flex-direction: column;
    transform: scale(0.8);
    display: flex;
    margin: -5rem -1rem !important;
  }
  .lessons-options .high-classes,
  .lessons-options .low-classes {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}
@media (max-width: 500px) {
  .lessons-options {
    flex-direction: column;
    display: flex;
    margin: -5rem -1rem !important;
  }
  .lessons-options .high-classes,
  .lessons-options .low-classes {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
  .lesson-units {
    transform: scale(0.8);
    margin: -10% 0;
  }
  .driving-prices {
    transform: scale(0.9);
  }
  h5 {
    transform: scale(0.9);
    padding: 0 3rem;
  }
}/*# sourceMappingURL=style.css.map */