.hero {
    position: relative;
    overflow: hidden;
  }

 .hero-img {
  z-index: 0;
  height: 125%;
  width: 100vw;
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  filter: brightness(0.5);
  pointer-events: none;
}


.width-wrap h1 {
  z-index: 10;
}

.hero .width-wrap h1 span {
  color: white;

}







:root{
  --white:#FFF;
  --black:#000;
  --lite:rgba(255,255,255,0.6);
  --gray:rgba(1,1,1,0.6);
  --dark:#101010;
  --primary:linear-gradient(145deg,#700005,#7c1f24);
  --primary_dark:#002347;
  --primary_lite:#3399ff;
  --secondary:#3ab068;
}




.flex, .fixed_flex{
  display:flex;
}

.flex_content{
  width:100%;
  position:relative;
}

.padding_1x{
  padding:1rem;
}

.padding_2x{
  padding:2rem;
}

.padding_3x{
  padding:3rem;
}

.padding_4x{
  padding:10px;
}

.big{
  font-size:3.5em;
}

.medium{
  font-size:2em;
}

.small{
  font-size:1.1em;
}

.btn{
  color:#1a1a1a;
  position:relative;
  border:0;
  text-align:center;
}

.btn_1{
  background:#f2c523;
  color: #1a1a1a;
  fill: #1a1a1a;
    border: none;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 1.125rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn_1:hover{
  background: #d4ae26;
}

.divisions{
  position:relative;
  margin-top: 50px;
}

.title_header{
  margin:auto;
  text-align:center;
  width:60%;
}

.ball:before{
  content:"";
  border-radius:50%;
  background-color:rgba(1,1,1,0.2);
  position:absolute;
  left:0;
  top:50%;
  width:30px;
  height:30px;  
  transform:translate(-50%, -50%);
}

.link-tag{
  position:relative;
  color:var(--black);
}

.link-tag:before{
  content:"\f0da";
  font-family:"FontAwesome";
  margin-right:5px;
  transition:0.5s;
  color:var(--primary);
}

.link-tag:hover:before{
  margin-right:10px;
  color:var(--black);
}

.link-tag:hover{
  color:var(--primary);
}

@media (max-width:920px){
  .flex{
      flex-wrap:wrap;
  }

  
  .big{
      font-size:1.8em;
  }
  
  .medium{
      font-size:1.6em;
  }
  
  .small{
      font-size:1.1em;
  }
  
  .btn{
      padding:0.5rem 1rem;
  }
  
  a, p, .btn{
      font-size:12px;
  }
  
  .title_header{
      width:100%;
  }
}







/***************************
             FOOTER
****************************/
footer{
  margin-top:12rem;
  position:relative;
}




footer h3{
  color:var(--white);
  margin-bottom:1.5rem;
}

footer .logo{
  color:var(--white);
}

footer .logo img{
  width:50px;
}

footer .logo figcaption strong{
  margin-bottom:3px;
}








footer .flex:last-child a{
  width:40px;
  display:inline-block;
  background-color:#334f6c;
  color:var(--white);
  padding:0.5rem;
  margin-right:3px;
  text-align:center;
}

footer .flex:last-child a:hover{
  background-color:var(--primary_lite);
  color:var(--gray);
}

.top_footer{
  width:90%;
  position:absolute;
  left:50%;
  top:-25%;
  transform:translate(-50%, -25%);
  border-radius:10px;
  background:#700005;
  color:white;
  overflow:hidden;
  box-shadow:0px 6px 16px -6px var(--gray);
}

.top_footer figure{
  position:absolute;
  left:50%;
  transform:translate(-50%, 0);
  overflow:hidden;
  z-index:11;
}

.top_footer .flex_content:first-child:after{
  content:"";
  background:var(--primary);
  width:80%;
  height:95%;
  border-radius:0 0 50% 50%;
  z-index:1;
  position:absolute;
  left:50%;
  transform:translate(-50%, 0);
}

.top_footer .flex_content:first-child{
  width:25%;
}

.top_footer figure img{
  width:100%;
  z-index:11;
  position:relative;
}

@media (max-width:1100px){
  footer .flex:first-child{
      flex-wrap:wrap;
  }
  
  footer .flex:first-child .flex-content{
      flex: 1 1 40%;
  }
}

@media (max-width:920px){
  footer{
      margin-top:5rem;
      padding:0 !important;
  }
  
  .top_footer{
      width:100%;
      position:static;
      transform:none;
      border-radius:0;  
      box-shadow:0;
  }
  
  .top_footer .flex_content:first-child{
      display:none;
  }

  footer .flex:last-child .flex-content:last-child{
      text-align:left;
  }
}

@media (max-width:320px){
  footer .flex:first-child .flex-content{
      flex:1 1 100%;
  }
}







/*division_2*/
.division_2{
  align-items:center;
  display:grid;
  grid-template-columns: 50% 50%;
  padding:0 4rem;
}

.division_2 .title_header{
  width:100%;
  text-align:left;
}

.division_2 .flex_content:first-child{
  background-color:#F2C523;
}

.division_2 .flex_content:last-child{
  background-color: #700005;
}



#notification::-webkit-scrollbar {
  display:none !important;
}

.division_2 .flex_content:first-child p{
  color:var(--gray);
  margin-bottom: 20px;
}

.division_2 #notification a{
  align-items:center;
  color:var(--primary_dark);
  padding:1rem 0;
}

