/* Primary: #a15405, Secondary: #af6c40, Accent/Dark contrast: #651506 */
@font-face {
  font-family: robo_bold;
  src: url(Roboto-Italic-VariableFont_wdth\wght.ttf);
}

@font-face {
  font-family: robo_reg;
  src: url(Roboto-VariableFont_wdth\wght.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  list-style-type: none;
  border: none !important;
  outline: none;
  background: none;
  text-decoration: none;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.5rem;
  scroll-behavior: smooth;
}

textarea {
  resize: none;
}

/* 32 inch TV */
@media (min-width: 1025px) and (max-width: 1200px) and (orientation: landscape) {
  body {
    font-size: 1.25rem;
  }
}
/* Cellphone and tables */
@media (max-width: 767px) and (orientation: portrait) {
  body {
    font-size: 1.5rem;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: robo_bold, Georgia, "Times New Roman", Times, serif;
}

p,
a {
  font-family: Arial, Helvetica, sans-serif;
}

/* setting default colours */
:root {
  --primary: #f78f49;
  --secondary: #ba5531;
  --tertiary: #f06609;
  --accent: #61bf84;
}

/* optional height */
.min-vh-50 {
  min-height: 50vh;
}

/* setting common elements */
.cta:link,
.cta:visited,
.cta:active {
  display: block;
  background: var(--primary);
  width: 150px;
  padding: 1rem 0;
  text-align: center;
  font-weight: 700;
  transition: background 0.3s ease-in-out, transform 0.1s ease-in-out;
  text-decoration: none !important;
}

.cta:hover {
  background: var(--secondary);
  box-shadow: 3px 3px 3px var(--coral);
  color: #fff;
}

.cta:active {
  transform: scale(0.98);
}

.post_button {
  position: relative;
  background: var(--primary);
  color: var(--secondary);
  border: none;
  outline: none;
  padding: 1rem 3rem;
  text-align: center;
  font-weight: 700;
  transition: all 0.3s ease-in-out, transform 0.1s ease-in-out;
}

.post_button:hover {
  background: var(--secondary);
}

.post_button:active {
  transform: scale(0.98);
}

.post_button_active .button_text,
.post_button_active .button_icon {
  visibility: hidden;
  opacity: 0;
}

.post_button_active::after {
  content: "";
  height: 2rem;
  width: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid transparent;
  border-top-color: #fff;
  border-radius: 50%;
  animation: post_button_spinner 1s ease infinite;
}

@keyframes post_button_spinner {
  from {
    transform: rotate(0turn);
  }
  to {
    transform: rotate(1turn);
  }
}

.inputs {
  height: 3rem;
}

.input_group {
  border-bottom: 1px solid var(--secondary) !important;
}

.input_group_text {
  color: var(--secondary);
  background: none !important;
}

.input_group_span {
  width: 10rem;
  color: var(--secondary);
  background: none !important;
}

#site_footer {
  background-color: var(--tertiary);
}

.radio_options {
  cursor: pointer;
}

.form_check_input:checked {
  background-color: var(--accent) !important;
  border-color: #fff;
}

/* ----------------------- */
#admin_home_logo {
  height: 10rem;
  width: 30rem;
}
/* ----------------------- */
#site_navigation {
  width: 100vw;
  padding: 2rem 0;
}

#logged_in_navigation {
  width: 100vw;
  padding: 2rem 0;
  z-index: 10;
}

#menu-button {
  padding: 0;
  color: transparent;
  border-color: transparent;
  height: 4rem;
  width: 4rem;
}

#menu_button {
  height: 100%;
  width: 100%;
}

#nav_logo_link {
  height: 8rem;
  width: 25rem;
}

@media (max-width: 768px) {
  #nav_logo_link {
    height: 6rem;
    width: 10rem;
  }
}

#nav_logo {
  height: 100%;
  width: 100%;
}

#dash_navigation {
  padding: 0;
  margin: 0;
}

.dash_navigation_btn {
  background: var(--accent);
  height: 5rem;
  transition: all 0.35s ease-in-out;
}

.dash_navigation_heading {
  background: var(--secondary);
  height: 5rem;
}

