.main-section{ display: flex; gap: 40px; padding: 30px;}
h1, h2, h3, h4, h5, h6{margin: 0px;}
ul, li{list-style: none;}
.basic-modal .modal-content { border-radius: var(--radius-10); padding: var(--pad-20);}
.modal-header{padding: 0px; padding-bottom: 20px; border-bottom: var(--border); justify-content: space-between;}
.modal-header .modal-title{font-weight: 700;}
.modal-header .btn-close{margin: 0px;}
.modal-footer{border-top: var(--border); padding: 0px; padding-top: 15px;}
.bt-primary{width: 100%; height: 56px; background: var(--secondary); color: var(--white); font-size: var(--size-20);}
.header-appear{position: fixed; left: 0; top: 0; right: 0; z-index: 11; background: var(--white);}
::-webkit-scrollbar-track{ background: var(--white);}
::-webkit-scrollbar{width: 8px; border-radius: 30px;}
::-webkit-scrollbar-thumb{background: var(--bg-light); border-radius: 6px;}
input, select{width: 100%; border: var(--border); border-radius: var(--radius-10); height: 42px; padding: 4px 15px; outline: none; background: none;}
textarea{width: 100%; border: var(--border); border-radius: var(--radius-10); padding: 10px 15px; resize: none; outline: none;}
input:focus, select:focus{outline: none;}
select option{border: var(--border);}
.bounce {-moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; }
.logo{display: flex; align-items: center; gap: 5px;}
.more-icon{display: none; max-width: 36px;}
.menu-icon, .close-icon { display: none; transition: all 0.3s ease-in-out;}
.active-icon { display: block;}
.pushwrap.active {overflow: hidden;}
.side-menu { width: 80%; position: fixed; left: 0; top: 100px; background: var(--bg-white); z-index: 444; height: calc(100vh - 150px);
-webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); -webkit-transition: -webkit-transform .5s ease;
transition: -webkit-transform .5s ease; -o-transition: -o-transform .5s ease; transition: transform .5s ease;
transition: transform .5s ease, -webkit-transform .5s ease, -o-transform .5s ease; transition: transform .5s ease, -webkit-transform .5s ease;
overflow: hidden; border-radius: 20px; border: var(--border);}
.side-menu.side-menu-active { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0);}
.side-menu .inner-wrapper { padding: 20px; height: 100%; overflow-y: auto;  display: flex; align-items: center; flex-direction: column; gap: var(--gap-20);}
.side-overlay {position: fixed; left: 0; top: 0; bottom: 0; right: 0; background: var(--bg-primary); z-index: 1; height: 100vh; 
overflow: hidden; display: none;}
.side-overlay.active { display: block;}
.side-quickLink{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-10);}
.nav-tabs{border-bottom: var(--border);}
.nav-tabs .nav-link{padding: 15px 25px; font-size: var(--size-18); color: var(--font-colour); border: none; background: none;}
.nav-tabs .nav-link.active{color: var(--secondary); font-weight: 600;  border-bottom: 1px solid var(--secondary); background: none;}
.inner-contents{display: flex; flex-direction: column; gap: var(--gap-20); position: relative;}
.flex-space-between{display: flex; align-items: center; justify-content: space-between; gap: var(--gap-20);}
.modal-close-ico { cursor: pointer; position: absolute; right: 20px; top: 20px; width: 40px; height: 40px; display: flex; align-items: center;
justify-content: center; background: var(--f5f5f5); border-radius: 50%; z-index: 1;}
#changeStudent .modal-header{justify-content: center;}
.pb-20{padding-bottom: 20px;}
.form-group{margin-bottom: 20px;}
.form-group label{margin-bottom: 10px;}
.file-upload-view{max-width: 300px; display: flex; gap: var(--gap-20); justify-content: space-between;}
.dflex{display: flex; gap: var(--gap-20);}
.dflex2{display: flex; gap: var(--gap-10); align-items: center;}
.line-3{width: 100%; height: 1px; background: var(--f5f5f5);}
.custom-checkbox {display: flex; align-items: center; gap: 8px; cursor: pointer;font-size: 16px; user-select: none;}
.custom-checkbox input { display: none;}
.custom-checkbox .checkmark { width: 30px; height: 30px; border: 2px solid var(--f5f5f5); border-radius: 4px; display: inline-block; position: relative;
transition: all 0.2s ease;}
.custom-checkbox input:checked + .checkmark { border-color: var(--secondary);}
.custom-checkbox .checkmark::after { content: ""; position: absolute; left: 10px; top: 2px; width: 8px; height: 17px; border: solid var(--secondary);
border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.2s ease;}
.custom-checkbox input:checked + .checkmark::after { opacity: 1;}
.custom-checkbox2 {display: flex; align-items: center; gap: var(--gap-10); cursor: pointer; user-select: none;}
.custom-checkbox2 input { display: none;}
.custom-checkbox2 .checkmark { width: 24px; height: 24px; border: 1px solid var(--f5f5f5); border-radius: 4px; display: inline-block; position: relative;
transition: all 0.2s ease;}
.custom-checkbox2 .checkmark::after { content: ""; position: absolute; left: 8px; top: 3px; width: 7px; height: 12px; border: solid var(--secondary);
border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; transition: opacity 0.2s ease;}
.custom-checkbox2 input:checked + .checkmark::after { opacity: 1;}
.custom-checkbox2 input:disabled + .checkmark{background: var(--f5f5f5);}
.pad-20{padding: var(--pad-20);}
.date2{color: var(--secondary); font-weight: 500;}
.exam td, .exam th{border: var(--border); padding: 8px 14px;}
.box2{border: var(--border); border-radius: var(--radius-10); display: flex; flex-direction: column; gap: var(--gap-20);}
.justify-spacebetween{display: flex; justify-content: space-between; align-items: center;}
.btn-four{background: var(--secondary); color: var(--white); border-radius: 6px; padding: 8px 20px; font-size: 14px;}
.btn-four.default{background: var(--f5f5f5);}
.cancelled{background: var(--red) !important;}
.daily-message-box{padding: var(--pad-10); background: var(--bg-white); position: absolute; left: 0; bottom: 0; z-index: 12; width: 100%; display: flex;
gap: var(--gap-10); left: 0;}
.bt-send{height: 42px; background: var(--secondary); }
.bt-send img{max-width: 20px;}
.navbar {display: flex; justify-content: space-between; align-items: center; }
.nav-links { list-style: none; display: flex; gap: 30px;}
.nav-links a { text-decoration: none; position: relative; text-transform: uppercase; font-size: 16px; font-weight: 500;}
.dropdown-menu {position: absolute;  top: calc(100% + 20px); left: 0; min-width: 200px; background: var(--bg-white); border-radius: 8px; display: block;
opacity: 0; transform: translateY(-12px); pointer-events: none; transition: all 0.3s ease; border: var(--border); padding: 0px;
overflow: hidden;}
.dropdown-menu li { list-style: none;}
.dropdown-menu a { display: block; padding: 12px 16px; color: #0f172a; font-size: 14px;}
.dropdown-menu a:hover { background: var(--secondary); color: var(--white);}
.dropdown:hover .dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: auto;}
.dropdown:hover > .dropdown-menu { transform: scaleY(1); opacity: 1; visibility: visible; }
.dropdown::after { content: ""; position: absolute; left: 0; top: 100%; width: 100%; height: 20px;}
.lines{position: relative; margin: 10px 0px; width: 100%; max-width: 100px;}
.line{width: 100px; height: 6px; border: 1px solid var(--secondary); position: relative; overflow: hidden;}
.square{width: 6px; height: 6px; background: var(--secondary); position: absolute; top: 0; animation: moveLeft 12s linear infinite;}
.square2{width: 6px; height: 6px; background: var(--secondary); position: absolute; top: 0; animation: moveLeft 18s linear infinite;}
.bt-view{width: 100%; max-width: 150px; border-radius: 4px; border: var(--border-secondary); height: 44px; display: flex; align-items: center;
justify-content: center; color: var(--secondary);}
.bt-view:hover{ background: var(--secondary); color: var(--white);}
.owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev{ width: 46px; height: 46px; text-align: center; display: flex;
background: var(--bg-white); border-radius: 30px; color: var(--primary); position: absolute; align-items: center; justify-content: center;
border: var(--border); top: 45%; left: -23px;}
.owl-carousel .owl-nav .owl-next{right: -23px; left: auto;}
.flex-1{flex: 1;}
.flex-2{flex: 2;}
.cart-page{min-height: 79vh;}
.btn-primary{width: 100%; height: 56px; border-radius: var(--radius-10); border: none; background: var(--secondary); color: var(--white);
font-size: var(--size-18); font-weight: 600;}
.form-group label sup{color: var(--red); font-size: var(--size-16);}
.form-group{margin: 0px;}
.radio-group { display: flex; flex-direction: column; gap: 20px;}
.custom-radio { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; user-select: none; position: relative;}
.custom-radio input { position: absolute; opacity: 0; cursor: pointer;}
.radio-mark { width: 20px; height: 20px; border: 2px solid var(--grey); border-radius: 50%; position: relative; transition: all 0.3s ease;}
.radio-mark::after { content: ""; width: 10px; height: 10px; background: var(--secondary); border-radius: 50%; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.2s ease;}
.custom-radio input:checked + .radio-mark { border-color: var(--secondary);}
.custom-radio input:checked + .radio-mark::after { transform: translate(-50%, -50%) scale(1);}
.custom-radio:hover .radio-mark { border-color: var(--secondary);}
.blur-3{width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(to right, var(--white), var(--bg-light));
filter: blur(25px); position: absolute; transform: translate(-50%, -50%); left: 45%; top: 60%;}

@keyframes moveLeft {
    0% {
      left: 0%;
    }
    25% {
      left: 50%;
    }
    50% {
      left: 100%;
    }
    75% {
      left: 50%;
    }
    100% {
      left: 0%;
    }
  }

@keyframes pulse-border {
0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity: 1;
}

100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity: 0;
}
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translateY(0);
      opacity: 0;
    }
    50% {
      transform: translateY(-15px);
      opacity: 1;
    }
  }

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}