:root {
  scroll-behavior: smooth;
  
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #3d4348;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #3e5055;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #388da8;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/**********************
        Colours
**********************/
.text-default-1 {
    color:#4154f1;
}
.text-default-2{
    color: #012970;
}
.bg-default-1 {
    background-color:#4154f1;
}
.bg-default-2{
    background-color: #012970;
}
.bg-default-3{
    background-color: #f6f9ff;
}
.primary-btn{
  background-color: var(--accent-color);
  color: var(--contrast-color);
}
/**********************
    Icon Container
**********************/
.icon-container{
    width: 100px;
    height: 100px;
    padding: 20px;
    border-radius: 100%;
    background-color: #4154f1;
}
.icon-container i{
    font-size: 50px;
}

/**********************
    School Header
**********************/
.schoolHeader {
    /* padding-bottom: 10px; */
}

.schoolHeader .school-logo{
    width: 150px;
    height: 150px;
    border-radius: 100%;
    border:1px solid #012970;
}

.schoolHeader .school-icon{
    font-size:150px;
}
.schoolHeader .school-title {
    font-size: 28px;
    color: #012970;
    font-weight: 900;
    margin-bottom: 5px;
    padding: 0;
}

.schoolHeader .school-motto {
    font-size: 16px;
    color: #3f81f3;
    font-weight: 700;
    margin-bottom: 3px;
    padding: 0;
}

.schoolHeader .school-contact {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.record-text{
    font-size: 15px;
}
.record-text .label{
    font-weight: 700;
    color: rgba(1, 41, 112, 0.6);
    margin-right: 10px;
}

@media (max-width: 768px) {
    .schoolHeader .school-logo{
        width: 100px;
        height: 100px;
        border-radius: 100%;
    }
    .schoolHeader .school-icon {
        font-size:100px;
    }
    .schoolHeader .school-title {
        font-size: 17px;
        font-weight: 1000;
        margin-bottom: 3px;
    }
    
    .schoolHeader .school-motto {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 3px;
        padding: 0;
    }
    
    .schoolHeader .school-address {
        font-size: 12px;
        font-weight: 300;
    }
    
  }
  

/**********************
    Data Box
**********************/

.data-box {

}

.data-box li {
    padding: 8px;
    font-size: 15px;
}


.data-box li .label{
    font-weight: 700;
    color: rgba(1, 41, 112, 0.6);
    margin-right: 10px;
}


@media (max-width: 768px) {
    .data-box {
        margin-bottom: 10px;
    }
    .data-box li {
        padding: 5px;
        font-size: 15px;
    }

    .data-box li .label{
        font-weight: 700;
        color: rgba(1, 41, 112, 0.6);
        margin-right: 10px;
    }

}


/**********************
    STEPPER 
**********************/

.stepper-container {
    margin: 0 auto;
    text-align: center;
  }
  
  .stepper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  
  .step {
    flex: 1;
    text-align: center;
    position: relative;
  }
  
  .step span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    background: lightgray;
    color: white;
    margin-bottom: 10px;
  }
  
  .step.active span {
    background: #012970;
  }
  
  .step p {
    margin: 0;
    font-size: 14px;
  }
  
  .step::before {
    content: "";
    position: absolute;
    top: 15px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: lightgray;
    z-index: -1;
  }
  
  .step:first-child::before {
    display: none;
  }
  
  .step.active::before {
    background: #012970;
  }
  
  .step-content {
    margin-bottom: 20px;
  }
  
  .stepper-buttons {
    display: flex;
    justify-content: space-between;
  }
  
  button {
    padding: 10px 20px;
    background: var(--bs-color-black);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  
  button:focus{
    background-color: #6899f5;
    color: #fff;
  }
  
  button:disabled {
    background: gray;
    cursor: not-allowed;
  }
  
  .submit-button {
    background-color: #012970;
    color: white;
  }
  
  
  .table, .table th, .table td {
    font-size: 13px;
  }