.division_2 #notification a:not(:last-child){
  border-bottom:1px solid rgba(1,1,1,0.1);
}

.division_2 #notification a p{
  font-size:12px;
}

.division_2 #notification article .title{
  margin:0;
  position:relative;
  top:10px;
  font-size:0.9rem;
}

.division_2 #notification a:hover .title{
  color:var(--dark);
}

.division_2 #notification figure{
  width:15%;
  height:100%;
  overflow:hidden;
  margin-right:20px;
}

.division_2 #notification figure img, .division_2 #event figure img{
  width:100%;
  height:50%;
  object-fit:cover;
}

.division_2 #notification aside{
  align-items:center;
  justify-content:space-between;
}

.division_2 span{
  font-size:12px;
  color:var(--gray);
  margin-right:15px;
  position:relative;
  top:-10px;
}

.division_2 .flex_content:last-child .title{
  color:var(--white);
}

.division_2 #event figure{
  width:100%;
  height:30vh;
  overflow:hidden;
}

.division_2 #event figure img{
  width:50%;
}

#event ul li{
  background-repeat:no-repeat;
  background-size:cover;
  padding:1rem;
  width:100% !important;
  overflow:hidden;
}

#event aside{
  align-items:center;
  justify-content:center;
}

#event aside span{
  padding:0.3rem 2rem;
  background-color:var(--lite);
  font-weight:600;
  font-size:2em;
  text-align:center;
  text-transform:uppercase;
}

#event aside span sub{
  display:block;
  font-weight:200;
  font-size:12px;
  position:relative;
  top:-5px;
}

#event .btn{
  display:block;
  margin-top:2rem;
  border-radius:0;
  padding:0.5rem 1rem;
  background-color:var(--white) !important;
}

@media (max-width:920px){
  .division_2{
      margin-top:0rem;
      display:block;
      padding:1rem;
  }
  
  .division_2 #notification{
      max-height:300px;
      height:300px;
  }
  
  .division_2 #notification figure{
      width:50px;
      margin-right:0;
  }
  
  #event{
      margin-top:1rem;
  }
  
  #event aside span{
      padding:0.3rem 1rem;
      font-size:1.3em;
  }
}





/*division_3*/
.division_3{
  margin:3rem auto;
}

.division_3 .slider{  
  max-width:95%;
  margin:auto;
}

.division_3:before{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:30%;
  background-color:#f2f2f2;
}

.division_3 .title_header{
  margin:0;
  text-align:left;
  padding:0 3rem;
}

.division_3 .title_header p{
  color:var(--gray);
  line-height:1;
}

.title_header h4 {

  font-weight: 300;
}
.card li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border:1px solid rgba(1,1,1,0.2);
  border-radius:5px;
  overflow:hidden;
  background-color:var(--white);
}

.card p {
color: var(--gray);
}

.card figure{
  position: relative;
  width: 100%;
  max-height:150px;
  overflow:hidden;
}

.card figure img{
  width:100%;
  pointer-events: none;
  transition:0.5s;
}

