/* ====================================
   Global Styles
==================================== */
html, body {
  font-family: 'Montserrat';       /* Global font family */
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;          /* Allow footer to push down */
  font-family: 'Montserrat', sans-serif;
}

main {
  flex: 1;                         /* Push footer to the bottom */
}

/* ====================================
   Navbar Styling
==================================== */
.nav-link:hover {
  color: #fff;
  background-color: #0dcaf0 !important;   /* Highlight link on hover */
}

.navbar-toggler {
  border: #0dcaf0 solid;
  border-radius: 0px;              /* Square corners */
}

.navbar-toggler:hover {
  background-color: #0dcaf0;
  border: #fff solid;
}

.nav-link,
.navbar-toggler {
  transition: all 0.3s ease-in-out;   /* Smooth transition */
}

/* ====================================
   Buttons and Cards
==================================== */
.btn {
  border-radius: 0px;              /* Consistent button shape */
}

.card {
  border-radius: 0px;
}

/* ====================================
   Form Styling
==================================== */
.form-control {
  background-color: #adb5bd;       /* Grey background for input */
  color: #fff;                     /* White text */
  border: #0dcaf0 solid;
  border-radius: 0px;
}

/* ====================================
   Custom Card (for blog cards)
==================================== */
.custom-card {
  background-color: #212529;       /* Dark background */
  color: #f8f9fa;                  /* Light text */
  border: 1px solid #0dcaf0;
  border-radius: 0px;
  padding: 20px;
  transition: background-color 0.3s ease,
              transform 0.3s ease,
              box-shadow 0.3s ease;
  box-shadow: none;
}

.custom-card:hover {
  background-color: #0f2731;       /* Slight cyan tint on hover */
  transform: translateY(-4px);     /* Lift effect */
  box-shadow: 0 8px 20px rgba(13, 202, 240, 0.15);
}

.custom-card .card-title {
  color: #0dcaf0;
  font-weight: 600;
  font-size: 1.5rem;
}

.custom-card .card-text {
  color: #dee2e6;
  line-height: 1.6;
  white-space: pre-line;           /* Preserve line breaks */
}

.custom-card .btn-info {
  background-color: #0dcaf0;
  border: none;
  font-weight: 600;
}

.custom-card .btn-info:hover {
  background-color: #0bbbe6;       /* Slightly darker on hover */
}

/* ====================================
   Quill Editor Content Styling
==================================== */
.ql-editor {
  background-color: #b2cde9;       /* Light editor background */
  color: #000000;                  /* Dark text for readability */
  min-height: 250px;               /* Minimum editing area height */
}

/* ====================================
   Social Icon Styling
==================================== */
.social-icon {
  color: #ffffff;
  margin: 0 0.5rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.social-icon:hover {
  color: #0dcaf0;                  /* Cyan hover color */
  transform: scale(1.2);           /* Slight zoom effect */
}