



.topheader
{
    background-color: rgb(140, 21, 21);
   

    width:auto;
    height: fit-content;
    border: 4px solid rgb(140, 21, 21);
    /* border-radius: 10px; */
    margin-top: 0px;
    
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    font-size: 160%;
    /* font-weight: bold; */
    font-family: 'Times New Roman', Times, serif;
    /* box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.5); */
    /* padding: 2px; */

    position:fixed;
    /* margin-top: -5%; */
    top: 0;
    /* margin-left: 2%;
    margin-right: 2%; */
    width: 100%;
     
    

}



.head 
{
    background-color: rgb(140, 21, 21);
    
    color:white;
 

    height: auto;
    /* width: 100px; */
    /* margin: .3%; */
    
   
    border: 2px solid rgb(140, 21, 21);
    border-radius: 8px;
    /* margin:auto; */
    padding: 3px;
    display: block;
    text-align: center;

}

 .head a
 {
    color: white;
    color: red;
    color: navy;
    color: orange;
    color: white;
    
    /* font-weight: bold; */
    text-decoration: none;

 }

 .head a:hover
 {
    background-color: white;
    /* border:3px solid white; */
    color: black;
    border-radius: 5px;
    


 }




.classroom
{
 margin-top: 150px;
 text-align: center;
 font-weight: bold;
 background-color: rgb(140, 21, 21);
 margin-left: 2%;
 margin-right: 2%;
 border-radius: 10px;
 color: white;
 box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.5);
 

}



.HeadImage
{
   background-color: aqua;
   background-color: white;
   /* width: 100%; */
   margin-left: 2%;
   margin-right: 2%;
   
   margin-bottom: 2%;
   border-radius: 10px;
   background-repeat: no-repeat;
   background-position: center;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   background-color: black;
   /* justify-content: space-around; */
   

}


#slide1 
{
   width:5%;
   margin-right: 0%; 
   /* box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.5); */

   /* background-color: green; */
   /* border: 5px solid red; */
}

#leftimg 
{
   width: 100%; 
   aspect-ratio: 1/2; 
   margin-top: 365%; 
   box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.5);
   cursor: pointer;
}


#slide3
{
   width:5%;
   margin-left: 0%; 
   /* box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.5); */
   /* background-color: green; */
   /* border: 5px solid red; */
}

#rightimg 
{
   width: 100%; 
   aspect-ratio: 1/2; 
   margin-top: 365%; 
   box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.5);
   cursor: pointer;
    
}



#slide2
{
   width: 90%;
   aspect-ratio: 2/1;
   /* background-color: green; */
   /* border: 5px solid red; */
} 


#movingvideose
{
   width: 100%; 
   
   border-image-repeat: none; 
   /* aspect-ratio: 2/1;  */
    
}



 .bottom
 {
     
     
    height: 250px;
    background-color: rgb(140, 21, 21);
    width:100%;
    /* margin: 2%; */
    margin-bottom: 0;
    /* border-radius: 10px; */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
     
   
    

 }



  .address
 {
    
    color: white;
    /* margin:0.2%; */
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 20px;
    margin-bottom: 20px;
    /* width: 25%; */
    font-size: 100%;
    /* border-radius: 10px; */
    text-align: center;
     
    
 } 







/* This section is only for Top Header */


/* Font size management based on Screen Size */


@media (max-width:18in) and (min-width:16.1in)
{
   .topheader
   {
   font-size: 180%;
   }
}

@media (max-width:20in) and (min-width:18.1in)
{
   .topheader
   {
   font-size: 200%;
   }
}


@media (max-width:22in) and (min-width:20.1in)
{
   .topheader
   {
   font-size: 220%;
   }
}

@media (max-width:24in) and (min-width:22.1in)
{
   .topheader
   {
   font-size: 240%;
   }
}

@media (max-width:26in) and (min-width:24.1in)
{
   .topheader
   {
   font-size: 260%;
   }
}

@media (max-width:28in) and (min-width:26.1in)
{
   .topheader
   {
   font-size: 280%;
   }
}

@media (max-width:30in) and (min-width:28.1in)
{
   .topheader
   {
   font-size: 300%;
   }
}

@media (max-width:32in) and (min-width:30.1in)
{
   .topheader
   {
   font-size: 320%;
   }
}


/* Here we are making the font resolution for the side panell */
/* @media  (min-width:16.1in)
{
   .sidewall
   {
   font-size: 160%;
   }
} */

