/* =======================================
   CyberCloud9 - custom.css
   Clean Sky Blue Theme (white background)
   ======================================= */

/* ------------------------------
   Bootstrap Primary Color Override
   ------------------------------ */
:root {
  --bs-primary: #87ceeb;
  --bs-primary-rgb: 135, 206, 235;
  --bs-primary-dark: #5aa9c9;
}

/* ------------------------------
   Text & Links
   ------------------------------ */
.text-primary { color: var(--bs-primary) !important; }

a { color: var(--bs-primary); transition: color 0.25s ease; }
a:hover, a:focus { color: var(--bs-primary-dark); }

/* ------------------------------
   Dividers
   ------------------------------ */
.divider { border-top: 0.25rem solid var(--bs-primary) !important; }

/* ------------------------------
   Buttons
   ------------------------------ */
.btn-primary,
.btn-light {
  border-radius: 0.5rem;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.btn-primary {
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bs-primary-dark) !important;
  border-color: var(--bs-primary-dark) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-light {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--bs-primary) !important;
}

.btn-light:hover,
.btn-light:focus {
  background-color: #f8f9fa !important;
  border-color: #f8f9fa !important;
  color: var(--bs-primary-dark) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* ------------------------------
   Masthead + CTA Gradients
   ------------------------------ */
header.masthead {
  background: linear-gradient(
      to bottom,
      rgba(135,206,235,0.82) 0%,
      rgba(135,206,235,0.6) 100%
    ),
    url("../assets/img/bg-masthead.jpg");
  background-position: center;
  background-size: cover;
}

.page-section.cta {
  background: linear-gradient(
      to bottom,
      rgba(135,206,235,0.82) 0%,
      rgba(135,206,235,0.6) 100%
    ),
    url("../assets/img/bg-cta.jpg");
  background-position: center;
  background-size: cover;
}

/* ------------------------------
   Service Icons (Bootstrap Icons)
   ------------------------------ */
#services i {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--bs-primary) !important;
  font-size: 2.5rem;
  transition: transform 0.25s ease, color 0.25s ease;
}

#services i:hover {
  color: var(--bs-primary-dark) !important;
  transform: scale(1.1);
}

/* ------------------------------
   Navbar
   ------------------------------ */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: var(--bs-primary) !important;
}

/* ------------------------------
   Optional Highlights
   ------------------------------ */
.mark, mark { background-color: #87ceeb33 !important; }

/* ------------------------------
   Contact Form Styling
   ------------------------------ */
#contact-form {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}

#contact-form h2 {
  text-align: center;
  margin-bottom: 25px;
  color: #fff;
}

#contact-form label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #fff;
}

#contact-form input,
#contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 16px;
  transition: border-color 0.3s, box-shadow 0.3s;
  background-color: #fff;
  color: #333;
}

#contact-form input:focus,
#contact-form textarea:focus {
  border-color: var(--bs-primary);
  box-shadow: 0 0 5px rgba(135,206,235,0.5);
  outline: none;
}

#contact-form textarea {
  resize: vertical;
  min-height: 120px;
}

#contact-form button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-primary-dark));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
}

#contact-form button:hover {
  background: linear-gradient(135deg, var(--bs-primary-dark), var(--bs-primary));
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

#form-status {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
}

/* ------------------------------
   About Section Text
   ------------------------------ */
#about p {
  color: #1c1c1c !important;
}
header.masthead .masthead-subheading,
header.masthead .masthead-heading {
  color: #fff !important;
}
.masthead-text {
    color: #fff;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

/* Base service block link */
.service-link {
  display: block;
  border-radius: 0.5rem;
  padding: 1rem;
  background-color: #fff;       /* keep background white */
  color: inherit;               /* inherit text/icon colours */
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;        /* remove underline */
}

/* Hover effect: only lift + shadow */
.service-link:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  background-color: #fff;       /* no colour change */
  color: inherit;               /* don’t recolour text/icons */
}

/* Ensure icons stay clean */
.service-link i {
  background: none !important;
  color: var(--bs-primary);     /* keep your theme colour */
}
.service-card {
  display: block;
  border-radius: 0.5rem;
  background-color: #fff;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  background-color: #fff;
  color: inherit;
  text-decoration: none;
}

.service-card i {
  background: none !important;
  color: var(--bs-primary);
}
#services h3 {
  background: none !important;
  color: #1c1c1c !important;  /* dark text */
  display: block;             /* ensure it’s not inline-block with background */
  padding: 0 !important;
  margin: 0 0 0.5rem 0 !important;
}