/*                  3D ROTATING IMAGE*/
.buttondiv{
      position:absolute;
      display:flex;
      width: 0px;
      height: 100px;
      margin-top:800px;
      margin-bottom:;
      margin-left:700px;
     z-index:1;
     background:black; 
     color:#ffffff;
 }
 @media (max-width: 768px) {
 .buttondiv{
      position:absolute;
      display:flex;
      width: 0px;
      height: 100px;
      margin-top:800px;
      margin-bottom:;
      margin-left:100px;
     z-index:1;
     background:black; 
     color:#ffffff;
 }
 
 
 }
.rotateimage{
      position:relative;
      width: 100%;
      height: 1000px;
      margin-top:200px;
      margin-bottom:300px;
      margin:;
     
      
      display:flex;
      
      background:#012169;
   z-index:-9;

}
 @media (max-width: 768px) {
.rotateimage{
 position:;
      width: 100%;
      height: 1000px;
      margin-top:200px;
      margin-bottom:300px;
      margin:200px auto 0px;
     
      
      display:flex;
      
      background:;
   z-index:-9;
 }
 
 }


/* 3D Scene Wrapper */
    .gallery-container {
      position: relative;
      width: 200px;
      height: 200px;
      margin-top:200px;
      margin-bottom:;
      padding-top:;
      margin-left: 600px ;
      align-items:center;
      display:flex;
      perspective: 500px; /* Controls depth of the 3D element */
     z-index:-1;
    }
@media (max-width: 768px) {
     .gallery-container {
      position: relative;
      width: 200px;
      height: 200px;
      margin-top:200px;
      margin-bottom:;
      padding-top:;
      margin-left:20px  ;
      align-items:center;
      display:flex;
      perspective: 400px; /* Controls depth of the 3D element */
}


}
.gallery-container1 {
      position: relative;
      width: 200px;
      height:150px ;
      margin-top:200px;
      margin-bottom:300px;
      padding-top:100px;
      margin:50px 480px 300px;
      align-items:center;
      display:flex;
      perspective: 1500px; /* Controls depth of the 3D element */
     z-index:-9;
    }
    /* Rotating Carousel Box */
    .carousel {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d; /* Allows nested elements to use 3D space */
      animation: rotateimage 20s linear infinite;
    }

    /* Pause animation on hover */
    .carousel:hover {
      animation-play-state: paused;
    }

    /* Individual Image Cards */
    .card {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.5);
      /* Formula: rotateY( index * (360deg / total_images) ) translateZ( radius ) */
      transform: rotateY(calc(var(--i) * 45deg)) translateZ(300px);
    }

    .card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    /* Zoom effect on card hover */
    .card:hover img {
      transform: scale(1.1);
    }

    /* Continuous 360-degree rotation animation */
    @keyframes rotateimage {
      from {
        transform: rotateX(-10deg) rotateY(0deg); /* Slightly tilted down for a better 3D look */
      }
      to {
        transform: rotateX(-10deg) rotateY(360deg);
      }
    }
/*  --------------------------------------GALLERY IMAGES---------------------------------------------------------------------------------------*/
 
 @media (min-width: 999px) {
 

 /* Wrapper for the whole layout */
.gallery-wrapper { 
 display: grid;
  grid-template-columns: ;
  grid-gap: 20px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  align-content: start;
  max-width: 1000px;
  margin: 0 auto 100px;
  transition: all 150ms linear;
}  

	 /* Thumbnail container */
.thumbnails { 
	  display: ; 
	  gap: 10px; 
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	  background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
 }
.thumbnails img { 
 width: 200px; 
  height:200px;
  cursor: pointer; 
  padding-bottom: ;
  margin: 5px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  border: 2px solid transparent;
}

  .thumbnails img:hover { 
	  border-color: #007bff;
 }
  
  /* Main container holding the larger image and text box */
.main-container {
  display: ;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  transition: all 150ms linear;
 border: 1px solid #082325;
 box-shadow: 0 4px 30px rgba(0, 255, 135, 0.51);
 padding: 15px; 
 width: 100%; 
 max-width: 850px;
}

  .main-container img { 
	  width: 100%;
	   height: auto; 
	   display: block;
	    margin-bottom: 15px; 
	    }
  .text-box {
	   font-size: 25px; 
	   color: #ffffff; 
	  width:;
	  height:;
	   position:;
	   display:;
	   z-index:;
	  
	  background: rgba(7, 87, 119, 0.97);
border-radius: 2px;
box-shadow: 0 4px 30px rgba(9, 116, 158, 0.99);
backdrop-filter: blur(7.9px);
-webkit-backdrop-filter: blur(7.9px);
border: 1px solid rgba(77, 26, 157, 0.67);
	  
	   }
	   
	  
	  
	   }

 /*WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW*/

@media (max-width: 768px) {
.gallery-wrapper { 
 display: ;
 grid-gap: 20px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  align-content: start;
  max-width: 1000px;
  margin-left: 10px;
  margin-bottom: 100px;
  transition: all 150ms linear;
 }
 
	 /* Thumbnail container */
.thumbnails { 
	  display: ; 
	  gap: 10px; 
	  grid-template-columns: 1fr 1fr 1fr 1fr;
	  background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;
 }
.thumbnails img { 
 width: 75px; 
  height:75px;
  cursor: pointer; 
  padding-bottom: ;
  margin: 5px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  border: 2px solid transparent;
  }
  .thumbnails img:hover { 
	  border-color: #007bff;
 }
  
/* Main container holding the larger image and text box */
.main-container {
  display: ;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  transition: all 150ms linear;
 border: 1px solid #ccc;
 padding: 15px; 
 width: 100%; 
 max-width: 850px;
}
 .main-container img { 
	  width: 100%;
	   height: auto; 
	   display: block;
	    margin-bottom: 15px; 
	    }

 .text-box {
	   font-size: 16px; 
	   color: #333; 
	  
	   position:;
	   display:;
	   z-index:;
	   
	   }


}
































/*
.gallerydiv{
position: absolute;
      width: 200px;
      height: 20px;
      margin-top:0px;
      margin-bottom:;
      padding-top:;
      background:red;
      z-index:9;
      display:inline-block;

}
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-row-end: 3;
  align-content: start;
  max-width: 1000px;
  margin: 0 auto;
  transition: all 150ms linear;
}

.gallery input[type="radio"] {
  display: none;
}

.gallery label {
  position: relative;
  display: block;
  padding-bottom: 60%;
  margin: 5px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

.gallery label:before {
  border: 1px solid #e3e3e3;
  content: '';
  position: absolute;
  left: -5px;
  right: -5px;
  bottom: -5px;
  top: -5px;
}

.gallery img {
  display: none;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
  width: 100%;
  transition: all 150ms linear;
}

.gallery input[name="select"]:checked + label + img {
  display: block;
}

.gallery input[name="select"]:checked + label:before {
  border: 1px solid #000;
}
 
*/