.dash_navigation_item {
  transition: all 0.3s ease-in-out;
  padding-left: 3rem;
}

.nav_link,
.dash_navigation_item {
  position: relative;
  color: var(--secondary) !important;
}

.nav_link:hover {
  color: var(--primary);
}

.dash_navigation_item:hover {
  padding-left: 5rem;
  color: var(--primary);
}

.nav_link::after,
.dash_navigation_item::after {
  content: "";
  background-color: var(--primary);
  position: absolute;
  top: 101%;
  left: 0;
  width: 100%;
  height: 1px;
  transform: scale(0);
  transition: all 0.4s ease-in-out;
}

.nav_link:hover::after,
.dash_navigation_item:hover::after {
  transform: scale(1);
}

.inputs {
  height: 3rem;
}

#show_password {
  height: 2rem;
  width: 3rem;
}
/* ------------------------------------- */
/* setting the parents index page */
.parent_row:hover {
  color: var(--secondary);
  font-weight: 500;
}

/* setting the about snapshot */
.card {
  outline: 3px solid var(--accent);
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
}

#bank_card {
  outline: 5px solid var(--accent);
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
}

.card:hover,
#bank_card:hover {
  transform: translateY(-10px);
}

.card_tag {
  color: var(--greyScale);
}

.card_title {
  color: var(--primary);
}

/* ------------------------------------- */
/* setting the courses snapshot */
.overview_card {
  border-radius: 1rem;
  transition: all 0.3s ease-in-out;
  border: 5px solid var(--pink_light_bg) !important;
}

.overview_card:hover {
  transform: translateY(-10px);
}

/* ------------------------------------- */
/* setting the testimonials */
.testimonial_card {
  background-color: #ffffff;
  border: 10px solid var(--accent);
  border-radius: 0.5rem;
  padding: 2rem;
  position: relative;
  height: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.testimonial_card::before {
  content: "“";
  font-size: 4rem;
  color: var(--primary);
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  font-family: Georgia, serif;
}

.testimonial_card blockquote {
  margin-top: 2rem;
}

.testimonial_card footer {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #6c757d;
  font-style: italic;
}

.testimonial_card:hover {
  box-shadow: 3px 3px 3px var(--accent);
}
/* ------------------------------------- */
.accordion_button {
  color: var(--secondary);
}

.accordion_button:not(.collapsed) {
  color: #fff;
  font-weight: bold;
  background: var(--primary);
}

/* ------------------------------------- */
#drop_area {
  cursor: pointer;
}

#upload_icon {
  height: 10rem;
  width: 10rem;
}

#update_upload_image {
  height: 5rem;
  width: 5rem;
  cursor: pointer;
}

#update_upload_span {
  cursor: pointer;
}

/* ---- */
.heading {
  color: var(--secondary);
}

a.heading:hover {
  color: var(--secondary) !important;
}

.sub_heading {
  color: var(--primary);
}

/* ------ */
.dashboard_tile {
  position: relative;
}
.dashboard_tile_guide {
  position: absolute;
  top: 1%;
  right: 2%;
  background: var(--primary);
}

/* About ----- */
#about_hero_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-10.jpg);
}

#about_students_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-2.jpg);
}

#about_staff_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-3.jpg);
}

#services_hero_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-4.png);
}

#services_first_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-5.jpg);
}

#services_second_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-6.jpg);
}

#services_third_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-7.jpg);
}

#services_fourth_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-8.jpg);
}

#services_fifth_wrapper {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../assets/backgrounds/bg-9.jpg);
}

#about_hero_wrapper,
#about_students_wrapper,
#about_staff_wrapper,
#services_hero_wrapper,
#services_first_wrapper,
#services_second_wrapper,
#services_third_wrapper,
#services_fourth_wrapper,
#services_fifth_wrapper {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* teacher's card */
.teacher_card {
  border: 3px solid var(--accent) !important;
  border-radius: 1rem;
}

/* setting bullet points */
.material_bullets {
  color: var(--accent);
}

/* setting the right side links on the documents page */
.doc_link {
  width: fit-content;
  text-decoration: none !important;
}

.doc_link:hover {
  border-bottom: 1px solid black !important;
}