<style>
 




  /*-------------------------Contact us page----------------------------------------- */  
.location
{
      width:200%;
      margin: 0;
      padding:80px ,0;
      border-style: ridge;
    
}
.location iframe{
    width:100%;
    border-style: ridge;
    
}

/* Create two equal columns that floats next to each other */
.contact-col{
  float: left;
  padding: 10px;
  height: 420px; 
   width: 572px;/* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .contact-col {
    width: 100%;
  }
}




.contact-col div {
    
    display:flex;
    align-items: center;
    margin bottom:50px;
     font-size: 20px;
   
    
}

.contact-col div .fa{
    font-size: 48px;
    color: darkseagreen;
    margin: 10px;
    margin-right: 30px;
    }

.column-paragraph{
 padding:0;
    font-size: 17px;}

.column-header{
    font-size: 20px;
    margin-bottom: 5px;
    color: #555;
    font-weight: 400; }

.contact-col input, .contact-col textarea{
            width: 85%;
           margin: 2px;
           padding: 15px;
           margin-bottom: 17px;
           outline: none;
           border: 1px solid #ccc; }


.buttonsend {
  background-color:#207e66; /* Green */
  border: none;
  color: white;
  padding: 14px 37px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;                                                                                                                                                            }

.buttonsend:hover {
  background-color: darkseagreen;
  color: white;
  font-size:20px;
}

       
       
       
/*-------------------------end contact us page----------------------------------------- */

/*-----------------------------start of home page----------------------------------*/

/* Popup Container */
.popup-container {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Popup Content */
.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  position: relative;
}

.popup-content img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Close Button */
.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.popup-close:hover {
  color: #ff0000;
}
/*---------HEADING ---------======================*/

.hadu{
  font-family: "Anton", serif;
  font-weight: 900;
  font-style: normal;
  color: #016557;
  font-size:60px; 
  line-height: 2;
   -webkit-text-stroke-width: 0.1px;
  -webkit-text-stroke-color:#EB9C5C;
    letter-spacing: 2px;
}
 @media (max-width:1000px){
    .hadu{
        font-weight: bold;
 
        font-size: 20px;
        line-height: 1;
    }   }
   
    

.gg{
margin-top:-0.1px;
font-weight: 400px;
font-size: 60px;
font-style: normal;
text-align: center;
 text-shadow:-0.06em 0 black, 0.06em 0 #81c1a4 ;
 text-decoration:underline;
   color: #016557;
      
  
}
.laa
{
    
   margin-top:-0.1px;
font-weight: 400px;
font-size: 80px;
font-style: normal;
text-align: center;
 text-shadow:-0.06em 0 black, 0.06em 0 #81c1a4 ;

   color: white;    
    
}

@media (max-width: 1080px){
    .laa{
        
        font-size: 20;
    }
    
}
    
