.content11{
    width: 100%;
    height: 35rem;
}


.content12{
    width: 100%;
    height: 17.5rem;
}


@media (max-width: 500px){
  .content11{
  height: 43rem;
  }

  .content12{
    height: 25rem;
    }
  
}

.schoolname{
    position: absolute;
    top: 6rem;
    left: 3rem;
    font-family: poppins;
    font-weight: bold;
    font-size: 2.5rem;
  
  }
  .schoolname2{
    color: #ff7426;
    
  }

  .schoolbasics{
    position: relative;
    top: 10rem;
    height: 10rem;
  }



  @media (max-width: 500px){
    .schoolname{
      font-size: 1.5rem;
      position: absolute;
      top: 4rem;
      left: 1rem;
    }

    .schoolbasics{
      top: 22rem;  
      height: 20%;
      width: 100%;
    }

  }
  .census{
    position: relative;
    top:4rem;
    width: 50%;
    left: 3rem;
    font-size: 1.2rem;
    font-family: poppins;
    font-weight: bold;
    color: #774181;
  }


  .Smail{
    position: relative;
    top:4rem;
    width: 50%;
    left: 3rem;
    font-size: 1.2rem;
    font-family: poppins;
    font-weight: bold;
    color: #774181;
  }

  .type{
    position: absolute;
    top: 4rem;
    left: 23rem;
    font-size: 1.2rem;
    font-family: poppins;
    font-weight: bold;
    color: #774181;
  }


  .saddress{
    position: absolute;
    top:1rem;
    left: 3rem;
    font-size: 2rem;
    font-family: poppins;
    font-weight: bold;
    width: 40%;
    color: #774181;
  }


  .schooldata{
    color: rgb(157, 13, 224);
    position: relative;
    top: 1px;
  }

  @media (max-width: 500px){
  
    .census{
      left: 2%;
      width: 90%;
      font-size: 1rem;
      top: 3rem;
    }

    .type{
      left: 15rem;
      font-size: 1rem;
      top: 3rem;
    }

    .saddress{
      font-size: 1.2rem;
      width: 95%;
      left: 2%;
      top: 1rem;
    }

    .Smail {
      font-size: 1rem;
      left: 2%;
      top: 3rem;
    }
  
    }
  
  .pcardwrapper{
    position: relative;
    top: 1rem;
    left: 6rem;
    height: 200px;
    width: 220px;
    background-color: #fff;
    border-radius: 10px;  
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }
  
  .pcardwrapper:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Darker shadow on hover */
  }

  .principal{
    position: relative;
    top: 10rem;
    margin: 0 40px;
    height: 15rem;
  }
  

  @media (max-width: 500px){
    .pcardwrapper{
      top: 15.5rem;
      scale: 0.8;
      left: -3rem;
    }

    .school_slider{
        position: absolute;
        top:-12rem;
        left: 8%;
        z-index: 111;
    }

    .principal{
      top: 4rem;
    }
  }

  
  .cardb{ 
    position: relative;
    border-radius: 10px;
    background: #fff;

  }
  
  
  .cardimage{
    position: relative;
    display: flex;
    align-items: center;
    width: 180px;
    height: 180px;
    margin-top: 10px;
    padding: 4px;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
  }
  
  .cardimage .img{
    display: flex;
    align-items: center;
    height: 96%;
    width: 96%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #da06f2;
  }
  
  .cardb{
    border-radius: 10px;
    background-color: #fff;
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  
  
  
  .imgcontent,
  .cardcontent{
    display: flex;  
    align-items: center;
    padding: 5px 7px;
  }
  
  
  
  .overlay{
    position: absolute;
    left: 0;
    top: 0;
    height: 40%;
    width: 100%;
    background-color: #4070f4;
    border-radius: 10px 10px 0 10px;
  }
  
  .overlay::before,
  .overlay::after{
    content: '';
    position: absolute;
    right: 0;
    top: 80px;
    height: 40px;
    width: 40px;
    background-color: #4070f4;
  
  }
  
  .overlay::after{
    border-radius: 0 40px 0 0;
    background-color: #fff;
  }


  .PTitle{
    position: absolute;
    top: 5rem;
    left: 25rem;
    font-size: 2rem;
    font-family: poppins;
    font-weight: bold;
    color: #774181;

  }


  .PName{
    color: #4070f4;
    font-size: 1.5rem;
  }

  .PService{
    color: #4070f4;
    font-size: 1.3rem;
  }

  .PTP{
    color: #4070f4;
    font-size: 1.3rem;
  }

  @media(max-width: 500px) {
    .PTitle{
      left: 60%;
      top: 25rem;
      font-size: 1.5rem;
      width: 50%;
    }

    .PName{
   
      font-size: 1.1rem;
      position: relative;
      left: -12.5rem;
    }
  
    .PService{
 
      font-size: 1rem;
      position: relative;
      left: -12.5rem;
    }
  
    .PTP{
      
      font-size: 1rem;
      position: relative;
      top: -1.5rem;
      left: 0;
    }

  }

  .swiper1 {
    width: 600px;
    height: 400px;
    position: absolute;
    left: 55%;
    top: 0;
    overflow: hidden;
   
  }

  
  .swiper1-slide {
    background-position: center;
    background-size: cover;
  }
  
  .swiper1-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .swiper1-3d{
    perspective: 1200px;
  } 

  .swiper1-slide {
    width: auto;
    
  }
  


  .swiper1-wrapper{
      width: 30rem;
      margin-right: 0;
      display: flex;
      align-items: flex-end;
      
  }
  
  
  .swiper-slide img {
    width: 30rem;
    height: 20rem;
    border-radius: 1rem;
    object-fit: cover;
  }
  
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right {
    display: none;
  }
  
  .slider-controler {
    position: relative;
    left: 5rem;;
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  

  @media (max-width: 500px){

    .swiper1 {
      width: 300px;
      height: 200px;
      position: absolute;
      left: 0%;
      top: 0;
      overflow: hidden;
      border-radius: 1rem;
    }


    .swiper1-slide {
      background-position: center;
      background-size: cover;
    }

    .swiper-slide img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
      border-radius: 1rem;
    }

    .swiper-3d{
      perspective: 600px;
    } 
    
}


  .SchoolSummary{
    position: absolute;
    background-color: rgb(110, 3, 129);
    top: 35rem;
    width: 100%;
    height: 35%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .Sum_1{
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .Sum_2{
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .FlipCard1{
    top: 2rem;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    align-content: center;
    display: flex;
    justify-content: center;
    transform-origin: center;
    margin-left: 10%;
    border-radius: 20px;

  }

  .FlipCard1:hover{
    transform: rotateY(180deg);
    transform-origin: center;
  }

  .FlipCard2{
    top: 2rem;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    align-content: center;
    display: flex;
    margin-right: 12%;
    justify-content: center;
    transform-origin: center;

  }

  .FlipCard2:hover{
    transform: rotateY(180deg);
    transform-origin: center;
  }

  .FlipCard3{
    top: 2rem;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    align-content: center;
    display: flex;
    margin-left: 12%;
    justify-content: center;
    transform-origin: center;

  }

  .FlipCard3:hover{
    transform: rotateY(180deg);
    transform-origin: center;
  }

  .FlipCard4{
    top: 2rem;
    transform-style: preserve-3d;
    transition: all 0.8s ease;
    align-content: center;
    display: flex;
    margin-right: 10%;
    justify-content: center;
    transform-origin: center;

  }

  .FlipCard4:hover{
    transform: rotateY(180deg);
    transform-origin: center;
  }

  @media(max-width: 500px) {
    .SchoolSummary{
    top: 44rem;
    height: 52%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    }

    .Sum_1{
      width: 85%;
      position: relative;
      top: -2.5rem;
    }

    .Sum_2{
      width: 85%;
      top: -2.5rem;
    }

    .FlipCard1{
      scale: 0.85;
      width: 8rem;
      position: relative;
      margin: 0;
      
    }

    .FlipCard2{
      scale: 0.85;
      width: 8rem;
      position: relative;
      margin: 0;
      
    }
    .FlipCard3{
      scale: 0.85;
      width: 8rem;
      position: relative;
      margin: 0;
      
    }
    .FlipCard4{
      scale: 0.85;
      width: 8rem;
      position: relative;
      margin: 0;
      
    }
  }

  .Scard{
    width: 200px;
    height: 200px;
    position: relative;
    backface-visibility: hidden;
    border-radius: 10px;
    z-index: 1;
    
  }

  .Sdata{
    width: 200px;
    height: 200px;
    position: absolute;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-family: poppins;
    font-weight: bold;
    color: #774181;
    backface-visibility:hidden;
    transform: rotateY(180deg);

  }

  .Simg{
    border-radius: 10px;
  }

  .Slinks{
    position: relative;
    align-items: center;
    top: 0;
    left: 5%;
    width: 90%;
    height: 10%;
  }


  .Sbuttons{
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .Sbuttons1{
    
    display: flex;
    margin-top: 2rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .Sbutton{
    
    width: 24rem;
    height: 5rem;
    font-size: 2rem;
    font-family: poppins;
    font-weight: bold;
    color: #fff;
    position: relative;
    top: 1rem;
    background-color: #4070f4;
    border-style: none;
    border-radius: 10px;
    
  }

  .Sbutton:hover{
    background-color: #073ac6;
    color: #ff7426;
  }

  @media(max-width: 500px) {

    .Slinks{
      left: 2%;
      width: 96%;
      top: 0;
    }

    .Sbutton{
      width: 7rem;
      height: 3.5rem;
      font-size: 0.9rem;
    }
  }

  .scroll_btn{
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    font-size: 1.3rem;
    z-index: 111;
    border-radius: 50%;
    border: solid 0.2px #7e8aad;
    cursor: pointer;
    padding-bottom: 5px;
    width: 35px;
    height: 35px;
    background-color: #f6e5e59a;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  }


  .content13{
    height: 14.5rem;
    background-color: #f6e5e5;
    margin-bottom: 2rem;
  }


  @media(max-width:500px){
    .content13{
      height: 11rem;
      top: 10rem;
      margin-bottom: 0;
    }
  }


  .SAnalysis{
    background-color: #f6e5e5;
    position: relative;
    top: 15rem;
    height: 90%;
    transform: translateY(60px);
  }

  .AnaText{
    font-size: 2.5rem;
    font-family: poppins;
    font-weight: bold;
    position: relative;
    left: 40%;
    top: 2rem;
  }

  .AnaText1{
    color: #ff7426;
  }

  .SResults1{
    position: absolute;
    top: 10rem;
    width: 30%;
    height: 30%;

  }

  .SResults2{
    position: absolute;
    top: 10rem;
    left: 30rem;
    width: 30%;
    height: 30%;

  }

  .SResults3{
    position: absolute;
    top: 10rem;
    left: 63rem;
    width: 30%;
    height: 30%;

  }

  

  .ListText{
    font-size: 2.5rem;
    font-family: poppins;
    font-weight: bold;
    position: relative;
    width: 50%;
    left: 42%;
    top: 1rem;
    margin-bottom: 2rem;
  }

  .ListText1{
    color: #ff7426;
  }


  .Timage{
    border-radius: 20px;
    border: 3px solid #4070f4;
  }

  .CadreList{
    position: relative;
    width: 95%;
    top: 20rem;
    left: 2rem;
    transform: translateY(70px);
  }

  .CadreText{
    font-size: 2.5rem;
    font-family: poppins;
    font-weight: bold;
    position: relative;
    width: 50%;
    left: 42%;
    top: 1rem;
    margin-bottom: 2rem;
    z-index: 111;
  }

  .CadreText1{
    color: #ff7426;
  }


  .arrowup{
    color: #011752;
    width: 40px;
    height: 40px;
    position: fixed;
    left: 50%;
  }

.content14{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 70rem;
}  

@media(max-width:500px){
  .content14{
    height: 50rem;
  }
}

.list_title{
  font-size: 2.3rem;
  font-family: poppins;
  font-weight: bold;
  
}

.list_title2{
  color: #ff7426;
}

@media (max-width:500px){
  .list_title{
    font-size: 1.5rem;
  }
}

.admin_grid{
  width: 100%;
  align-items: center;
}

.teacher_grid{
  width: 100%;
}




#teacherGrid .ag-header {
  background-color: rgba(110, 3, 129, 0.5);
  color: white;
  
}

#adminGrid .ag-header {
  background-color: rgba(3, 129, 127, 0.7);
  color: white;
  
}

#cadreGrid .ag-header {
  background-color: #007bff74;
  color: white;
  
}

#studentGrid .ag-header {
  background-color: #830297a4;
  color: white;
  
}


.ag-theme-alpine .ag-cell {
  align-items: center; 
  display: flex;
}

#cadreGrid .ag-header {
  background-color: #007bff74;
  color: white;
  
}

.ag-header-group-cell .ag-header-cell-comp-wrapper{
  align-items: center;
  justify-content: center;
}


.footer-row {
  font-weight: bold;
  background-color: #f1f1f1;
}

.grand-footer-row .ag-cell{
  font-weight: bold;
  background-color: #83029799; 
  align-items: center;
  justify-content: center;
}

.grand-footer-cell {
  display: flex;
  text-align: right;
  justify-items: center;
  padding-left: 5rem;
}

.approved{
  background-color: #fff1264b;
}

.available{
  background-color: #02a51570;
}

.deficit{
  background-color: #f94f4fa4;
}

.excess{
  background-color: #03b08aa2;
}

.teacher_list{
  display: flex;
  align-items: center;
  justify-content: center;
}

.content15{
  margin-top: 3rem;
  height: 45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media(max-width:500px){
  .content15{
    height: 40rem;    
  }   
}

.center-header {
  text-align: center;
}

.footer-row {
  background-color: #b5b0f8a4;
  font-weight: bold;
  color: #333;
  border-top: 2px solid #ddd;
}


.content16{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 45rem;
  background-color:#f6e5e5 ;
  padding-top: 1rem ;

}

.student_grid{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}


@media(max-width:500px){
  .content16{
    height: 40rem;
  }

  #studentGrid{
    width: 100% !important;
    text-align: left !important;
}

  #studentGrid .ag-header {
    font-size: 12px;
  }

  #studentGrid .ag-header-cell {
    padding:8px !important;    
  }
  #studentGrid .ag-cell {
    font-size: 12px;
  }

  #studentGrid .ag-footer {
    font-size: 12px;
  }
}

