/* Make slides look consistent */
.gallery-item,
.gallery-item.video {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    box-shadow: 0 2px 6px rgb(0 0 0 / .15);
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: auto;
    display: block;
}

.gallery-caption {
    text-align: center;
    padding: .5rem .25rem;
    background: #fff;
}
/* ----- overlay caption at the bottom of the media ----- */
#xGallerySection .gallery-item {
    position: relative;      /* anchor for absolute caption */
    background: lightblue;
}

#xGallerySection .gallery-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .5rem .75rem;
    background: rgba(0,0,0,.55);  /* semi-transparent black */
    color: #fff;
    text-align: center;
    font-size: .95rem;
}
.gallery-caption h4 {
  color: white;
}
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.4);
    border: none;
    padding: .25rem .5rem;
    border-radius: 50%;
    color: #fff;
    font-size: 1.25rem;
}
.owl-carousel .owl-nav button.owl-prev { left: -12px; }
.owl-carousel .owl-nav button.owl-next { right: -12px; }
.owl-carousel .owl-dots { margin-top: .75rem; }
/* (Optional) Fancier arrows — tweak as you like */
.carousel-arrow {
    display: inline-block;
    font-size: 2rem;       /* arrow size */
    line-height: 1;        /* vertical centring */
    color: #fff;
}
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    background: rgba(0,0,0,.5);
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
}
/* ============================== */
/*  Desktop-only gallery tweaks   */
/* ============================== */
@media (min-width: 992px) {

    /* 1️⃣  Centre the entire carousel block */
    #xGallerySection .gallery-carousel {
        max-width: 820px;          /* or whatever width cap you chose */
        margin-left: auto;
        margin-right: auto;        /* ⬅️ this pair centres it */
    }

    /* 2️⃣  Limit height *and* centre each slide inside the track */
    #xGallerySection .owl-carousel .item {
        display: flex;             /* lets us centre vertically too */
        justify-content: center;   /* horizontal centring */
        align-items: center;       /* vertical centring (optional) */
    }

    #xGallerySection .gallery-item img,
    #xGallerySection .gallery-item video {
        max-height: 480px;         /* keep it short */
        width: auto;               /* maintain aspect ratio */
        object-fit: contain;       /* or cover, your call */
    }
}


#BackToTop{
  position: fixed;
  width: 50px;
  height: 50px;
  bottom: 20px;
  right: 20px;
  opacity: 0;
  transition: .3s;
  cursor: pointer;
  transform: scale(.95);
}
#BackToTop.active{
  opacity: .15;
  filter: brightness(90%);
  transition: .3s;
}
#BackToTop:hover{
  transform: scale(1);
  transition: .3s;
  opacity: .25;
}
#BackToTop img{
  width: 100%;
  height: 100%;
}

.Main .btn{
    color: white;
    background: #009BDB;
    border-radius: 5px;
    box-shadow: none;
}
.Main .nav{
    -webkit-margin-start: 0rem;
    margin-bottom: 5px;
}
.Main .dataTables_scrollHead .table{
    background: #009BDB;
}
.Main .nav-link{
    color: #009BDB;
}
.Main .nav-link.active{
    background-color: #009BDB !important;
}
.Main .btn-primary{
    background-color: #009BDB !important;
    border-color: #009BDB !important;
}
.Main .paginate_button a{
  background-color: #009BDB !important;
}
#region-main-box{
  padding-right: 0;
  padding-left: 0;
}
#region-main{
  padding-right: 0;
  padding-left: 0;
}

.card-img-top{
  height: 232px;
}
.Main .btn-primary{
    background-color: #009BDB !important;
    border-color: #009BDB !important;
}
.Main {
    margin-left: 100px;
}
#xAboutSection{
  width: calc(100% - 200px);
  margin-right: 100px;
}


#BackToTop{
  display: none;
}


@media (max-width: 500px) {
  #xHome img{
    transform: scale(1);
  }
}
@media (max-width: 700px){
  .Menu .Item {
    font-size: 10px;
    margin-top: 0px;
  }

  #xAboutSection{
    width: calc(100% - 20px);
    margin-right: 10px;
    margin-left: 10px;
  }
}

#nav-monthly_students-tab{
  display: none;
}




.card-category-2{
    margin-top: 25px;
}
.card-category-2 ul{
    display: flex;
    justify-content: space-around;
}

.card-category-2 ul li{
    list-style-type: none;
    display: inline-block;
    vertical-align: top;
}

.card-category-2 ul li {
    margin: 10px 5px;
    background: #FF0024;
    background: #009BDB;

    border-radius: 5px;
}