.gga{
margin-top:-0.1px;
font-weight: 400px;
font-size: 80px;
font-style: normal;
text-align: center;
 text-shadow:-0.06em 0 black, 0.06em 0 #81c1a4 ;

   color: #016557;
   
    background:
      radial-gradient(circle farthest-side at 0% 50%,#1f7d66 23.5%,#0000 0)18.9px 27px,
      radial-gradient(circle farthest-side at 0% 50%,rgba(22, 105, 84, 0.57) 24%,#0000 0)17.1px 27px,
      linear-gradient(#1f7d66 14%,#0000 0, #0000 85%,#1f7d66 0)0 0,
      linear-gradient(150deg,#1f7d66 24%,rgba(22, 105, 84, 0.57) 0,rgba(22, 105, 84, 0.57) 26%,#0000 0,#0000 74%,rgba(22, 105, 84, 0.57) 0,rgba(22, 105, 84, 0.57) 76%,#1f7d66 0)0 0,
      linear-gradient(30deg,#1f7d66 24%,rgba(22, 105, 84, 0.57) 0,rgba(22, 105, 84, 0.57) 26%,#0000 0,#0000 74%,rgba(22, 105, 84, 0.57) 0,rgba(22, 105, 84, 0.57) 76%,#1f7d66 0)0 0,
      linear-gradient(90deg,rgba(22, 105, 84, 0.57) 2%,#1f7d66 0,#1f7d66 98%,rgba(22, 105, 84, 0.57) 0%)0 0 #1f7d66;
background-size: 36px 54px;
background-color: #1f7d66;
    }

@media (max-width: 500px){
    .gga{
        font-weight: 50px;
font-size: 30px;
        
    }}
@media (max-width: 1020px){
    .gga{
        font-weight: 50px;
font-size: 30px;
        
    }
    
}




.subling{
    
   text-decoration: none;
  font-size: 5em;
  color: #016557;
 
  /* effect 3D */
  text-shadow:-0.06em 0 black, 0.06em 0 #81c1a4;
  position: absolute;
  top: 50%;
  left: 50%;   
    
}



mumu{
     width:370px; 
    height:150px;
}
 @media only screen and (max-width: 1020px) {
    .mumu {
       width: 150px;
        height: auto;
    }
}
/*==================================start of explore life at school===========================================*/


/*==================================End of explore life at school===========================================*/




/*---------logo----------------------*/

/*----------glowing button---------------*/



 #buttonglowing {
 border: none;
 color: white;
    
 padding:5px 5px;
 font-size: 18px;
 cursor: pointer;
background-color: #dba514;
}

.kkf{
 background:
      radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 100px 100px/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 100px 100px/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 0/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 0/calc(2*100px) calc(2*100px),
      repeating-conic-gradient(#ebf2f4 0 25%,#0000 0 50%) 0 0/calc(2*100px) calc(2*100px),
      radial-gradient(#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 calc(100px/2)/100px 100px
      #ebf2f4;

}



.admissionfixed-button {
    position: fixed;
    z-index: 9979;
    right: -75px;
    top: 50%;
    font-weight: 100;
    transform: translateY(10%) rotate(-90deg); /* Rotate text */
    background-color: #dfeae2; /* Orange color */
    border: 5px solid #207e66;
    color:#207e66 ;
    padding: 10px 20px;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px 0 0 4px;
    text-decoration: none;
    animation: blink 5s infinite;
}





@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}
    
@media only screen and (max-width: 1020px) {
    .admissionfixed-button {
        font-size: 14px;
        padding: 8px 16px;
        right: -45px;
        font-size: 15px;
    }
}

@media only screen and (max-width: 480px) {
    .admissionfixed-button{
        font-size: 12px;
        padding: 6px 12px;
    }
}

@media only screen and (max-width: 480px) {
    .admissionfixed-button{
        font-size: 12px;
        padding: 6px 12px;
    }
}
/*---------end of glowing button--*/

details > summary {
  padding: 20px;
  width: 600px;
  background-color: #eeeeee;
  border: none;
  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

details > p {
  background-color: pink;
  padding: 20px;
  margin: 0;
  width:600px;
  box-shadow: 1px 1px 2px #bbbbbb;
}
    



.mySlides {display: none;}


.myimg {vertical-align: middle;}


/* Slideshow container */
.slideshow-container {
  max-width: 1000%;
    height: auto;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  position: relative;
  margin: 1;
    margin-top: 5px;
}


/* Fading animation */
.fade {
  
  animation-duration: 30s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/*---------------------------card counter----------------*/


/* Float four columns side by side */
.columncount {
  float: left;
  width: 32.87%;
  padding: 0 5px;
     
}

.rowcount {margin: 0 -5px;}

/* Clear floats after the columns */
.rowcount:after {
  content: "";
  display: table;
  clear: both;
margin-left: 30px;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .columncount {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
    .panda{
      margin-left:0px;
    margin-right: 0px;  
        
    }
}

/* Style the counter cards */
.cardcount {
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
   padding: 16px;
   text-align: center;
   background-color:#207e66;
   color: white;
   border: 2px solid firebrick;
          }

.panda{
    margin-left:150px;
    margin-right: 150px;
    }
.facount {font-size:50px;}

.imgcounter{
   border-radius: 25%;
     }

/*-----start of vision and mission----*/


    .containerm {
        width: 100%;
        margin: -80px auto;
        display: flex;
        justify-content: center;
        
        align-items: center;
        font: 30px;
        perspective: 1000px;
        margin-bottom: 15px;
       
    
    }
    .boxm {
        width: 535px;
        height: 230px;
        
        border: 5px solid #207e66;
        border-radius: 10px;
        position: relative;
        transition: transform 0.5s;
        transform-style: preserve-3d;
         box-shadow: 5px 8px #575757;
        margin: 10px;
        background-color:  #dfeae2;
    }
    .boxm:hover {
        transform: rotateY(2deg);
    }
    .contentm {
        position: absolute;
        top: 50%;
        left: 20px; /* Adjust as needed */
        transform: translateY(-50%);
        padding: 20px;
        font: 40px;
        text-align:center; /* Align content to the left */
       
    }
    .labelm {
        font-family: "Poetsen One", sans-serif;
        background-color: #207e66;
        color: #fff;
      
        font-size: 50px;
        padding: 10px 30px;
        border-radius: 7px;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 5px 8px #66a586;
    }
    
    }
    .pvision {
        color: #207e66;     
    }
.psize{
    font-family: "Poetsen One", sans-serif;
    color:  #207e66;
    font-size: 33px;
    margin-top: 95px;
    text-align: center;
}
 


.psizevision{
    color:#207e66;
    font-size: 42px;
    margin-top: 77px;
   
}




    .visionm {
        font-family: "Poetsen One", sans-serif;
        border-color: #207e66;;
      
       
        
    }
    .missionm {
        border-color: #207e66;
         border: 5px solid #207e66;
        font-family: "Poetsen One", sans-serif;
       
    }

    @media (max-width: 718px) {
        .containerm {
            flex-direction: column;
            align-items: stretch;
        }
        .boxm {
            width: 100%;
            margin: 10px 0;
        }}

@media (max-width: 1049px) {
    .psize 
    {font-size: 28px; }
    .psizevision {
        font-size: 28px; }
    .containerm{
       margin: -10px auto; 
        
    }

}

@media (max-width: 1025px) {
    .psize 
    {font-size: 28px; }
    .psizevision {
        font-size: 29px; }
    .containerm{
       margin: -10px auto; 
        
    }

}

@media (max-width: 900px) {
    .psize 
    {font-size: 27px; }
    .psizevision {
        font-size: 27px; }
    .containerm{
       margin: -10px auto; 
        
    }

}


@media (max-width: 718px) {
    .psize 
    {font-size: 31px; }
    .psizevision {
        font-size: 18px; }
    .containerm{
       margin: -10px auto; 
        
    }

}

@media (max-width: 718px) {
    .psize 
    {
      font-size: 25px;  
        
    }
    
    .psizevision {
    
        font-size: 30px;
    }}

 .containermm {
            max-width: 1400px;
            margin: 20px auto;
            overflow: hidden;
            padding: 20px;
            background-color:white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }


/*------------------School rating ---------------*/
.containerating {
            max-width: 1100px;
            margin: 10px auto;
            overflow: hidden;
            padding: 10px;
            background-color:white;
            border-radius: 8px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

/*------------------school rating ---------------*/


/*-------------------principal message------*/

 .containerprinci {
            max-width: 1100px;
            margin: 20px auto;
            overflow: hidden;
            padding: 20px;
            background-color:white;
            border-radius: 8px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        }

        .principal-message {
            overflow: hidden;
        }

        .principal-message img {
            
            float: left;
            
            margin-right: 30px;
            max-width: 300px;
            box-shadow: 5px 8px 9px  #575757;
            border: 4px solid #207e66;
            border-radius: 15px 50px;
             }


        .principal-message-content {
            overflow: hidden;
            text-align: justify;
        }

        .principal-message-content {
            margin-top: 0;
        }
        @media screen and (max-width: 900px) {
            .principal-message img {
                float: none;
                margin-right: 0;
                margin-left: 100px;
                margin-bottom: 20px;
                max-width: 80%;
                max-height: 200px;
            }
            }

/*---------- counter card------*/
 /*---------------Admission Inquiry---------------*/
.containerbubu {
    max-width: 1500px;
    margin: 50px auto;
    padding: 15px;
    border-radius: 10px;
    position: relative;
    background: url('images/gyo.jpeg') center/cover no-repeat;
    color: black;
    text-align: center;
    min-height: 300px; /* Adjust height as needed */
    display: flex;
    align-items: center; 
    justify-content: center;
    margin-bottom: -20px;
    overflow: hidden;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
           .overlaybubu {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(46, 139, 87, 0.6); /* Light brown transparent overlay */
            border-radius: 10px;
            overflow: hidden;
        }

        .contentbubu {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 10px;
        }

        .columnbubu {
            flex: 1;
            min-width: 280px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            color: #333;
        }

        .bubuh {
            color: seagreen;
            margin-bottom: 10px;
            font-family: "Anton", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 40px;
            margin-top: -10px; 
            text-align:center; 
            -webkit-text-stroke-width: 1px;
            -webkit-text-stroke-color:#EB9C5C;
            letter-spacing: 3px; }

        .bubup {
            color: darkslategray;
            font-size: 30px;
             margin-top: 5px ;
            font-family: ;
            font-family: "Gowun Batang", serif;
           font-weight: bold;
        }

        .email-linkbubu {
            display: inline-block;
            margin-top: 10px;
            padding: 10px 15px;
            background: seagreen;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-weight: bold;
             font-family: "Poetsen One", sans-serif;
              }

        .email-linkbubu:hover {
            background: maroon;
            pointer-events: none;
        }

       .emailhead{
       font-size:30px;
              }


        /* Responsive Design */
             @media (max-width: 768px) {
            .contentbubu{
                flex-direction: column;
                 }}


        @media (max-width: 768px) {
            .contentbubu{
                flex-direction: column;
                }
            .bubup { font-size: 10px}
            .bubuh { font-size: 14px;}
            
            .email-linkbubu {
                 margin-top: 10px;
                 padding: 5px 7px;
                 margin-top: 5px;
            }
            .emailhead{ 
            font-size:15px;
            }
        }


/*---------------End Admission Inquiry---------------*/
/*---------values culture*------*/

  .containercul {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .boxi {
        width: calc(33.33% - 20px);
        background-color: #fff2f2;
        padding: 20px;
        margin-bottom: 20px;
        border-radius: 8px;
    }

    .culture {
        background-color: #fee2e2; 
        color: #353014;
    }

    .citizenship{
        background-color: #e6e6e6; /* Blue */
        color: #353014;
    }

    .values {
        background-color: #e2fee2; /* Green */
        color: #353014;
    }

  

    @media screen and (max-width: 800px) {
        .boxi {
            width: calc(100% - 20px);
        }
    }

    .boxi h2 {
        text-align: center;
        margin-top: 0;
    }

/*-------------------------contact us page----------------------------------------- */


.location
{
    width:85%;
     margin: auto;
     padding:80px ,0;
    
}
.location iframe{
    width:100%
    
}
====================


.form-container {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 400px;
}



.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
}

.form-group input,
.form-group textarea {
    width: 50%;
    padding: 23px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-group button {
    width: 50%;
    padding: 20px;
    background-color:#207e66;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.form-group button:hover {
    background-color: #43984A;
}

.error-message {
    color: red;
    font-size: 25px;
    
    text-align: center;
    display:table-column;
}
  

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 2px solid #888;
    width: 80%;
    color:red;
    max-width: 300px;
    text-align: center;
    border-radius: 8px;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}



=============================

/*-------


/*-------------------------end contact us page----------------------------------------- */


/* On smaller screens, decrease text size */
@media only screen and (max-width:800px) {
  .text {font-size: 11px}
    .myimg{height: 300px;}
    .overlay{ padding :150px;
padding-right: 36px;
        
        
    }
}



/*--------------------style for principal image------------------------------*/



/*------------------------------------------------------start og gallery image page------------------------------*/


/* Center website */
.main {
  max-width: 1600px;
   
  margin:20px;
}

galleryimage heading {
  font-size: 50px;
  word-break: break-all;
}

.rowofimage {
  margin: 0px 16px;
}

/* Add padding BETWEEN each column */
.rowofimage,
.rowofimage > .columnofimage {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.columnofimage {
  float: left;
  width: 30%;
  display: none; /* Hide all elements by default */
}

/* Clear floats after rows */ 
.rowofimage:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.contentofimage {
  background-color: white;
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.showofimage {
  display: block;
}

/* Style the buttons */
.btnofgallery{
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: white;
  cursor: pointer;
}

.btnofgallery:hover {
  background-color: #ddd;
}

.btnofgallery.active {
  background-color: #666;
  color: white;
}


/*--------------------image slideshow container-------------------------*/

.mySlides {display: none}
.slideimg {vertical-align: middle;}

/* Slideshow container */
.imageslideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}




/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 6s;
}
@keyframes fade {
  from {opacity: 0.8}
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
    
}
/*--------------------END ofimage slideshow container-------------------------*/
/*==========================loader styles===============/
/* Preloader styles */
#preloader {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
  background:
      radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 100px 100px/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 100px 100px/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 0/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 0/calc(2*100px) calc(2*100px),
      repeating-conic-gradient(#ebf2f4 0 25%,#0000 0 50%) 0 0/calc(2*100px) calc(2*100px),
      radial-gradient(#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 calc(100px/2)/100px 100px
      #ebf2f4;/* Background color of preloader */
    display: flex;
    align-items: center;
    justify-content: center;
    
}

/* Loader animation */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid  #207e66; /* Blue */
    border-radius: 50%;
    width: 140px;
    height: 140px;
    animation: spin 2s linear infinite;
}

/* Animation keyframes */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
        

/*==========================end loader styles===============/

/*-------------------------------------------end gallery image page---------------------------------------------------------------------------------------------*/

 .allcontainer {
            max-width: 85%;
            margin-left : 100px;
            overflow: hidden;
           
            background-color:white;
            border-radius: 8px;
           
}

/* On smaller screens, decrease text size */
@media only screen and (max-width:1900px) {
    .allcontainer{
     max-width: 98%;
      margin-left : 2px  
        
    }     
    }



/*--------------------------------start of Admission page----------------------------*/
#customersl{
   font-family: "Gowun Batang", serif;
  border-collapse: collapse;
  width: 75%;
    align-content: center;
    margin:auto
        ;text-align: center;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#customersl td, #customerslulu th {
  border: 0.1px solid lightgrey;
  padding: 8px;
    color:black;
 
    
}

#customersl tr:nth-child(even){background-color: white 
    ;text-align:left;
    
}
#customersl tr:nth-child(odd){background-color: white
 ;text-align: left;}

/*   #customers tr:hover {background-color: #ddd;}  */

#customersl th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #207e66;
  color: white;
     box-shadow: 0px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

@media only screen and (max-width:720px) {
    #customersl{
       
      width: 100%;
    align-content: left;
    margin:1px;  
    }     
    }



/*----------------------------------------=============================================================-START OF FEE PAGE---------------------------------------------*/
  













#customersfee {
   font-family: "Gowun Batang", serif;
  border-collapse: collapse;
  width: 75%;
    align-content: center;
    margin:auto;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#customersfee td, #customersfee th {
  border: 0.1px solid lightgrey;
  padding: 8px;
   
}

#customersfee tr:nth-child(even){background-color: white 
    ;text-align: center;
   color: 	#36454F;  
}
#customersfee tr:nth-child(odd){background-color: white
 ;text-align: center;
color: 	#36454F;


}

/*   #customers tr:hover {background-color: #ddd;}  */

#customersfee th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #207e66;
  color: white;
     box-shadow: 0px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


@media only screen and (max-width:900px) {
    #customersfee{
       
      width: 100%;
    align-content: left;
    margin:1px;  
    }     
    }


.noteborder{
    border-radius: 90px;
    background-color: aquamarine;
    border: solid 2px;
    border-bottom-left-radius: 90px;
    border-right: 90px;
    padding-left: 150px;
    padding-right: 100px;
    
    
}

.notice{
    
    
    margin-left: 200px;
    margin-right: 200px;
    background-color: #c7e8db;
    color: #174e31;
    
}



/*-------------------------------------------END OF FEE PAGE-------------------------------------------*/


/*======================================================= =============================================start of about u page====================*/

.image-containerabout {
  background-image: url("images/mainn.jpg");
  background-size: cover;
  position: relative;
  height: 300px;
margin-top: 10px;
    
}

.textabout {
     opacity: 0.8;
  background-color: white;
  color: black;
  font-size: 6vw; 
  font-weight: bold;
  margin: 0 auto;
  padding: 10px;
  width: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
}





#more {display: none;}
 



#customersabout {
   font-family: "Gowun Batang", serif;
  border-collapse: collapse;
  width: 98%;
    align-content: center;
    margin:auto;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#customersabout td, #customersabout th {
  border: 2px solid lightgrey;
  padding: 8px;
   
}

#customersabout tr:nth-child(even){background-color: white;
     
}
#customersabout tr:nth-child(odd){background-color: white}

