/* CASCADING STYLE SHEET of -> JAI.IND.IN Website -> Below CSS code is owned by Jai Ganesh & Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
==========================================================================================================================================================================*/ 
/*JAI.IND.IN CSS =>> Jai Ganesh Code for =>> "GLOBAL FONT FACE" Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved. */
@font-face { font-family: segoe; src: url('../fonts/segoe-ui-variable.ttf'); }
/*=============================================================================================================================================
JAI.IND.IN CSS =>> Jai Ganesh Code for "HEADING STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
h3, h2, p, div, li, h4, h5, h6, h7, h8 {
text-shadow: 0px 2px 3px #000000;
margin: 0px;
padding: 0px 20px 0px 20px;
font-family:   segoe; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
h1 {
color: #000000;
text-align: center;
margin: -5px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-size:20px;
font-family:  segoe; 
letter-spacing: 3px;
text-shadow:0px 0px 5px  #ebebeb; } 
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
h2 {
color: #757575;
font-size:14px;
margin:0px 0px 0px 0px ;
padding-left: 40px;
padding-right: 20px;
text-shadow:0px 2px 3px  #000000; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
h2{
font-family:  segoe; }
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "GLOBAL IMAGE STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
img {
border: 1PX;
border-radius: 1px ;
border-color: #00000056;
border-style: solid;
box-shadow:  0px 0px 5px 0PX #00000065 ; }

.tagline {color: #000000;
font-size:13px;
margin:-7px 0px 0px 0px ;
padding-bottom: 2px;
padding-left: 20px;
padding-right: 20px;
text-shadow:0px 2px 3px  #a0a0a0; 
letter-spacing: 2px;}

/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "GLOBAL IMAGE BOX STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
.imgbox1 {
background-color: #2c2c2cc0;
padding: 30px 20px 20px 20px;
margin:0px 0px 15px 0px;
border-color: #353535;
border-style: solid;
border-width: 1px;
border-radius: 30px 30px 30px 30px;
box-shadow:  0px 0px 30px 15PX #000000 inset;}
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "GLOBAL SITE PARA STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
.my-p {
  justify-content: center;
  justify-items: center;
  text-align: center;
font-size: 11px;
padding: 5px 0px 0px 0px;
margin:-3px 0px 0px 0px ;
color:#000000;
text-shadow:0px 2px 3px #636363;
font-family:   'Exo', sans-serif; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
.my-p1 {
font-size: 11px;
padding: 0px 20px 1px 0px;
margin:4px 0px 0px 0px ;
color:#757575;
text-shadow:0px 2px 3px #000000;
font-family:  'Exo', sans-serif; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
.my-p2 {
font-size: 11px;
padding: 0px 0px 0px 0px;
margin:0px 0px 0px 0px ;
color:#757575;
text-shadow:0px 2px 3px #000000;
font-family: 'Exo', sans-serif; }

/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
p {
margin-left: 0px;
font-size:13px;
font-family:  segoe;}
/* Site Font-Family Style*/
li,h1,p,h3,h4,h5,h6,h7,h8 {
font-family:  segoe; }
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "SITE FOOTER STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
footer {
background:linear-gradient(to Bottom,#929292 10% ,#ffffff  40%, #6e6e6e 70% ); /* Gradient colors */
background-color: #313131;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
box-shadow: 0px 0px 30px 15px #000000 inset;
border-radius: 0px 0px 50px 50px;
border-top: rgb(15, 15, 15) 1px;
border-bottom: rgb(15, 15, 15) 1px;
border-right: rgb(15, 15, 15) 1px;
border-left: rgb(15, 15, 15) 1px;
border-style: solid;

text-shadow: 0px 2px 3px #000000; 
}
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "SITE HEADER STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
header {
background: linear-gradient(to Bottom,#929292 10% ,#ffffff  40%, #6e6e6e 70% ); /* Gradient colors */
margin: -5px 0px 1px 0px;
padding: 0px 0px 0px 0px;
box-shadow: 0px 0px 30px 15px #000000 inset;
border-radius: 50px 50px 0px 0px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color:rgb(15, 15, 15); }
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "SITE DIV CONTAINERS". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* div-1 created for main container*/
.div-1 {
padding: 0px 0px 0px 0px;
margin: -10px 0px 0px 0px;
border-radius: 50px 50px 50px 50px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #000000;
background-color: #42424257;
box-shadow:  0px 0px 30px 10px #000000 inset; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* div-2 created for inner content area*/
.div-2 {
border-width: 1px 1px 1px 1px;
border-color: #464646;
border-style: solid;
border-radius:20px 20px 20px 20px;
background-color: #161616;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin: -5px 25px 3px 25px;
box-shadow:  0px 0px 50px 10px #000000 inset; }
.div-2:hover
  {animation: 60s  ease-in-out ;
border-color: #555555;
border-width: 1px;
animation-duration:6000ms;
}
/* Keys fortools-border glow */


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* div-3 created for Site outer glow effect*/
.div-3 {
border-radius: 90px 90px 90px 90px;
border-width:1px ;
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
box-shadow: 0 0 20px  #00000085;
border-color: #cececed2;
 }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
.div-3:hover {
 
animation: pulseShadow 0s infinite alternate   ease-in-out;
transition: ease-in-out 0s;}
/* Keys for div-3 glow */
@keyframes pulseShadow {
0% {box-shadow: 0 0 10px  rgb(0, 0, 0);} 
50% {box-shadow: 0 0 200px rgb(0, 0, 0);}
100% {box-shadow: 0 0 10px rgb(0, 0, 0);} 

}
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "SITE CLASS". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* Center Class Applied to some inner contents */
.center {
display: block;
padding-top: 0px;
margin:0px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
width: auto; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Center Class 1 Not Applied*/
.center-1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 1500; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Box Class Not Applied */
.box {
display: flex;
align-items: center;
justify-content: center;
gap: 0px; }
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "TOOLS PANEL IN HEADER & FOOTER". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* Tools-border is for top Header on first stage */
.tools-border3 {
display: flex;
flex-direction:column  ;
justify-content: center;
gap: 0px;
text-align: center;

padding: 10px 0px 20px 0px;
margin: -80px 500px 5px 500px;
background:linear-gradient(to bottom,#ffffff2c 30% ,#ffffff3b 80%, #ffffff36 10% ); /* Gradient colors */
border-color:#000000;
border-style: solid;
border-width: 0px 0px 1px 0px;
box-shadow:  0px 0px  40px 15px  #000000 inset ;
border-radius: 0px 0px 100px 100px; }

.tools-border {
display: flex;
justify-content: center;
gap: 0px;
text-align: center;
padding: 5px 0px 0px 0px;
margin: auto;
min-width: 300px;
max-width: 300px;
background-color:#9c9c9c1e;
border-color:#00000086;
border-style: solid;
border-width: 1px 1px 0px 1px;
box-shadow:  0px 0px 10px  #000000ad  ;
border-radius: 100px 100px 0px 0px; }


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* Tools-border2 is for  bottom footer on first stage */
.tools-border2 {
display: flex;
justify-content: center;
gap: 0px;
min-width: 300px;
max-width: 300px;
text-align: center;
padding: 3px 0px 5px 0px;
margin: auto;
background-color: #9c9c9c1e;
border-color:#00000086;
border-style: solid;
border-width: 0px 1px 1px 1px;
box-shadow:  0px 0px 10px #000000ad   ;
border-radius: 0px 0px 100px 100px; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* .flex-container-1 is for top Header on Second stage */
.flex-container-1 { 
display: flex;
justify-content: center;
gap: 5px;
text-align: center;
padding: 3px 20px 2px 20px;
margin: 0px 500px 7px 500px;
background-color: #424242;
border-color:#5a5a5a;
border-style: solid;
border-width: 1px 1px 1px ; 
border-radius: 20px 20px 5px 5px;
box-shadow:  0px 0px 10px  #000000 inset; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* .flex-container-2 is for bottom footer on Second stage */
.flex-container-2 { 
display: flex;
justify-content: center;
gap: 5px;
text-align: center;
padding: 3px 20px 2px 20px;
margin: 3px 500px 0px 500px;
background-color: #424242;
border-color:#5a5a5a;
border-style: solid;
border-width: 1px 1px 1px;
border-radius: 5px 5px 20px 20px;
box-shadow:  0px 0px 10px  #000000 inset; }
/*----------------------------------------------------------------------------------------------------------------------------------------------*/ 
 
/* General flex-container is used for Top and Bottom Zoom tools  */
.flex-container { 
display: flex;
justify-content: center;
gap: 5px;
text-align: center;
padding: 2px 0px 2px 0px;
margin: 0px 0px 0px 0px; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* flex-container-row is used for Top and Bottom Zoom tools for images */
.flex-container-row { 
display: flex;
justify-content: center;
gap: 5px;
text-align: center;
padding: 3px 6px 3px 6px;
margin: 0px 0px 0px 0px; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* flex-container-column is used for Bottom Fire*/
.flex-container-column { 
display: flex;
justify-content: center;
gap: 5px;
text-align: center;
padding: 0px 0px 0px 0px;
margin: 80px 700px 0px 700px;

animation:  pulseShadow9 1s  infinite alternate   ease-in-out ; 
background:rgba(172, 172, 172, 0);
box-shadow: 0px 90px 80px 10px rgba(25, 255, 224, 0.788);

 }
@keyframes pulseShadow9 {
0% {box-shadow: 0 0 30px  rgb(62, 97, 255);} 
50% {box-shadow: 0 0 3000px  rgba(184, 130, 255, 0.589);}
100% {box-shadow: 0 0 200px  rgba(62, 97, 255, 0.589);} }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* grid-container is for putting elements on same line- used for site h2 title and for modified date */
.grid-container {
display: grid;
grid-template-columns: auto auto;
margin:  -3px 0px 0px 0px;
padding: 0px 0px 4px 0px;; }
.grid-container1 {
display: grid;
grid-template-columns: 3, 1fr; }
.grid-container2 {
display: grid;
grid-template-rows:  repeat(3, 1fr);; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* For Navigation - not used for now*/
nav {
display: flex;
justify-content: center;
background-color: none;
margin:0px 0; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* For Navigation url - not used for now*/
nav ul {
display: flex;
gap: 10px; }
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "SITE BODY STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/
body {
background: radial-gradient(circle, #777777 10px, #161616 60%);
max-width: 1200px; 
min-height: 100vh;
padding-top: -5px;
padding-right: 450px;
padding-bottom: 5px;
padding-left: 450px;
margin: 0px 0px 0px 0px;
font-family: segoe;
background-size: contain; /* Make sure it covers the screen */
background-repeat:  repeat-y; /* Repeat horizontally */ 
background-position: center;
animation:  scrollBackground 10s  linear infinite alternate  ; /* Animation settings */
 }

/* Keyframes for background movement */
    @keyframes scrollBackground {
      
        from 0%{
            background-position: 0 0;
        }
        to {
            background-position: 0px 1920px; /* Move left by image width */
            
        }
        
    }
   body:hover{animation:scrollBackground 10s linear infinite alternate ;  /* Faster scroll */
  }
@keyframes scrollBackground2 {
      
        from 0%{
            background-position: 0 0;
        }
        to {
            background-position: 0px 1920px; /* Move left by image width */
            
        }}
        /*
Source - https://stackoverflow.com/a/77673621
Posted by Usitha Indeewara, modified by community. See post 'Timeline' for change history
Retrieved 2026-04-13, License - CC BY-SA 4.0
*/


/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* .header-container Style Seems not used*/
.header-container {
background-color: lightgrey;
padding: 0px; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "SITE lINK STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Site ul Style*/
ul {
list-style-type: none;
margin: 0;
padding: 0;}
/* .header-container Style Seems not used*/
.header-container nav li {
display: inline;}
/* Site Link Style*/
a {
font-size:12px;
font-family:   segoe; 
color:rgb(231, 231, 231); }
/* Site Footer Link Style*/
footer a {
font-family: segoe; 
color:#525252;
text-decoration: none; }
/*=============================================================================================================================================
JAI.IND.IN CSS. Jai Ganesh Code for "GLOBAL BUTTON STYLE". Protected by Copyright © Jai Ganesh|JAI.IND.IN. All Rights Reserved.
-----------------------------------------------------------------------------------------------------------------------------------------------*/
/* Site Global Button Style*/
button{
box-shadow:  0px 0px 5px #000000 inset ;
text-shadow: 0px 0px 0px rgb(145, 145, 145);
font-family:  segoe;
font-size: 13px;
border-radius: 5px;
background-color: #3d3d3d;
margin-top: 0px;
padding-top: 2px ;
padding-bottom: 3px;}
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* Site Top and Bottom Window Button Style */
.btn1{
box-shadow:  0px 0px 5px 1px #0f1a13 inset;
text-shadow: 0px 0px 0px rgb(145, 145, 145);
font-family:  segoe;
font-size: 12px;
border-radius: 50px;
border-color: #000000;
background-color: #ffffff62;
margin: 0px 0px 0px 0px;
border-style: solid;
padding:2px 3px 0px 3px;
border-width: 1px;
transition: ease-in-out 0.3s;
animation: pulseShadow3 3s infinite ease-in-out;
gap: 10px; }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
@keyframes pulseShadow3 {
0% { background-color:   rgba(168, 168, 168, 0.664)  ;
  }
50% {
  background-color: rgba(199, 199, 199, 0.836) ;
  }
100% {
  background-color:  rgba(168, 168, 168, 0.664);
  } }
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* Site Top and Bottom Window Button Hover Style */
.btn1:hover {
background-color: #bbbbbb;
box-shadow: 0px 0px 50px 10px rgb(255, 255, 255) ;
border-color: rgb(255, 255, 255);}
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
@keyframes pulseShadow2 {
0% {box-shadow: 0 0 2px rgb(255, 255, 255) ;}
50% {box-shadow: 0 0 10px rgb(251, 255, 0) ;}
100% {box-shadow: 0 0 2px rgb(251, 255, 0) ;}}
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
/* Site Top and Bottom Tools Area Button Style */
.btn2{
box-shadow:  0px 0px 4px 2PX #000000a9 inset ;
text-shadow: 0px 0px 0px rgb(145, 145, 145);
font-family:  segoe;
font-size: 13px;
border-radius: 50px ;
border-color: #000000;
border-style: solid;
border-width: 1px;
background-color: #ffffff;
margin-top: 0px;
padding-top: 0px ;
padding-bottom: 0px;
padding-left: 4px;
padding-right: 4px;
transition: ease-in-out 0.3s;
animation: pulseShadow4 2s infinite ease-in-out;}
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
@keyframes pulseShadow4 {
0% { background-color:  rgba(168, 168, 168, 0.664) ;
  }
50% {
  background-color: rgba(199, 199, 199, 0.836) ;
  }
100% {
  background-color:  rgba(168, 168, 168, 0.664);}}
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 
  /* Site Top and Bottom Tools Area Button Hover Style */
.btn2:hover {
background-color: #ffffff;
box-shadow: 0px 0px 50px 10px rgb(255, 255, 255) ;
border-color: rgb(255, 255, 255);
border-width: 1px;}
/*-----------------------------------------------------------------------------------------------------------------------------------------------*/ 




   
.container3 {
position: absolute;
display: grid;
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
position:absolute;
animation-duration:1000ms;
animation-delay:0ms;
animation-iteration-count: infinite;
animation-direction: alternate;
 }

.white {
position: absolute;
top: 25px; /* Center vertically */
left: 0;
animation: moveX 5s  ease-in-out infinite alternate; 
border-radius: 10px 10px 10px 10px;
border-color: #000000;
width: 5px;
height: 1px;
background:rgba(173, 173, 173, 0.295);
box-shadow: 0px 0px 30px 5px rgba(190, 190, 190, 0.514);
border-width: 0px;
border-style: solid;
transform:rotate(180deg) ;
}


@keyframes moveX {
    from {
      transform: translateX(900px);
    }
    to {
      transform: translateX(80px); /* Move 200px to the right */
    }
  }

.white2 {
position: absolute;
top: 0px; 
left: 900px;
right: 5px;
animation:  pulseShadow6 0.20s infinite   ; 
border-radius: 0px 100px 100px 0px;
border-color: #fffb00;
width: 10px;
height: 10px ;
background:white;
box-shadow: 90px 0px 50px 40px rgba(255, 208, 0, 0.788);
border-width: 1px;
border-style: solid;
padding: 20px 5px 5px 5px;
margin: 750px 0px 0px 0px;
transform: rotate(90deg);
}
.white3 {
position: absolute;
top: 10px; /* Center vertically */
left: 1000px;
right: 5px;
animation:  pulseShadow7 0.20s infinite   ; 
border-radius: 0px 100px 100px 0px;
border-color: #fffb00;
 width: 10px;     
 height: 10px;
 padding: 20px 5px 5px 5px;
margin: 750px 0px 0px 0px;
background:white;
box-shadow: 90px 0px 50px 40px rgba(255, 208, 0, 0.788);
border-width: 1px;
border-style: solid;
transform: scale(1.5);

transform: rotate(90deg);
}
@keyframes pulseShadow7 {
50% {box-shadow: 0 0 20px  rgba(241, 255, 118, 0.589);}
50% {box-shadow: 0 0 30px  rgb(36, 76, 255);} }

.gallery{ display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 5vw);
    grid-gap: 5px;
  margin-top: 2px; /* top margin */
    padding: 15px;}

.image-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
        
        gap: px; /* Space between images */
        margin-top: 0px;
        margin-bottom: 0px;
      
       /* top margin */
    padding-top: 0px;
    padding-left: 0px;
      padding-bottom: 0px;

    }
    figure {
border: 0px solid #ccc;
padding: 1px;
margin: auto;
max-width: 300px;
}
figcaption {
background-color: rgba(255, 255, 255, 0);
color: rgb(136, 136, 136);
font-style: regular;
font-size: 13px;
padding: 1px;
text-align: center;
}