.content17{
  height: 27.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}



.grand-footer-cell {
  text-align: center;
  font-weight: bold;
}

.charts{
  width: 98%;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sc_charts{
  width: 98%;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width:500px){
  .content17{
    height: 70rem;
  }

  .sc_charts{
    flex-direction: column;
  }
}

.highcharts-legend .highcharts-no-tooltip{
  position: relative;
  top : 1rem;
}

.ol_chart{
  width: 30%;
}

.al_chart{
  width: 30%;
}

.schol_chart{
  width: 30%;
}

.sc_ol_chart{
  width: 30%;
}

.sc_al_chart{
  width: 30%;
}

.sc_schol_chart{
  width: 30%;
}


@media(max-width:500px){
  .sc_ol_chart{
    width: 100%;
  }
  
  .sc_al_chart{
    width: 100%;
  }
  
  .sc_schol_chart{
    width: 100%;
  }
}

.content21{
  position: relative;
  height: 60rem;
  

}

.content22{
  position: relative;
  height: 48rem;
  

}

.content23{
  position: relative;
  height: 48rem;
  

}

.content24{
  position: relative;
  height: 55rem;
  

}


.dist-list{
  position: relative;
  top: 11rem;
  left: 20%;
  width: 80%;
}

@media (max-width: 500px){
  .dist-list{
    top: 8rem;
    left: 0;
    width: 100%;
  }

  .ag-cell:focus {
    padding: 0 !important; 
    outline: none;
}

  .ag-paging-panel{
    font-size: 0 !important;
  }


  #mataleGrid .ag-theme-alpine {
    width: 100%;
    height: 100%; 
  }

  
}

