.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;
    


 }


.HeadImage
{
   background-color: aqua;
   background-color: white;
   /* width: 100%; */
   margin-left: 2%;
   margin-right: 2%;
   margin-top: 150px;
   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: 450%; 
   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: 450%; 
   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; */
} 


#movingimg
{
   width: 100%; 
   
   border-image-repeat: none; 
   aspect-ratio: 2/1; 
    
}


 /* This is for middle part */


 .sideheader
 {

    background-color: white;
    /* background-color: rgb(12, 12, 49); */
    
    display: flex;
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content:space-between;
    margin-bottom: 2%;
    max-height: max-content;
    /* background-image: url(../HomeMovingPicture/home_1.jpg); */
    background-position: center center;
    /* background-size: 35%  ; */
     
    background-repeat: no-repeat;
    /* box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.2); */
    
 } 



 .sidewall
 {
    background-color: white;
    color: black;
    border: 2px solid  white;
    line-height: 2;
    margin: 2%;
    border-radius: 10px;
    text-align: justify;
    box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.5);
    width:100%;
 }



 .sidewall p
 {
    /* margin-left: 5%;
    margin-right: 5%; */
    margin: 5%;
    text-align: justify;
    font-size: 20px;
    font-family: 'Times New Roman', Times, serif;
 }




 #left 
 {
     
   width:45%;
   max-height: max-content;
   /* aspect-ratio: 1/1; */
 }

  #left2
 {
     
   width:45%;
   max-height: max-content;
   /* aspect-ratio: 1/1; */
 }



 #right 
 {
     
   width:45%;
   max-height: max-content;
   /* aspect-ratio: 1/1; */
 }

  #right2
 {
     
   width:45%;
   max-height: max-content;
   /* aspect-ratio: 1/1; */
 }

 
 #middle 
 {
     
   width:45%;
   max-height: max-content;
   aspect-ratio: 1/1;
 }

#showleftimg
{
   width: 100%; 
   aspect-ratio: 1/1;
   border-radius: 10px;
   border-image-repeat: none; 
     
}

  #middle2
 {
     
   width:45%;
   max-height: max-content;
   aspect-ratio: 1/1;
 }


#showrightimg
{
   width: 100%; 
   aspect-ratio: 1/1;
   border-radius: 10px;
   border-image-repeat: none; 
   
    
}



 .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;
     
    
 } 



/* Screen response system */

@media (max-width : 32in) and (min-width: 11.1in)
{
  #left
  {
   aspect-ratio: 1/1;
  }

  #left2
  {
   aspect-ratio: 1/1;
  }

  #right
  {
   aspect-ratio: 1/1;
  }

  #right2
  {
   aspect-ratio: 1/1;
  }

  
  #middle
  {
    aspect-ratio: 1/1;
  }

  #middle2
  {
    aspect-ratio: 1/1;
  }


}


@media (max-width : 11in) and (min-width: 9.1in)
{
  #left
  {
   aspect-ratio: 1/2;
  }

  #left2
  {
   aspect-ratio: 1/2;
  }

  #right
  {
   aspect-ratio: 1/2;
  }

  #right2
  {
   aspect-ratio: 1/2;
  }

  
  #middle
  {
    aspect-ratio: 1/1;
  }

  #middle2
  {
    aspect-ratio: 1/1;
  }


}

@media (max-width : 9in) and (min-width: 8.1in)
{
  #left
  {
   aspect-ratio: 1/2.5;
  }

  #left2
  {
   aspect-ratio: 1/2.5;
  }

  #right
  {
   aspect-ratio: 1/2.5;
  }

  #right2
  {
   aspect-ratio: 1/2.5;
  }

  
  #middle
  {
    aspect-ratio: 1/1;
  }

  #middle2
  {
    aspect-ratio: 1/1;
  }


}


@media (max-width : 8in) and (min-width: 7.1in)
{
  #left
  {
   aspect-ratio: 1/3;
  }

  #left2
  {
   aspect-ratio: 1/3;
  }

  #right
  {
   aspect-ratio: 1/3;
  }

  #right2
  {
   aspect-ratio: 1/3;
  }

  
  #middle
  {
    aspect-ratio: 1/1;
  }

  #middle2
  {
    aspect-ratio: 1/1;
  }


}


@media (max-width : 7in)  and (min-width: 0in)
{
  #left
  {
   width: 100%;
   aspect-ratio: none;
  }

  #left2
  {
   width: 100%;
   aspect-ratio: none;
    
  }

  #right
  {
   width: 100%;
   aspect-ratio: none;
    
  }

  #right2
  {
   width: 100%;
   aspect-ratio: none;
   
  }

  
  #middle
  {
    width: 100%;
    aspect-ratio: 1/1;
  }


  #middle2
  {
    width: 100%;
    aspect-ratio: 1/1;
  }


}




/* 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%;
   }
} */