: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;
}

/* Ensure login form checkboxes are always visible */
.mod-login input[type="checkbox"] {
  accent-color: #003366; /* adds a visible dark-blue checkmark */
  width: 16px;
  height: 16px;
  border: 1px solid #888;
  border-radius: 3px;
  transform: scale(1.1);
  margin-right: 4px;
  vertical-align: middle;
}

.mod-login label[for*="remember"] {
  color: #222; /* ensures label is readable on light backgrounds */
}

/* my animation - diwali */
/* --- UPDATED STYLES FOR JEWELED COLOR SWAP --- */

/* Base style for all words, applying the animation */
.title-word {
  animation: color-animation 4s linear infinite;
  /* Optional: Add a slight text shadow for depth, even when static */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* * The new stylish palette:
* --color-G: Rich Metallic Gold (#FFD700)
* --color-R: Deep Ruby Red (#B90E0A)
* --color-B: Royal/Peacock Blue (#004C99)
* --color-E: Emerald Green (#046A38)
* --color-A: Warm Amber (#FFBF00)
*/


.title-word-1 {
  --color-1: #FFD700; /* Gold */
  --color-2: #B90E0A; /* Ruby */
  --color-3: #004C99; /* Blue */
  --color-4: #046A38; /* Emerald */
  --color-5: #FFBF00; /* Amber */
}

.title-word-2 {
  --color-1: #046A38; /* Emerald */
  --color-2: #FFD700; /* Gold */
  --color-3: #B90E0A; /* Ruby */
  --color-4: #004C99; /* Blue */
  --color-5: #B90E0A; /* Ruby */
}

.title-word-3 {
  --color-1: #FFBF00; /* Amber */
  --color-2: #046A38; /* Emerald */
  --color-3: #FFD700; /* Gold */
  --color-4: #B90E0A; /* Ruby */
  --color-5: #004C99; /* Blue */
}

.title-word-4 {
  --color-1: #004C99; /* Blue */
  --color-2: #FFBF00; /* Amber */
  --color-3: #046A38; /* Emerald */
  --color-4: #FFD700; /* Gold */
  --color-5: #FFD700; /* Gold */
}

.title-word-5 {
  --color-1: #B90E0A; /* Ruby */
  --color-2: #004C99; /* Blue */
  --color-3: #FFBF00; /* Amber */
  --color-4: #046A38; /* Emerald */
  --color-5: #B90E0A; /* Ruby */
}

.title-word-6 {
  --color-1: #FFD700; /* Gold */
  --color-2: #B90E0A; /* Ruby */
  --color-3: #004C99; /* Blue */
  --color-4: #046A38; /* Emerald */
  --color-5: #FFBF00; /* Amber */
}

.title-word-7 {
  --color-1: #046A38; /* Emerald */
  --color-2: #FFD700; /* Gold */
  --color-3: #B90E0A; /* Ruby */
  --color-4: #004C99; /* Blue */
  --color-5: #B90E0A; /* Ruby */
}

.title-word-8 {
  --color-1: #FFBF00; /* Amber */
  --color-2: #046A38; /* Emerald */
  --color-3: #FFD700; /* Gold */
  --color-4: #B90E0A; /* Ruby */
  --color-5: #004C99; /* Blue */
}

.title-word-9 {
  --color-1: #004C99; /* Blue */
  --color-2: #FFBF00; /* Amber */
  --color-3: #046A38; /* Emerald */
  --color-4: #FFD700; /* Gold */
  --color-5: #FFD700; /* Gold */
}

.title-word-10 {
  --color-1: #B90E0A; /* Ruby */
  --color-2: #004C99; /* Blue */
  --color-3: #FFBF00; /* Amber */
  --color-4: #046A38; /* Emerald */
  --color-5: #B90E0A; /* Ruby */
}

.title-word-11 {
  --color-1: #FFD700; /* Gold */
  --color-2: #B90E0A; /* Ruby */
  --color-3: #004C99; /* Blue */
  --color-4: #046A38; /* Emerald */
  --color-5: #FFBF00; /* Amber */
}


@keyframes color-animation {
  0%    {color: var(--color-1)}
  19%   {color: var(--color-1)}
  20%   {color: var(--color-2)}
  39%   {color: var(--color-2)}
  40%   {color: var(--color-3)}
  59%   {color: var(--color-3)} /* Adjusted time to 59% for smoothness */
  60%	{color: var(--color-4)}
  79%	{color: var(--color-4)}
  80%	{color: var(--color-5)}
  99%	{color: var(--color-5)}
  100%  {color: var(--color-1)}
}

/* button design */
/* Base button wrapper */
.ca-btn,
.ca-btn-outline,
.ca-btn-grad,
.ca-btn-glass {
    min-width: 180px;              /* makes all buttons equal width */
    text-align: center;            /* centers the text */
    padding: 0.75em 1.2em;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;          /* ensures perfect center alignment */
    justify-content: center;
    align-items: center;
    box-sizing: border-box;        /* avoids width inconsistencies */
    transition: transform .15s ease, background .2s ease, opacity .2s ease;
}

/* Primary (solid) */
body a.ca-btn {
    background: #003366;
    color: #fff !important;
}
body a.ca-btn:hover {
    background: #004080;
    transform: translateY(-3px);
}

/* Outline */
body a.ca-btn-outline {
    background: transparent;
    color: #003366 !important;
    border: 2px solid #003366;
}
body a.ca-btn-outline:hover {
    background: rgba(0, 51, 102, 0.06);
    transform: translateY(-3px);
}

/* Gradient */
body a.ca-btn-grad {
    background: linear-gradient(135deg, #003366, #00509e);
    color: #fff !important;
}
body a.ca-btn-grad:hover {
    opacity: 0.9;
    transform: translateY(-3px);
}

/* Glass */
body a.ca-btn-glass {
    background: rgba(0, 51, 102, 0.15);
    backdrop-filter: blur(6px);
    color: #003366 !important;
    border: 1px solid rgba(0, 51, 102, 0.25);
}
body a.ca-btn-glass:hover {
    background: rgba(0, 51, 102, 0.25);
    transform: translateY(-2px);
}