#kandyGrid{
  height: 760px;
      width: 70%;
    }


    @media (max-width: 500px){
    
      #kandyGrid{
        width: 100%;
      }
    
      
    }

#kandyGrid .zone_btn{

  text-align: center;
  background-color: #6c026c;
  color: #fff;
  font-size: 15px;
  width: 10rem;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  margin-right: 0.5rem;
  text-decoration: none;
}

#kandyGrid .div_btn{
  display: inline-block;
  text-align: center;
  width: 10rem;
  padding: 12px;
  background-color: #9f039f;
  color: #fff;
  font-size: 15px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  margin-right: 0.5rem;
  text-decoration: none;
}



@media (max-width: 500px){
  #kandyGrid .zone_btn{
    font-size: 10px;
    width: 6rem;
    margin-right: 0;
  }

  #kandyGrid .div_btn{
    font-size: 10px;
    width: 6rem;
    margin-right: 0.1rem;
    padding: 12px 0;
  }

}

#mataleGrid{
  height: 450px;
      width: 70%;
    }

    @media (max-width: 500px){
    
      #mataleGrid{
        width: 100%;
      }
    
      
    }




#mataleGrid .zone_btn{

  text-align: center;
  background-color: #024a6f;
  color: #fff;
  font-size: 15px;
  width: 10rem;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  margin-right: 0.5rem;
  text-decoration: none;
}