.card article{
  position:relative;
}

.card .title{
  color:var(--primary_dark);
}

.card .price{
  padding:1rem;
  width:66px;
  height:66px;
  border-radius:50%;
  background-color:var(--primary_lite);
  color:var(--white);
  text-align:center;
  position:absolute;
  right:10px;
  top:-30px;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-size:1.3rem;
  font-weight:500;
  transition:0.5s;
}

.card li:hover .price{
  background-color:var(--primary);
  color:var(--secondary);
}

.card li:hover .title{
  color:var(--dark);
}

.card .tag{
  background-color:var(--primary_dark);
  padding:0.3rem 1rem;
  color:var(--white);
  text-transform:uppercase;
  display:block;
  width:fit-content;
  margin:2vh 0;
  font-weight:400;
  font-size:13px;
  position:absolute;
  top:-2rem;
}

.card aside, .card aside .flex-content:first-child{
  align-items:center;
}

.card aside .flex-content:last-child{
  text-align:right;
}

.card aside .flex-content:last-child a{
  color:var(--primary);
  margin-right:5px;
}

.card aside .flex-content:first-child img{
  margin-right:10px;
}

.card aside .flex-content:first-child b{
  color:var(--primary);
  font-weight:600;
}

.card .title{
  font-weight:500;
}

.slider .card li:hover figure img{
  transform:scale(1.1);
}

.logo-slider .slick-slide{
margin: 5px;
}

.slick-next, .slick-prev{
  padding:1rem;
  background-color:var(--primary_dark);
  color:var(--white);
  display:flex;
  align-items:center;
  justify-content:center;
  transform:none;
  top:-2rem;
}

.slick-next:hover, .slick-prev:hover{
  background-color:var(--dark) !important;
}

.slick-next:focus, .slick-prev:focus{
  background-color:var(--gray) !important;
}

.slick-prev{
  border-radius:5px 0 0 5px;
}

.slick-prev{
  left:94% !important;
}

.slick-next{
  right:0rem;
  border-radius:0 5px 5px 0;
}

.slick-next::before, .slick-prev::before{
  font-family:"FontAwesome";
}

.slick-next::before{
  content:"\f105";
}

.slick-prev::before{
  content:"\f104";
}

@media (max-width:920px){
  .division_3 .title_header{
      width:100%;
      padding:1rem;
  }
}






/*division_4*/
.division_4{
  z-index:11;
  margin-top: 150px;
}

.division_4 .title_header{
  width:50%;
}

.division_4 .title_header .btn{
  margin:auto;

}

.division_4 .title_header aside{
  align-items:center;
  justify-content:center;
  margin-top: 20px;
}


.division_4 .title_header aside .btn{
  margin:0 0.5rem;
}





.division_4 .title_header p{
  color:var(--gray);
}

.division_4 .title_header .bar{
  margin:auto;
}

.division_4 .cards{
  padding:1rem 4rem;
  position:relative;
}
@media (max-width: 539px) {
  .division_4 .cards {
    padding: 1rem;
  }
}

.division_4 .cards:before, .division_4 .cards:after{
  content:"";
  position:absolute;
  width:150px;
  height:150px;
  z-index:-1;
}

.ball{
  position:absolute;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--primary);
}

.division_4 .cards:before{
  background-image:url("https://i.postimg.cc/3NQzzcK3/dots.png");
  top:0;
  left:2%;
  animation: arrows 4s 0s infinite;
}

.division_4 .cards:after{
  background-image:url("https://i.postimg.cc/3NQzzcK3/dots.png");
  bottom:0;
  right:2%;
  animation: arrows 6s 0s infinite;
}

.ball:nth-child(1){
  width:30px;
  height:30px;
  left:10%;
  top:5%;
  animation: arrows 10s 0s infinite;
}

.ball:nth-child(2){
  width:30px;
  height:30px;
  right:10%;
  bottom:5%;
  animation: arrows 10s 0s infinite;
}

.ball:nth-child(3){
  width:50px;
  height:50px;
  left:50%;
  top:20%;
  transform:translate(-50%, -20%);
  animation: arrows 10s 0s infinite;
}