/*   #customers tr:hover {background-color: #ddd;}  */

#customersabout th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #207e66;
  color: white;
  box-shadow: 0px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.comeon{
     
    text-align: justify;
    margin-left: 15px;
    margin-right: 15px;
    color: 	black;
    font-size: 17px;
   font-family: "Gowun Batang", serif;
 line-height: 1.6;
}


@media screen and (max-width: 900px) {
  .comeon{
    padding-right: 1px;
    padding-left: 1px;
      margin-left: 2px;
    margin-right: 2px;
  }
}


.cn{
     
    text-align: justify;
    margin-left: 15px;
    margin-right: 15px;
    color: 	black;
    font-size: 15px;
   font-family: "Gowun Batang", serif;
 line-height: 1.4;
}


@media screen and (max-width: 900px) {
  .cn{
    padding-right: 5px;
    padding-left: 5px;
  }
}
/*---------------------------------=======================================start of curriculum page-=======================================----------------------------*/

.papa{
     
 
    margin-left: 2px;
    margin-right: 2px ;
    text-align: justify;
    color: #00001a;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 2px solid #ccc;
  background-color: #207e66;
  margin-left: 2px;
  margin-right:2px;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: #207e66;
    color: azure;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
 font-weight: 900;
   text-align: justify;  
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: maroon;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #66a586;
    color: whitesmoke;
}