#mataleGrid .div_btn{
  display: inline-block;
  text-align: center;
  width: 10rem;
  padding: 12px 8px;
  background-color: #036b9f;
  color: #fff;
  font-size: 15px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  margin-right: 0.5rem;
  text-decoration: none;
}


@media (max-width: 500px){
  #mataleGrid .zone_btn{
    font-size: 10px;
    width: 6rem;
    margin-right: 0;
  }

  #mataleGrid .div_btn{
    font-size: 10px;
    width: 6.5rem;
    margin-right: 0.1rem;
  }

}


#nuwaraGrid .zone_btn{

  text-align: center;
  background-color: #014e3e;
  color: #fff;
  font-size: 15px;
  width: 10rem;
  padding: 12px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  margin-right: 0.5rem;
  text-decoration: none;
}

#nuwaraGrid .div_btn{
  display: inline-block;
  text-align: center;
  background-color: #01755e;
  color: #fff;
  font-size: 15px;
  width: 10rem;
  padding: 12px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  margin-right: 0.5rem;
  text-decoration: none;
}

#nuwaraGrid{
  height: 530px;
      width: 70%;
    }

    @media (max-width: 500px){
    
      #nuwaraGrid{
        width: 100%;
      }
    
      
    }

    @media (max-width: 500px){
      #nuwaraGrid .zone_btn{
        font-size: 10px;
        width: 6rem;
        margin-right: 0;
      }
    
      #nuwaraGrid .div_btn{
        font-size: 10px;
        width: 6rem;
        margin-right: 0.1rem;
        padding: 12px 0;
      }
    
    }


