@import url('./sections/Header.css');
@import url('./sections/hero.css');
@import url('./sections/new-courses.css');
@import url('./sections/best-Instructors.css');
@import url('./sections/your-courses.css');
@import url('./sections/top-courses.css');
@import url('./sections/footer.css');
@import url('./sections/newsletter.css');
/* ----------------- VAR ----------------- */
:root {
  --primary-color: #9E5CF2;
  --primary-color-transpire: #9d5cf230;
  --second-color: #FF991F;
  --second-color-transpire: #FF991F30;
  --second-color-darker: #5c3200;
  --text-color: #ddd;
  --pargraph-color: #080808
  --main-padding: 80px;
  --border-radius: 12px;
}

/* ----------------- SELECTION ----------------- */
::selection {
  background-color: var(--primary-color);
  color: #FFF;
}

/* ----------------- SMOOTH ----------------- */
body, html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* ----------------- SCROLL BAR ----------------- */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background-color: var(--primary-color-transpire);
  border-radius: 40px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  -ms-border-radius: 40px;
  -o-border-radius: 40px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius:  40px;
  -webkit-border-radius:  40px;
  -moz-border-radius:  40px;
  -ms-border-radius:  40px;
  -o-border-radius:  40px;
}



/* ----------------- SET ALL ELEMENTS -----------------*/
.container {
  margin: 0 auto;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Roboto', sans-serif;
}
button{
  background-color: #080808;
  color: var(--text-color);
  border: none;
  border-radius: var(--border-radius);
  padding: 20px;
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  -ms-border-radius: var(--border-radius);
  -o-border-radius: var(--border-radius);
  span{
    margin-left: 10px;
  }
}

.copyright p a{
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
}
.copyright p a:visited{
  color: var(--primary-color);
}




































/* ----------------- MEDIA QUERT ALL SCREEN SIZE ----------------- */

/* small */
@media (max-width: 767px){
  .container {
    width: 80%;
  }
}

/* medium */
@media (min-width: 768px){
  .container {
    width: 750px;
  }
}

/* large */
@media (min-width: 992px){
  .container {
    width: 970px;
  }
}

/* Xlarge */
@media (min-width: 1512px){
  .container {
    width: 1350px;
  }
}