/* Style the tab content */
.tabcontent {
  overflow: scroll;
  display: none;
  padding: 6px 12px;
 
    border: 5px solid #207e66;
  border-top: none;
   margin-left: 2px;
    height :500px;
  margin-right: 2px;
     background-color: whitesmoke;
 text-align: justify;
     border: 0px solid;
  padding: 10px;
  scrollbar-color: #207e66 whitesmoke;
}



@media screen and (max-width: 900px) {
  .tab  {
   margin-left: 1px;
  margin-right: 1px
  }
 .tabcontent  {
   margin-left: 1px;
  margin-right: 1px
  }
    .papa{
       margin-left: 1px;
  margin-right: 5px  
        
    }
}
/*-----------------------------------------==================================================END OF CURRICULUM PAGE----------------------------------------*/


/*-------------------------------------------============================================tart of carrers------------------------------------*/



.columnmon {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .columnmon {
    width: 100%;
    display: block;
  }
}

.cardmon {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.containermon {
  padding: 0 16px;
    background:
      radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 100px 100px/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 100px 100px/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 100% 25%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 0/calc(2*100px) calc(2*100px),
      radial-gradient(35.36% 35.36% at 0    75%,#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 0/calc(2*100px) calc(2*100px),
      repeating-conic-gradient(#ebf2f4 0 25%,#0000 0 50%) 0 0/calc(2*100px) calc(2*100px),
      radial-gradient(#0000 66%,rgba(31, 125, 102, 0.02) 68% 70%,#0000 72%) 0 calc(100px/2)/100px 100px
      #ebf2f4;
}

.containermon::after, .rowmon::after {
  content: "";
  clear: both;
  display: table;
    
   
}

.titlemon {
  color: grey;

}

.buttonmon{
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.buttonmon:hover {
  background-color: #555;
}
/*=========*/


.ribbon {
  --d: .2em; /* the depth */
  margin-right:300px;
   margin-left: 300px;
    
    height:66px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);  
    color:aliceblue;
    font: 77px;
    text-align: center;
    padding: 10px;
  top: 20px;
  inset-inline: calc(-1*var(--d));
  border-bottom: var(--d) solid #0008;
  line-height: 1.8;
  clip-path: polygon(0 0,100% 0,100% calc(100% - var(--d)),calc(100% - var(--d)) 100%,calc(100% - var(--d)) calc(100% - var(--d)),var(--d) calc(100% - var(--d)),var(--d) 100%,0 calc(100% - var(--d)));
  background-color: #207e66; /* the main color */
}
/*===============*/




.hedi{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); 
      
text-align: justify;
    padding-right: 220px;
    padding-left: 220px;
color: #41424c;
    font-size: 17px;
}


@media screen and (max-width: 900px) {
  .hedi{
    padding-right: 5px;
    padding-left: 5px;
  }
}
    
    
}
.slidetestiblock{
    padding-top: 5px;
    padding-left: 150px;
    padding-right: 200px;
    align-content: center;
    font-style: italic;
    background-color: aquamarine;
}

/* Slideshow container */
.slideshow-containertesti {
  position: relative;
  background: lightgrey;
    border-left: 10px solid yellow; 
}

/* Slides */
.mySlidestesti {
  display: none;
  padding: 80px;
  text-align: center;
}

/* Next & previous buttons */
.prevtesti, .nexttesti {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -30px;
  padding: 16px;
  color: #888;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.nexttesti {
  position: absolute;
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prevtesti:hover, .nexttesti:hover {
  background-color: rgba(0,0,0,0.8);
  color: white;
}

/* The dot/bullet/indicator container */
.dot-containertesti {
    text-align: center;
    padding: 20px;
    background: #ddd;
     border-right: 10px solid red; 
    border-top: 10px solid blue; 
}

/* The dots/bullets/indicators */
.dottesti {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
.activetesti, .dottesti:hover {
  background-color: #717171;
}

/* Add an italic font style to all quotes */
qtesti {font-style: italic;}

/* Add a blue color to the author */
.authortesti {color: cornflowerblue;}


/*--this is for akigning text with image----*/
#hp  {
float: left;    
 margin: 0 15px 0 0;
    
    width: 750px; height:500px;

}
@media screen and (max-width: 986px){
    
    #hp{
      
        
        max-width: 100%;
    max-height: auto;
    display: block;
      
      
}}

#ju {
float: right;    
 margin: 3px 15px 0 15px;
    width: 700px; 
    height:450px;
    
    
}
@media screen and (max-width: 772px) {
.ju {
    width: 100%;
    max-width: 600px; /* You can adjust this as needed */
    margin-right: 1px;
    margin-left: -25px;
    
    
    }}
    


    
#rcornerscarry{
  border-radius: 25px;
  background-color:#66a586;
  border-left: 10px solid  #207e66;
    color: azure;
  padding: 5px; 
  width: 800px;
  height: 50px;
    font-size: 35px;
  
}

 

