body {
  font-family: 'Poppins', sans-serif;
  background: white;
  margin: 0;
  padding: 0;
  color:#423242;
}


.header {
  background: #ededed;
  color: #000000;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  text-align: center;
  width: 100%;
}

.subtitle {
  font-size: 20px;
  float: left;

}

.logo-area {
  display: flex;

}

.logo {
  width: auto;
  height: 90px;
  margin-right: 280px;
}

.site-title {
  font-size: 20px;
  font-weight: 400;
}


.container {
  width: 100%;
  max-width: 1200px;
  margin: 30px auto;
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: fadeSlideIn 0.8s ease forwards;
}

.result-section h2 {
 font-size: 35px;
}


.form-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}


.form-box {
  width: 100%;
  max-width: auto;
  margin: auto;
  display: grid;
  gap: 15px;
}

/* .form-group {
  display: block;
  flex-direction: row;
  

} */

label {
  font-weight: bold;
  margin-bottom: 5px;
}

input,
select {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  text-align: center;

  /* width: 100%; */
}



/* ---------------- BUTTONS ---------------- */
.button-group {
  display: flex;
  justify-content: center;   /* Centers the buttons */
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 10px;
  grid-column: span 2;
}

.btn-submit,
.btn-clear {
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  width: auto;      /* Not full width */
  min-width: 320px; /* Keeps buttons same width */
  text-align: center;
}


.btn-submit {
  background: #004080;
  color: #fff;
}

.btn-clear {
  background: #999;
  color: #fff;
}



.message-box {
  background: #fff8e6;
  /* Softer background for readability */
  color: #b30000;
  /* Clear warning color */
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  border: 2px solid #ff4d4d;
  /* Clean border */
  font-size: 19px;
  line-height: 1.6;
  text-align: justify;
}

.result-box {
  background: #fbf8f0;
  padding: 15px;
  border: 1px solid #ddd;
  margin-top: 20px;
  border-radius: 8px;
}

.result-logo{
  width: 125px; height: 125px; padding: 10px;
}

.footer {
  text-align: center;
  background: #ededed;
  color: #160a0a;
  padding: 10px;
  margin-top: 0;
  font-size: 14px;
  width: 100%;
}

.result-section h2 {
  text-align: center;
}

/* .grading {
  width: 100%;
  border-collapse: separate;
  margin-top: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  border-color: black;
} */
 .grading-box {
  border: 1px solid black;
  padding: 10px;
  margin-top: 30px;
  font-size: 11pt;
}


.resultoutheder {
  display: flex;
}

.seusltext
{
  color: #ef3030; width: 35px; font-size: 40px; font-family: Bell MT;
}
.cedpltext{
  font-family:Maiandra GD; font-size: 27px; color: #ef3030;
}

.externaltext
{
  font-family:Maiandra GD; font-size: 22px; color: #ef3030;
}


.result-title {
  font-family: "Maiandra GD";
  font-size: 30px;
  border: solid;
  background-color: #1d8081;
  color: white;
  border-radius: 5%;
  border-color: rgb(153, 142, 142);
  margin-left: 400px;

  padding: 5px;
  display: inline-block;
  /* keeps spacing correct */
}

.exam-number {
  font-family: "Maiandra GD";
  font-size: 20px;
  border: solid;
  background-color: #1d8081;
  border-color:  rgb(153, 142, 142);
  color: white;
  border-radius: 5%;
  margin-left: 710px;
  padding: 2px;
  display: inline-block;
}

.examnumber {

  margin-left: 480px;
  border-color: black;
  border: solid;
}

.exam-heading {
  font-family: "Maiandra GD", sans-serif;
  font-size: 23px;
  text-align: center;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 25px;
}

table
{
  width: 100%; 
  text-align: left;
 height: auto; font-size: 18px;
}

th
{
   font-size: 24px;
   padding-bottom: 10px;
   color: #ae7d1f;
}

.gpa {
  margin-left: 800px;
  color: #2c7a7b;

}


/* Desktop / Normal style — keep your current design */
.form-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Make full width on mobile */
.full-width {
  width: 100%;
  grid-column: span 1;

}

.finalbutton {
  display: flex;
  justify-content: right;
  gap: 20px;
  margin-top: 20px;
}