.sch-list{
  position: relative;
  top: 11rem;
  left: 15%;
  width: 80%;
}

#divisionGrid .sch_btn{
  display: inline-block;
  justify-content: center;
  text-align: center;
  background-color: #096336;
  color: #fff;
  font-size: 15px;
  width: 100px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  text-decoration: none;
}



#kandyGrid .div_btn:hover{
  background-color:#06e479;
}

#kandyGrid .zone_btn:hover{
  background-color:#028d49;
}

#mataleGrid .div_btn:hover{
  background-color:#06e479;
}

#mataleGrid .zone_btn:hover{
  background-color:#028d49;
}

#nuwaraGrid .div_btn:hover{
  background-color:#06e479;
}

#nuwaraGrid .zone_btn:hover{
  background-color:#028d49;
}

#divisionGrid .sch_btn:hover{
  background-color:#ff7426;
}



#kandyGrid .ag-header {
  background-color: #9f039f81;
  color: white;
  
}

#mataleGrid .ag-header {
  background-color: #036b9f81;
  color: white;
  
}

#nuwaraGrid .ag-header {
  background-color: #01755e81;
  color: white;
  
}

#divisionGrid .ag-header {
  background-color: #26ff5556;
  color: white;
  
}

.divname{
  position:absolute;
  top: 1rem;
  left: 3rem;
  width: 100%;
  font-family: poppins;
  font-weight: bold;
  font-size: 2.5rem;

}
.divname2{
  color: #ff7426;
  
}

