:root {
  /* Set the topbar background to white */
  --cassiopeia-color-primary: #ffffff;
  --cassiopeia-color-hover: #ffffff;
  --cassiopeia-color-link: #4b657e;
}

/* Make links and text in the topbar visible */
.header .navbar-brand,
.header .navbar-nav .nav-link,
.header .navbar-nav .dropdown-item,
.btn-primary {
  color: #4b657e;
}

/* Set button background to dark blue to make it stand out */
.btn-primary {
  background-color: #4b657e;
  border-color: #4b657e;
  color: white; /* Ensure the button text is white */
  font-weight: bold; /* Make font bold */
}

/* Change link color on hover for better user experience */
.header .navbar-nav .nav-link:hover,
.header .navbar-nav .dropdown-item:hover {
  color: #2a3a4a; /* A slightly darker blue for hover effect */
}

/* Add a blue border on hover for buttons */
.btn-primary:hover {
  background-color: #ffffff; /* Keep the background color the same */
  border: 2px solid #2a3a4a; /* Add a solid border with a darker blue */
  color: #4b657e; /* Ensure text remains white */
  font-weight: bold; /* Make font bold */
}

.card {
  box-shadow: none;
  border: none;
}

.card-body {
  padding: 0;
}

.gender-radio .form-check {
  display: inline-block;
  margin-right: 15px;
}

#jform_com_fields_other_country {
  width: 300px;
  max-width: 100%;
  height: 40px;
}

#jform_com_fields_other_qualification {
  width: 300px;
  max-width: 100%;
  height: 40px;
}

/* animae 2 */

.boxarticle {
  --border-angle: 0deg;
  border-radius: 12px;
  /*width: 250px; */ /* You can change this to any size */
  width: 100%;  /* Still flexible width */
  /* height: 100px; */ /* Fixed height */
  padding: 1rem;  /* Add padding for spacing */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;  /* Optional: center the text horizontally */
  flex-wrap: wrap;  /* Ensure content wraps if needed */
  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
  animation: border-angle-rotate 4s infinite linear;
  border: 3px solid transparent;
  position: relative;
}


/* Box A – animated conic border with color transition */
.boxarticle.a {
  background: linear-gradient(white, white) padding-box,
    conic-gradient(
      from var(--border-angle),
      navy,
      #002f6c,
      #004b87,
      #0069a5,
      #0088c7,
      #f9c80e,
      gold,
      goldenrod,
      navy
    ) border-box;
}

/* Box B – two-color conic pattern */
.boxarticle.b {
  --bg: navy;  /* Base background color */
  background: linear-gradient(white, white) padding-box,
    conic-gradient(
      from var(--border-angle),
      var(--bg) 50%,
      gold 50%
    ) border-box;
}

@keyframes border-angle-rotate {
  from { --border-angle: 0deg; }
  to { --border-angle: 360deg; }
}

@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}