.ball:nth-child(4){
  width:50px;
  height:50px;
  left:3%;
  bottom:0%;
  animation: arrows 15s 0s infinite;
}

.division_4 .cards figure{
  height:70vh;
  margin:2%;
  border-radius:140px;
  overflow:hidden;
  position:relative;
}

.division_4 .cards figure:nth-child(2), .division_4 .cards figure:nth-child(3){
  top:4rem;
}

.division_4 figure img{
  object-fit:cover;
  width:100%;
  height:100%;
}



@media (max-width:920px){
  .division_4 .title_header{
      width:100%;
      padding:1rem;
  }
  
  .division_4 .cards figure{
      height:200px;
  }
  
  .division_4 .cards:after{
      display:none;
  }
}








/*Transparent text background*/
.stroke{
  color:transparent;
  -webkit-text-stroke: 1.5px var(--primary_lite);
}


/*Custom cursor coloring*/
.cursor--expand {
  animation: cursor-animate-3 550ms forwards;
  border: 10px solid rgb(var(--primary_dark));
}

.cursor--expand::after {
  border: 15px solid rgba(var(--primary_dark), .3);
}


/*Scroller*/
.cs-down{
  position: absolute;
  height: 35px;
  width: 20px;
  border-radius: 10px;
  border: 2px solid var(--white);
  bottom: 10px;
  left: 50%;
  margin-left: -10px;
  z-index:11;
}

.cs-down:before{
  content: '';
  height: 5px;
  width: 5px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: var(--white);
  -webkit-animation: UpAndDown 3s infinite;
  animation: UpAndDown 3s infinite;
}

@-webkit-keyframes UpAndDown {
0%,
100% {
  top: 30%;
}
50% {
  top: 70%;
  opacity: 0.5;
  -webkit-transform: translate(-50%, -50%) scale(0.8);
  transform: translate(-50%, -50%) scale(0.8);
}
}

@keyframes UpAndDown {
0%,
100% {
  top: 30%;
}
50% {
  top: 70%;
  opacity: 0.5;
  -webkit-transform: translate(-50%, -50%) scale(0.8);
  transform: translate(-50%, -50%) scale(0.8);
}
}


/*ZOOM IN*/
.animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)}
  to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
  from {transform: scale(0)}
  to {transform: scale(1)}
}





/*RIPPLE*/
.ripple {
  border-radius: 100%;
}

.ripple::after {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  height: 100%;
  width: 100%;
  background: var(--primary);
  border-radius: 100%;
  -webkit-animation-name: ripple;
  animation-name: ripple;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
  animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
  z-index: -1;
}

@-webkit-keyframes ripple {
  from {
      opacity: 1;
      transform: scale3d(0.75, 0.75, 1);
  }
  to {
      opacity: 0;
      transform: scale3d(2, 2, 1);
  }
}

@keyframes ripple {
  from {
      opacity: 1;
      transform: scale3d(0.75, 0.75, 1);
  }
  to {
      opacity: 0;
      transform: scale3d(2, 2, 1);
  }
}



.bar{
  display:block;
  height: 5px;
  width: 100px;
  background: var(--primary);
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  margin: 20px auto 20px 0;
}

.bar:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  width: 5px;
  background: var(--white);
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: MOVE-BG;
  animation-name: MOVE-BG;
}

@keyframes MOVE-BG{
  0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
  }
  100% {
      -webkit-transform: translateX(105px);
      transform: translateX(105px);
  }
}

.bar_blue, .bar_white{  
  display:block;
  width:100px;
  height:3px;
}

.bar_blue{
  background-color:#ef4a4a;
}

.bar_white{
  background-color:var(--white);
}


/*Ripple effect*/
@-webkit-keyframes ripple {
  from {
      opacity: 1;
      transform: scale3d(0.75, 0.75, 1);
  }
  
  to {
      opacity: 0;
      transform: scale3d(2, 2, 1);
  }
}

@keyframes ripple {
  from {
      opacity: 1;
      transform: scale3d(0.75, 0.75, 1);
  }
  
  to {
      opacity: 0;
      transform: scale3d(2, 2, 1);
  }
}




@keyframes arrows {
  0%, 100% {
      color: black;
      transform: translateY(0);
  }
  50% {
      color: #3AB493;
      transform: translateY(20px);
  }
}

