/* ===== Reset & Base ===== */
/* * { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; overflow-x: hidden; } */

/* ===== Ball ===== */
#ball-container {
  position: absolute;
  /* top: 50%; */
  left: 50%;
  transform: translate(-50%, -10%) scale(1);
  transition: transform 1s ease, top 1s ease, left 1s ease;
  z-index: 10;
}

#ball {
  width: 350px;
  height: 350px;
  border-radius: 50%;
  position: relative;
  animation: none; /* controlled by JS */
}

@keyframes rotateBall {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.segment {
  position: absolute;
  width: 50%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  color: #fff;
  border-radius: 50%;
  transform-origin: 100% 100%;
  transition: all 0.5s ease;
}

.segment span {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
  white-space: nowrap;
}

.segment.school { transform: rotate(0deg) translate(50%,0); background: #ff6b6b; }
.segment.college { transform: rotate(72deg) translate(50%,0); background: #feca57; }
.segment.university { transform: rotate(144deg) translate(50%,0); background: #1dd1a1; }
.segment.master { transform: rotate(216deg) translate(50%,0); background: #54a0ff; }
.segment.phd { transform: rotate(288deg) translate(50%,0); background: #5f27cd; }

/* Ball center button */
.center {
  position: absolute;
  top: 37%;
  left: 42%;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.15);
  transition: all 0.5s ease;
  z-index: 5;
}

/* Small ball position after animation: top center */
#ball-container.small {
  top: -8%; /* moves to top of viewport */
  left: 50%; /* stays horizontally centered */
  transform: translate(-50%, 0) scale(0.4); /* smooth scale and position */
  transition: transform 1s ease, top 1s ease;
}

/* Floating animation for small ball (slight up/down) */
@keyframes floatBall {
  0%, 100% { transform: translate(-50%, 0) scale(0.4); }
  50% { transform: translate(-50%, -5%) scale(0.4); } /* slight float up */
}
#ball-container.small.float {
  animation: floatBall 2s ease-in-out infinite;
}

/* ===== Responsive ===== */
@media (max-width: 1500px) {
  #ball-container.small {
    top:-5%;
  }
}
@media (max-width: 1070px) {
  #ball-container.small {
    top:-3.5%;
  }
}
/* ===== Responsive ===== */
@media (max-width: 820px) {
  #ball {
    width: 320px;
    height: 320px;
  }

  .segment span {
    font-size: 14px;
    padding: 3px 6px;
  }

  #ball-container.small {
    top:-4%;
  }
}
/* ===== Responsive ===== */
@media (max-width: 715px) {
  #ball-container.small {
    top:-2.5%;
  }
}


@media (max-width: 480px) {
  #ball {
    width: 250px;
    height: 250px;
  }

  .segment span {
    font-size: 12px;
    padding: 2px 4px;
  }

  #ball-container.small {
    top: -2%;
  }

}

/* ===== Cards Container ===== */
#educationForm {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 15px;
  margin-top: 140px;
  flex-wrap: wrap;
  transition: all 0.5s ease;
  width: 100%;
  padding: 0 0px;
  position: relative;
}
/* ===== Full Form Cards (FIXED ANIMATION) ===== */
.edu-card {
  /* KEEP layout stable */
  display: flex;
  flex-direction: column;
  gap: -10px;
  background: #fff;
  padding: 20px;
  border-radius: 14px;
  width: 270px;
  min-height: 100px;
  border: 3px solid #333;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;

  /* Animation base */
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  pointer-events: none;
}

/* ===== Show Cards Smoothly ===== */
.edu-card.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ===== Staggered Animation (unchanged timing) ===== */
.edu-card:nth-child(1) { transition-delay: 0.05s; }
.edu-card:nth-child(2) { transition-delay: 0.12s; }
.edu-card:nth-child(3) { transition-delay: 0.18s; }
.edu-card:nth-child(4) { transition-delay: 0.24s; }
.edu-card:nth-child(5) { transition-delay: 0.30s; }

/* ===== Hover / Active Effects (SAFE) ===== */
.edu-card:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

.edu-card.active {
  transform: scale(1.18);
  z-index: 20;
}

.edu-card.dimmed {
  opacity: 0.3;
  transform: scale(1.05);
}

/* Side shift only after active */
.edu-card.shift-left {
  transform: translateX(-30px) scale(1);
}

.edu-card.shift-right {
  transform: translateX(30px) scale(1);
}

/* Card Header */
.edu-card h3 { font-size: 20px; color:  #1a73e8; text-align: center; margin-bottom: -10px; }
/* Floating Input Group */
.float-group {
  position: relative;
  width: 100%;
  margin: 14px 0;
}

.float-input {
  width: 100%;
  padding: 16px 14px;
  border: 2px solid #ccc;
  border-radius: 12px;
  outline: none;
  font-size: 16px;
  background: none;
  transition: border-color 0.3s ease;
}

.float-label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #888;
  pointer-events: none;
  background: #fff;
  padding: 0 4px;
  transition: 0.3s ease all;
  border-radius: 4px;
}

/* Float label when input focused or has value */
.float-input:focus,
.float-input:valid {
  border-color: #1a73e8;
}

.float-input:focus + .float-label,
.float-input:valid + .float-label {
  top: -8px;
  font-size: 12px;
  color: #1a73e8;
}

