/* Add here all your css styles (customizations) */

/* --- Font formatting --- */
.foottext {
  color: white;
}

.leftsidetext {
  text-align: left;
}

.rightsidetext {
  text-align: right;
}

.fitehomename {
  color: white;
  font-size: large;
}

.navname {
  font-size: large;
}

/* --- Div display inline-block --- */
.divline {
  display: inline-block;
  margin-left: 10px;
  vertical-align: top;
}
/* --- End Div display inline-block --- */

/* --- Styled horizontal rule --- */
hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.75),
    rgba(0, 0, 0, 0)
  );
  margin: 3rem 3rem;
}

/* --- Image overlay --- */
* {
  box-sizing: border-box;
}

.w3container {
  position: relative;
  width: 50%;
  max-width: 300px;
}

.w3image {
  display: block;
  width: 100%;
  height: auto;
}

.w3overlay {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  width: 90%;
  transition: 0.5s ease;
  opacity: 0;
  font-size: 20px;
  padding: 20px;
  text-align: center;
}

.w3container:hover .w3overlay {
  opacity: 1;
}

/* --- Rounded corner hover --- */
.hoverbox {
  display: inline-block;
  width: auto;
  height: auto;
  border: 1px solid #ffffff;
}

.hoverbox:hover {
  border: 1px solid #044990; /* CSN Blue */
}

/* ============================================================
   Minimal Slick Hero Slider (.mf-hero-slick)
   ============================================================ */
.mf-hero-slick {
  max-width: 1980px;
  margin: 0 auto;
  overflow: hidden;
}

.mf-hero-slick img {
  width: 100%;
  height: auto;
  display: block;
}