@keyframes fixed_nav {
  0%, 100% {
      transform: translateY(-100px);
  }
  100% {
      transform: translateY(0px);
  }
}


.history-timeline-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}
.history h2 {
  margin-bottom: 50px;
}

.section-ab {
  padding: 3rem 2rem;
  max-width: 1450px;
  margin: auto;
}

.section-red {
  background-color: #700005;
}

.section-red h2 {
  color: white;
}
  /* School Image */
  .school-img {
    max-width: 100%;
    border-radius: 12px;
    margin-top: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  
  /* Affiliations */
  .affiliations ul {
    list-style: none;
    padding: 0;
  }
  
  .affiliations li {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .affiliations img {
    width: 60px;
    height: auto;
    transition: transform 0.3s;
  }
  
  .affiliations img:hover {
    transform: scale(1.1);
  }
  
  /* Tab Section */
  .tabs {
    margin-top: 1rem;
  }
  
  .tab-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  
  .tab-btn {
    background-color: #cb252e;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
  }
  
  .tab-btn:hover,
  .tab-btn.active {
    background-color: #6b060b;
  }
  
  .tab-content {
    background-color: white;
    padding: 1.5rem;
    border-left: 4px solid #700005;
    border-radius: 5px;
    min-height: 100px;
  }
  
  .tab-panel {
    display: none;
  }
  
  .tab-panel.active {
    display: block;
  }
  
  /* Offerings */
  .offerings ul {
    padding-left: 1.5rem;
  }
  
  .offerings li {
    margin-bottom: 0.5rem;
  }
  .split-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
  }
  
  .about-text, .about-image {
    flex: 1 1 45%;
  }
  
  .about-image img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
  .cards-section .card-container {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .affiliation-card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
    flex: 1 1 45%;
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  
  .affiliation-card img {
    width: 60px;
    height: auto;
    flex-shrink: 0;
  }
  
  .affiliation-card p {
    margin: 0;
  }
  .offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
  }
  
  .offer-card {
    background-color: white;
    border-left: 4px solid #F2C523;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1rem;
  }
  
  .offer-card  a{
    color: #000;
        font-weight: 500;

  }

/* ======================= */
/* RESPONSIVE ADJUSTMENTS */
/* ======================= */

@media (max-width: 1024px) {

  
    section {
      padding: 2rem 1.5rem;
    }
  }
  
  /* Adjust split layout to vertical stack on tablets/mobiles */
  @media (max-width: 768px) {
    .split-layout {
      flex-direction: column;
    }
  
    .about-text, .about-image {
      flex: 1 1 100%;
    }
  
    .about-image img {
      margin-top: 1rem;
    }
  
    .tab-buttons {
      flex-direction: column;
      gap: 0.5rem;
    }
  
    .affiliation-card {
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
    }
  
    .affiliation-card img {
      margin-bottom: 0.5rem;
    }
  }
  
  @media (max-width: 480px) {

    .tab-btn {
      font-size: 0.95rem;
      padding: 0.6rem 1rem;
    }
  
    .contact-section button {
      width: 100%;
      font-size: 1rem;
    }
  
    .offer-card {
      font-size: 0.95rem;
      padding: 0.75rem 1rem;
    }
  }
  /* Cool Hover Effects */

/* Affiliation cards hover effect */
.affiliation-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .affiliation-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }
  
  /* Offer card hover effect */
  .offer-card {
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: default;
  }
  
  .offer-card:hover {
    transform: scale(1.03);
    background-color: #d9eaff;
  }
  
  /* Tab button hover glow effect */
  .tab-btn {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }
  
  .tab-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(
      120deg,
      rgba(189, 87, 92, 0.1),
      rgba(255, 0, 13, 0.3),
      rgba(53, 5, 7, 0.1)
    )
    ;
    transition: all 0.5s ease;
    z-index: -1;
  }
  
  .tab-btn:hover::before {
    left: 0;
  }
  
  /* About image zoom */
  .about-image img {
    transition: transform 0.4s ease;
  }
  
  .about-image img:hover {
    transform: scale(1.03);
  }
  

 h2{
  margin-bottom: 10px;
}