/*--------------------------------------END OF CARRERS PAGE-----#66a586-------------------------*/

/*----------------------===========================------------====================================----------STARTof policy page------------------------------------*/





/* Float four columns side by side */
.columnpolicy {
  float: left;
  width: 30%;
  padding: 20px 10px;
    
  margin-bottom:1px;
    align-items: center;
    
}

/* Remove extra left and right margins, due to padding */
.rowpolicy {margin: 20px 10px;
padding-left: 150px;
    

}

/* Clear floats after the columns */
.rowpolicy:after {
  content: "";
  display: table;
  clear: both;
}



/*--------div as a button______*/


/* Responsive columns */
@media screen and (max-width: 900px) {
.columnpolicy {
    width: 98%;
    margin:4px;
  
    padding: 0px 10px;
    margin-bottom:5px;
    }
    
    
    
 .rowpolicy{
      padding-left: 0px;
     margin-left: 2px;
          }
    
.cardpolicy {
        box-shadow: 2px 2px #BEBEBE;}
        }


/* Style the counter cards */
.cardpolicy {
     box-shadow: 5px 8px #575757;
     padding: 17px;
     text-align: center;
     background-color: #207e66;
     color: aliceblue; 
}
 
.columnpolicy :hover
{
     background-color: #43984A;
     cursor:pointer;
 

  
  
}




.imgpolicy {
   border-radius: 50%;
     }



/*==================================================end of policy page==========================================*/


/*=====================================================================================start of facilities page==============================================*/


.columnextra {
  float: left;
  width:16.66%;
  margin-bottom: 20px;
  padding: 5px 13px;
  overflow:hidden;
  box-sizing: border-box;
    
}
.column .h4


@media screen and (max-width: 4000px) {
  .columnextra .columnfield {
    width: 100%;
    display: block;
  }
   .extrastyle 
    {
        margin: 0;
       font-size: 5px; 
        padding: 0;
        width: 100%;
    }
    .paraextrastyle{
        font-size: 5px;
        
        
    }
}

.cardextra {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  background-color:white;
}

.containerextra {
  padding: 0 16px;
}

.containerextra::after, .rowextra::after {
  content: "";
  clear: both;
  display: table;
}
 
.extrastyle
{
 margin: 40px;
  width: 90%;
  border: 3px solid #d3f8d3;
  padding: 10px;  
    font-size: 18px;
    text-align: justify;
 background-color: #defade;
    
}

.columnfield {
  float: left;
  width:19.99%;
  margin-bottom: 20px;
  padding: 5px 13px;
  overflow:hidden;
  box-sizing: border-box;
}

.paraextrastyle{
    
    font-size: 12px;
}







/*========================================end  of facilities page==============================================*/


</style>