/* File input hack - always show label up */
.float-input[type="file"] + .float-label {
  top: -8px;
  font-size: 12px;
  color: #888;
}

/* Responsive */
@media (max-width: 600px) {
  .float-input {
    font-size: 14px;
    padding: 14px 12px;
  }
  .float-label {
    font-size: 14px;
  }
}


/* Add Document Button */
.edu-card .add-doc {
  background:  #1a73e8;
  color: #fff;
  border: none;
  padding: 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
  margin-top: 1px;
  justify-content: center;
  align-items: center;
  border-radius: 20px;
}
.edu-card .add-doc:hover { background: #0056b3; }

/* Extra Documents Container */
.edu-card .extra-docs { display: flex; flex-direction: column; gap: 8px; margin-top: -6px; }



/* Card Border Colors */
.edu-card[data-form="school"] { border-color: #ff6b6b; }
.edu-card[data-form="college"] { border-color: #feca57; }
.edu-card[data-form="university"] { border-color: #1dd1a1; }
.edu-card[data-form="master"] { border-color: #54a0ff; }
.edu-card[data-form="phd"] { border-color: #5f27cd; }

/* ===== Responsive ===== */
@media(max-width: 1500px){  #educationForm { flex-wrap: wrap; justify-content: center; gap: 20px;margin-top: 150px; }}
@media(max-width: 1200px){ .edu-card .add-doc {   margin-top: 10px;margin-left: -4px; }}
@media(max-width: 1200px){ .edu-card { width: 300px; min-height: 240px; } }
@media(max-width: 900px){ 
  #educationForm { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .edu-card { width: 280px; min-height: 220px; }
   .edu-card .add-doc {   margin-top: 12px;
  margin-left: -5px; }
}
@media(max-width: 820px){  #educationForm { flex-wrap: wrap; justify-content: center; gap: 20px;margin-top: 120px; }}

@media(max-width: 600px){ 
  #educationForm { flex-direction: column; margin-top: 150px; gap: 12px; align-items: center; }
  .edu-card { width: 90%; min-height: 200px; }
}
@media(max-width: 480px){ 
  #educationForm { flex-direction: column; margin-top: 100px; gap: 12px; align-items: center; }
  .edu-card { width: 90%; min-height: 200px; }
}

/* Adjust ball rotation animation (JS controlled) */
#ball.rotate {
  animation: rotateBall 2s linear infinite;
}
/* Floating Input Card */
.float-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

/* Input Field */
.float-input {
  width: 100%;
  padding: 10px 12px 10px ;
  border: 2px solid #ccc;
  border-radius: 8px;
  outline: none;
  background: transparent;
  transition: border-color 0.3s ease;
}
/* Input Field 
.float-input {
  width: 100%;
  max-height: 30px;
  padding: 18px 12px 10px;
  border: 2px solid #ccc;
  border-radius: 8px;
  outline: none;
  background: transparent;
  transition: border-color 0.3s ease;
}*/

/* Focused border color */
.float-input:focus {
  border-color: #00469b;
}

/* Label */
.float-label {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #888;
  background: #fff;
  padding: 0 4px;
  pointer-events: none;
  transition: all 0.25s ease-in-out;
}

/* When input is focused or filled */
.float-input:focus + .float-label,
.float-input:not(:placeholder-shown) + .float-label {
  top: 10px;
  left: 10px;
  font-size: 13px;
  color: #1a73e8;
}

/* Border gap effect for label */
.float-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  height: 6px;
  width: 0;
  background: #fff;
  z-index: 1;
  transition: width 0.25s ease;
}

/* Activate border gap when label floats */
.float-input:focus + .float-label,
.float-input:not(:placeholder-shown) + .float-label {
  z-index: 2;
}

.float-input:focus ~ .float-label::before,
.float-input:not(:placeholder-shown) ~ .float-label::before {
  content: "";
}


input[type="file"]::file-selector-button {
  background-color: #dbdbdb77;
  color: #00469b;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
/* input[type="file"]::file-selector-button:hover{
  background-color: #00469b;
  color: #ffffff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
} */


/* Responsive */
@media (max-width: 480px) {
  .float-card {
    max-width: 90%;
  }
  .float-input {
    font-size: 14px;
    padding: 14px 10px;
  }
  .float-label {
    font-size: 14px;
  }
}




.year-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.year-group {
  position: relative;
  flex: 1;
}

.float-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 16px;
  border-radius: 6px;
  background: none;
}

.float-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: white;
  padding: 0 4px;
  color: #777;
  pointer-events: none;
  transition: 0.2s;
}

.float-input:focus + .float-label,
.float-input:not(:placeholder-shown) + .float-label {
  top: -1px;
  left: 10px;
  font-size: 12px;
  color: #00469b;
}

.dash {
  font-weight: bold;
  color: #555;
}
/* 
.marksheet-preview,
.certificate-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: -95px;
  padding-left: 170px;
}

.marksheet-preview img,
.certificate-preview img {
  width: 35px;
  height: auto;
  border-radius: 6px;
  cursor: pointer;
  border: 2px solid #ddd;
  transition: 0.2s;
}

.marksheet-preview img:hover,
.certificate-preview img:hover {
  transform: scale(1.05);
  border-color: #007bff;
} */