.btn-print {
  background: #2c7a7b;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;


}
.page-content {
  flex: 1;                     /* pushes footer down */
  display: flex;
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center */
  padding: 20px;
}
.container1 {
  width: 100%;
  max-width: 600px;
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
    animation: fadeSlideIn 0.8s ease forwards;
}
.indexpagebutton {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 25px;
  flex-wrap: wrap;
}
.btn-page { text-decoration: none; 
  padding: 10px 30px 10px 30px;
 
     background-color:#ff451b;
   color:white; 
    font-family: "Roboto", sans-serif;
     border-radius: 6px;
      font-weight: 700;
       text-transform: capitalize;
      

 } 
 .btn-page:hover { 
    color:rgb(14, 1, 1); 
   background-color:#ffb324;

  }
.footer {
  text-align: center;
  background: #ededed;
  color: #160a0a;
  padding: 12px;
  font-size: 14px;
  width: 100%;
}
.result-section h2,
.container1 h2 {
  font-size: 34px;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
    
} 



/* ===== Loading Overlay ===== */
#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
}

/* Spinner */
.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid #ddd;
  border-top: 6px solid #0056b3;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* ===== Result Animation ===== */
.result-box {
  animation: fadeSlideIn 0.6s ease forwards;
}

@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Buttons animation */
/* .finalbutton {
  animation: fadeSlideIn 0.8s ease forwards;
}
*/
#printArea {
  scroll-margin-top: 120px;
} 







/* ============================= */
/* ===== RESPONSIVE MEDIA QUERIES ===== */

/* 📱 Mobile (up to 768px) */
@media (max-width: 768px) {

  /* Header */
  .logo-area {
    flex-direction: column;
    align-items: center;
  }

  .logo {
    height: 70px;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .subtitle {
    font-size: 14px;
    text-align: center;
    float: none;
  }

  /* Container */
  .container {
    margin: 10px;
    padding: 10px;
  }
  .container1 {
  width: 100%;
  max-width: 600px;
  background: #fff;
  padding: 30px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
    animation: fadeSlideIn 0.8s ease forwards;
}

  .result-section h2 {
    font-size: 22px;
  }

  /* Form */
  .form-box {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .full-width {
  width: 100%;
  grid-column: span 2;

}


  .button-group {
    flex-direction: column;
    gap: 10px;
  }

  .btn-submit,
  .btn-clear {
    width: 100%;
    min-width: unset;
  }

  /* Result header */
  .resultoutheder {
  
  }

  .result-logo {
    width: 100px;
    height: 100px;
    margin-top: 20px;
  }
.seusltext
{
  color: #ef3030; width: 35px; font-size: 19px; font-family: Bell MT;
}
.cedpltext{
  font-family:Maiandra GD; font-size: 14px;
}

.externaltext
{
  font-family:Maiandra GD; font-size: 12px;
}

  .result-title {
    font-size: 20px;
    margin-left: 120px;
    margin-top: 10px;
  
  }

  .exam-number {
    font-size: 16px;
    margin-left: 170px;
    margin-top: 10px;
  }

  .exam-heading {
    font-size: 16px;
  }

  /* Tables */
  table {
    font-size: 12px;
  }

  th {
    font-size: 14px;
  }

  /* GPA */
  .gpa {
    margin-left: 190px;
    text-align: center;
  }

  /* Bottom buttons */
  .finalbutton {
    flex-direction: column;
    align-items: center;
  }

  .btn-print,
  .btn-page {
    width: 95%;
    text-align: center;
  }

  /* Grading table */
  .grading {
    font-size: 12px;
  }

  input,
select,
textarea,
button {
  font-size: 16px !important;
}

 .container1 h2 {
    font-size: 24px;
  }

  .btn-page {
    width: 80%;
    text-align: center;
  }

}





/* 📱 Tablet (769px – 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

  .logo {
    height: 80px;
    margin-right: 50px;
  }

  .subtitle {
    font-size: 16px;
  }

  .form-box {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }


  .btn-submit,
  .btn-clear {
    min-width: 220px;
  }

  .result-title {
    font-size: 24px;
    margin-left: 0;
  }

  .exam-number {
    font-size: 18px;
    margin-left: 0;
  }

  .exam-heading {
    font-size: 18px;
  }

  .gpa {
    margin-left: 0;
    text-align: right;
  }

  .grading {
    font-size: 13px;
  }
}


/* 💻 Large Desktop (1025px+) optional adjustments */
@media (min-width: 1025px) {

  /* Keep your desktop styles, only small adjustments if needed */
  .container {
    max-width: 1200px;
  }

  .exam-heading {
    font-size: 23px;
  }

  .result-title {
    font-size: 30px;
  }

  .exam-number {
    font-size: 20px;
  }

  .grading {
    font-size: 14px;
  }
  
}