@media (max-width: 500px){
  .divname{
    font-size: 1.5rem;
    position: relative;
    top: 0;
    left: 1rem;
  }
}

.btn-back{
  position: absolute;
  top: 7rem;
  right: 8rem;
  font-family: poppins;
  font-size: 20px;
  color: #fff;
  background-color: #15dc7c;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  padding: 0 15px;
  z-index: 1111;
}

.btn-back:hover{
  background-color: #f6a636e4;
}

@media (max-width: 500px){

  .btn-back{
  font-size: 12px;
  right: 0.5rem;
  top: 7.8rem;
  padding: 0 10px;
  }
}


.institute_grid{
  z-index: 9999;

}

.content30{
  width: 100%;
  height: 80rem;

}

.div-name{
  position: absolute;
  top: 5rem;
  width: 95%;
}


#institutionsGrid {
  position: relative;
  top: 10rem;
  left: 20%;
  height: 70rem;
  width: 65%;
}

@media (max-width: 500px){
  #institutionsGrid {
    position: relative;
    top: 10rem;
    left: 0;
    width:100%;
  }
}

#institutionsGrid .ag-theme-alpine .ag-cell {
  display: none;
  justify-content: center;
}

#institutionsGrid .ag-header{
  background-color:rgba(38, 255, 85, 0.46);
  color: white;
}

.right-align {
  text-align: right;
}

.inst_btn{
  display: block;
  text-align: center;
  background-color: #01755e;
  color: #fff;
  font-size: 15px;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  border: none;
  text-decoration: none;
  
}

#institutionsGrid .inst_btn:hover{
  background-color:#e40404;
}


@media (max-width: 500px){
    

  .inst_btn{
    font-size: 10px;
  }


  #institutionsGrid .ag-cell{
    font-size: 12px;
  }

  #institutionsGrid .ag-header{
    font-size: 12px;
  }

  
}

.stats{
  position: relative;
  top: 0rem;
}

.counts{
  position: relative;
  top: 3rem;
  height: 2rem;
  width: 100%;
  font-size: 2.5rem;
  font-family: poppins;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.divisions{
  position: relative;
  top: 4rem;
  width: 100%;
  height: 10rem;
  background-color: rgb(110, 3, 129);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.divi_title{
  font-size: 2rem;
  font-family: poppins;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0rem;
}

.divi_btns{
  height: 6rem;
  position: relative;
  top: -1rem;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-around;

}

.divi_btn{
  width: 15rem;
  height: 4rem;
  font-size: 1.4rem;
  font-family: poppins;
  font-weight: bold;
  background-color: #fff;
  color: #053dd7;
  padding: 0 10px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.divi_btn:hover{
  background-color: rgb(59, 172, 248);
}

.zone-name{
  position: absolute;
  top: 5rem;
  width: 95%;
}

.zonename{
  position:absolute;
  top: 5rem;
  left: 3rem;
  width: 40%;
  font-family: poppins;
  font-weight: bold;
  font-size: 3.5rem;

}
.zonename2{
  color: #ff7426; 
}


.zcontent1{
  position: relative;
  top: 0rem;
  height: 30rem;
}

.zoneswiper {

 position: relative;
 top: 7rem;

}


.stats_btn{
  position: relative;
  top: 3.5rem;
  left: 91%;
  width: 5%;
}

.more{
  font-size: 1rem;
  font-family: poppins;
  font-weight: bold;
  width: 8rem;
  padding: 5px;
  border-radius: 5px;
  border: none;
  color: #fff;
  background-color: #ff7426;
}

.more:hover{
  background-color: #15dc7c;
}

.zoneswiper{
  position: relative;
  left: 30%;
  width: 80%;
}

.swiper3 {
  width: 40%;
  height: 21rem;
  padding-top: 50px;
  padding-bottom: 50px;
}

.swiper3 .swiper-wrapper{
  width: 20rem;
  margin-right: 0;
  display: flex;
  align-items: flex-end;
  
}

.swiper3 .swiper_container{
  height: 10rem;
    padding: 2rem 0;
    position: relative;
}



.swiper3 .swiper-slide img {
  width: 25rem;
  height: 15rem;
  border-radius: 1rem;
  object-fit: cover;
}