.card-category-1, .card-category-2, .card-category-3, .card-category-4, .card-category-5, .card-category-6 {
    font-family: sans-serif;
    margin-bottom: 45px;
    text-align: center;
}
    .card-category-1 div, .card-category-2 div {
        display:inline-block;
    }

    .card-category-1 > div, .card-category-2 > div:not(:last-child) {
        margin: 10px 5px;
        text-align: left;
    }


    /* Image Card */
    .img-card {
        width:300px;
        position: relative;
        border-radius: 5px;
        text-align: left;

        /* left: -30px; */
        /*
        -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
        -o-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3); 
        */       
    }

        .img-card .card-image {
            position: relative;
            margin: auto;
            overflow: hidden;
            border-radius: 5px 5px 0px 0px;
            height: 330px;
        }

        .img-card .card-image img {
            width:100%;
            border-radius: 5px 5px 0px 0px;
            
            -webkit-transition: all 0.8s;
            -moz-transition: all 0.8s;
            -o-transition: all 0.8s;
            transition: all 0.8s;
        }
        .img-card .card-image img {
            -webkit-transform: scale(.9);
            -moz-transform: scale(.9);
            -o-transform: scale(.9);
            transform: scale(.9);
        } 
        .img-card .card-image:hover img {
            -webkit-transform: scale(1);
            -moz-transform: scale(1);
            -o-transform: scale(1);
            transform: scale(1);
        }        

        .img-card .card-text {
            padding: 0 15px 15px;
            line-height: 1.5;   
        }

        .img-card .card-link {
            padding: 20px 15px 30px;
            width: -webkit-fill-available;
        }

            .img-card .card-link a {
                text-decoration: none;
                position: relative;
                padding: 10px 0;
            }

            .img-card .card-link a:after {
                top: 30px;
                content: "";
                display: block;
                height: 2px;
                left: 50%;
                position: absolute;
                width: 0;

                -webkit-transition: width 0.3s ease 0s, left 0.3s ease 0s;
                -moz-transition: width 0.3s ease 0s, left 0.3s ease 0s;
                -o-transition: width 0.3s ease 0s, left 0.3s ease 0s;
                transition: width 0.3s ease 0s, left 0.3s ease 0s;
            }

            .img-card .card-link a:hover:after { 
                width: 100%; 
                left: 0; 
            }        
        
        .img-card.iCard-style1 .card-title {
            position: relative;
            font-family: 'Open Sans', sans-serif;
            z-index: 1;
            top: 10px;
            left: 10px;
            font-size: 30px;
            color: #fff;
        }
        
        .img-card.iCard-style1 .card-text {            
            color: #795548;
            color: white;

            
        }

        .card-img-top {
            max-height: 350px;
            min-height: 250px;
            object-fit: cover;
            object-position: 50% 10%;
        }
        .card-text p{            
          color: rgb(240, 240, 240) !important;
        }
        .img-card.iCard-style1 .card-link a {
            color: #FF9800;                
        }

        .img-card.iCard-style1 .card-link a:after {            
            background: #FF9800;
        }

        .img-card.iCard-style2 .card-title {
            padding: 15px;
            font-size: 25px;
            font-family: 'Roboto', sans-serif;
        }

        .img-card.iCard-style2 .card-image {
            margin-bottom: 15px;
        }
        
        .img-card.iCard-style2 .card-caption {
            text-align: center;
            top: 80%;
            font-size: 17px;
            color: #fff;
            position: absolute;
            width: 100%;
            font-family: 'Roboto', sans-serif;
            z-index: 1;
        }
        
        .img-card.iCard-style2 .card-link a {
            border: 1px solid;
            padding: 8px;
            border-radius: 3px;
            color: black;
            font-size: 13px;

            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
        }

        .img-card.iCard-style2 .card-link a:hover {            
            background: black;
        }

        .img-card.iCard-style2 .card-link a:hover span {            
            color:#fff;            
        }

        .img-card.iCard-style3 {
            text-align: center;
        }

        .img-card.iCard-style3 .card-title {
            top: 80%;
            font-size: 30px;
            color: black;
            color: white;
            position: absolute;
            width: 100%;
            font-family: 'Roboto', sans-serif;
            z-index: 1;
        }

        .img-card.iCard-style3 .card-text {
            color: #636060;
            color: white;
        }

        .img-card.iCard-style3 .card-link {
            border-top: 1px solid #e8e8e8;
        }
            .img-card.iCard-style3 .card-link a {
                color: #585858;
            }
            .img-card.iCard-style3 .card-link a:after {            
                background: #585858;
            }

    @media (max-width: 766px){
        .card-category-2 ul{
            flex-direction: column;
        }
    }

    #xPrizesSection span{
      left: 0;
      transform: translateY(25px);
      font-size: 25px;
    }
    #xPrizesSection img{
      height: 100%;
      width: auto;

      width: 100%;
      height: auto;
    }

    #xPrizesSection ul{
      padding-left: 0;
      -webkit-margin-start: 0;
    }


    @media (max-width: 766px){
      #xPrizesSection h3{
        margin-left: 10px !important;
      }
    }


    #Poster video{
      width: 100%;
      height: 100%;
      border: none;
      position: absolute;
      object-fit: cover;
    }
    @media (min-width: 766px){
      .info{
        margin-right: 10px;
      }
    }
    .info h2{
      background: #FF0024;
      color: white !important;
      border-radius: 5px;
      padding: 20px;
    }
    .info p{
      padding: 20px;
      border: 1px solid #FF0024;
      border-radius: 5px;
      transform: translateY(-20px);
    }

    @media (min-width: 766px){
      #About .image{
        width: 150% !important;
      }
    }

    #xScoreboardSection .dataTables_scrollHeadInner table{
      background: #009BDB;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      overflow: hidden;
    }
    #xScoreboardSection .dataTables_scrollHeadInner table th{
      color: white;
    }
    #xScoreboardSection .nav-tabs .nav-link{
      border-radius: 5px;
    }
    #xScoreboardSection .nav-tabs .nav-link.active{
      background-color: #009BDB;
    }

    #xScoreboardSection .pagination a{
      background-color: #009BDB;
      border-color: #009BDB;
      color: white;
    }
    #xScoreboardSection .pagination li:first-child a{
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    #xScoreboardSection .pagination li:last-child a{
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    #xAboutSection .col-md-12 .row .col-md-8{
      max-width: 100%;
      flex: 0 0 100%;
    }
    #scoreboards{
      width: 100%;
    }

    /* Swal image stretching HOT FIX. */
    #swal2-content img{
      height: auto;
    }

    #About .container {
  padding-left: 15px;
  padding-right: 15px;
  margin-left: auto;
  margin-right: auto;
}

