:root {
    --primary-color:#000839;

    --primary-shades:#00020b;
    --para-color:#80849c;
    --helper-color:#1264fa; /*used for hover*/
    --helper-color2:rgba(250, 134, 134, 0.863); /*used for active link*/
    --helper-color3:rgb(187, 47, 70); /*used for visited link*/
    --border-color: rgb(211, 12, 168);
    --border-width: 2px;
    --left-rightPadding: 0.5rem;
    --left-rightMargin: 8vw;
 
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 100%;
  
}

body {
    
    margin-top: 0.5vw;
    margin-bottom: 0.5vw;
    color: #00020b;
    font-family: 'Times New Roman', Times, serif;
    margin: 0 var(--left-rightMargin);
    background-color: #94b7fa;
}

a {
    text-decoration: none;
    display: inline-block;
    color: #151616;
}

li {
    list-style: none;
    display: inline-block;
   
}

.arrow {
    border: solid rgb(4, 48, 245);
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
  }

  .down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

.drop-down li:hover {
    background: #40423f;
}
.drop-down {
    position: absolute;
    border-top: 3px solid #23dbdb;
    opacity: 1;
    z-index: 999;
    visibility: hidden;
    font-size: 1.3vw;
}

.drop-down li {
    border-bottom: 3px solid rgb(182, 179, 179,0.2);;
    background: #7270e0;
    width: 8vw;
    padding-left: 3px;
    padding-top: 10px;
    padding-bottom: 10px;
}



.drop-down li a {
    color:white;
}


nav ul li:hover >ul {
    opacity:1;
    visibility: visible;
    transition: 0.3s linear;
    
}

#lg {
    height: 10vw;
    border-style: outset;
}


img {
    display: block;
    width: 100%;
    height: 100%;
}



h1,h2,h3,h4 {
    color: var(--primary-color);

}


 h1 {
  font-size:1.8vw;
  font-stretch: ultra-expanded;
  text-align:center;
    text-decoration: underline;
} 

p {
text-align: justify;
}
/* 
.para {
    font-size:clamp(0.1rem, 1.2rem);
    line-height:min(1.2,1.9);
    font-weight:400;
}*/



/****** headerSection  Start***************/

 .header_container {
    display: grid;
    grid-template-columns: 13% 87%;
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
    border-style:inset;
    box-shadow:inset;
    margin: 0;
    padding: 0;
    
 }

 .otherData { 
    display: grid;
    grid-template-rows: 70% 30%;
    position: relative;
  /*  border:3px solid green;*/
 }


 .header_text {
    display: grid;
    grid-template-columns: 80% 20%;
    justify-content: center;
    align-items: center;
    background-color: rgb(83, 112, 238);
    color: aliceblue;
 }




 /*.header_container .img_container {
    border:2px solid rgb(211, 12, 168);
}*/


.name_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
   
    margin-bottom: 0px;
}

#tittleSchool {
    font-size: 3.5vw;
    color: aliceblue;
}
#tittleSub{
    font-size: 1.8vw;
}

#addr_container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0px;
    font-size: 1.4vw;
    text-align: center;
   
}
/****** headerSection  End***************/

/****** NavBarSection  Start***************/
.navbar_container{
    display: flex;
    margin-top: 0; 
    justify-content: right;
    align-items: center;
   background-color: #c4cbf3;
  /* border:2px solid saddlebrown;*/


}
.navbar {
 
    padding-right: 0.3vw;  
     align-items: center;
    
}
.navbar_list {
    display: flex;
    gap:3vw;
    font-size:1.7vw;
   
  
}

/****** NavBarSection  End***************/

.vcenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

/*************footer Section  starts **************/

.footer  {
    height:4vw;
    background-color: rgb(116, 114, 114);
    border-bottom: var(--border-width) solid var(--border-color);
    border-style: ridge;
}

.footer   p {
    font-size: 1.5vw;
    color: white;
    }


#devloper {
    font-size: 1vw;
}
/*************footer Section  Ends **************/
