/******* Bootstrap Theming ********/
/*!
 * Bootstrap v4.5.3 (https://getbootstrap.com/)
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #2878EB;
  --secondary: #F14D5D;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #ECF4FF;
  --dark: #120F2D;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.overlay-top::before,
.overlay-bottom::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 85px;
  left: 0;
  z-index: 1;
}

.overlay-top::before {
  top: 0;
  background: url(../img/overlay-top.png) top center no-repeat;
  background-size: contain;
}

.overlay-bottom::after {
  bottom: 0;
  background: url(../img/overlay-bottom.png) bottom center no-repeat;
  background-size: contain;
}

.bg-image {
  background: linear-gradient(rgba(40, 120, 235, 0.05), rgba(40, 120, 235, 0.05)), url(../img/bg-image.jpg);
  background-attachment: fixed;
}

.section-title h6::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  border-top: 2px dashed #F14D5D;
}

.courses-item img {
  position: relative;
  height: 320px;
  width: 500px;
  margin-top: 40px;
  transition: .5s;
}

.courses-list-item img {
  position: relative;
  transition: .5s;
}

.courses-item .courses-text,
.courses-list-item .courses-text {
  position: absolute;
  width: 100%;
  height: calc(100% + 86px);
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  background: linear-gradient(to bottom, rgba(18, 15, 45, 0), #120f2d);
  transition: .5s;
  z-index: 1;
}

.courses-list-item .courses-text {
  height: 100%;
}

.courses-item:hover img {
  margin-top: 0px;
}

.courses-list-item:hover img {
  transform: scale(1.2);
}

.courses-item:hover .courses-text {
  height: calc(100% + 40px);
}