/* Start Landing Page */
.landing-page header {
  min-height: 80px;
  display: flex;
}
@media (max-width: 767px) {
  .landing-page header {
    min-height: auto;
    display: initial;
  }
}
.landing-page header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .landing-page header .container {
    flex-direction: column;
    justify-content: center;
  }
}
.landing-page header .logo {
  color: #5d5d5d;
  font-style: italic;
  text-transform: uppercase;
  font-size: 20px;
}
@media (max-width: 767px) {
  .landing-page header .logo {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}
.landing-page header .links {
  display: flex;
  align-items: center;
}
@media (max-width: 767px) {
  .landing-page header .links {
    text-align: center;
    gap: 10px;
  }
}
.landing-page header .links li {
  margin-left: 30px;
  color: #5d5d5d;
  cursor: pointer;
  transition: .3s;
}
@media (max-width: 767px) {
  .landing-page header .links li {
    margin-left: auto;
  }
}
.landing-page header .links li:last-child {
  border-radius: 20px;
  padding: 10px 20px;
  color: #FFF;
  background-color: #6c63ff;
}
.landing-page header .links li:not(:last-child):hover {
  color: #6c63ff;
}
.landing-page .content .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 140px;
  min-height: calc(100vh - 80px);
}
@media (max-width: 767px) {
  .landing-page .content .container {
    gap: 0;
    min-height: calc(100vh - 101px);
    justify-content: center;
    flex-direction: column-reverse;
  }
}
@media (max-width: 767px) {
  .landing-page .content .info {
    text-align: center;
    margin-bottom: 15px 
  }
}
.landing-page .content .info h1 {
  color: #5d5d5d;
  font-size: 44px;
}
.landing-page .content .info p {
  margin: 0;
  line-height: 1.6;
  font-size: 15px;
  color: #5d5d5d;
}
.landing-page .content .info button {
  border: 0;
  border-radius: 20px;
  padding: 12px 30px;
  margin-top: 30px;
  cursor: pointer;
  color: #FFF;
  background-color: #6c63ff;
}
.landing-page .content .image img {
  max-width: 100%;
}
.landing-page .content .image{
  width: 100%;
  text-align: center;
}
/* End Landing Page */
.landing-page{
  margin-bottom: 50px;
}
.landing-page .container{
  width: 100%;
  gap: inherit !important;
  min-height: auto !important;
}

#scoreboard{
  width: 100%;
}
#scoreboard .dataTables_scrollHead{
  width: 100%;
}
#scoreboard .dataTables_scrollHead table{
  width: 100%;
}
#xScoreboardSection #rules{
  display: none;
}

#xAboutSection{
  margin-top: 0;
}

#xScoreboardSection .nav-link:hover{
  color: white !important;
}