 

  .template2 h6{
    color:      #DC143C;
}
.outer-box {
      padding: 20px;
      background-color: #444;
      border-radius:12px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      margin: 20px auto;
      max-width: 90%; /* Ensures proper centering */
    }

    .inner-box {
      padding: 20px;
      background-color: #fff;
      border-radius: 12px;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
    }

    .gallery-item {
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .gallery-item img {
      width: 100%;
      height: auto;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .gallery-item img:hover {
      transform: scale(1.1);
    }

    @media (min-width: 768px) {
      .outer-box {
        max-width: 70%;
      }
    }

    @media (min-width: 1200px) {
      .outer-box {
        max-width: 60%;
      }
    }
     
     @media (max-width: 768px){
      h2{
            font-size: 10px;}
        }

 
@media (max-width: 768px){
.button-wrap{
    font-size: 12px!important;}}
    
       
.p-4 a {
  text-decoration: none;
}
.book a{
  color:    #8B0000;  
  background-color: transparent;
  text-decoration: none;
}
.spelling-error {
  text-decoration-line: underline;
  text-decoration-style: wavy;
 text-decoration: underline wavy red 3px;
}


@media (max-width: 768px){    
.spelling-error {
   
   text-decoration: underline wavy red 1.5px;
}}
 .mybg-music {
    background: url('img/temple2.jpg')no-repeat;
   
   height: 300px;
#04AA6D;
    background-size: cover;
}
 .mybg-music a{
    text-decoration: none;
 }

* {
  box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
* {
  box-sizing: border-box;
}

.row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.column {
  flex: 50%;
  padding: 10px;
  height: 300px;
  margin-top:40px;  
}
 
.box{
  height: 100px;
  width: 100%;
  background:  #008B8B;
  color: #fff;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
#map{
      width: 100%;
      height: 250px;
      border: 2px solid #333;
    }   
.foot h5 li{
  color: black;
}
.foot{

  color: black;
}
.foot a{
  color: black;
}

.social-fb{
  color: black;
}
body {
    font-family: Arial, Helvetica, sans-serif;
     
    overflow-x: hidden;
 background-image: url('img/back3.jpg');
  background-repeat: no-repeat;
   
  background-size: cover;
}
.head h2{
    margin-top:0px!important;
}
p.ex1{
  font-size: 18px;
  
 font-family: Arial, Helvetica, sans-serif;
  color: black;
}
.navbar .navbar-nav li a{
  color:#800000!important;
  font-size: 20px;
  text-shadow: 2px 2px 3px #0006;
  transition: 0.2s;
 } 
 .navbar{
    background-image: url('img/b5.jpg');
}
.navbar{
    background-color:#CD853F!important;
}

.navbar-nav a{
  color:  #0000CD!important;
  font-size: 18px;
  text-shadow: 1px 1px 2px #0006;
  transition: 0.2s;
}
.navbar-nav li{
  color:  #0000CD!important;
  font-size: 15px;
  text-shadow: 1px 1px 2px #0006;
  transition: 0.2s;
}

.modal p{
  font-size: 20px;
   font-family: Arial, Helvetica, sans-serif;
  color: black;
}
.modal-body{
  background-color:#FFF8DC;
}
.popup1 a{
  color: black;
  font-size: 15;
}
.button-wrap{
    padding: 14px 46px;
    color:  #FFFAFA;
    background-color: black;
    border: 1px solid transparent;
    box-shadow: 0 3px 3px 0 rgba(1,1,1,.55);
    -webkit-transition: .5s cubic-bezier(.22,.61,.36,1);
    -moz-transition: .5s cubic-bezier(.22,.61,.36,1);
    transition: .5s cubic-bezier(.22,.61,.36,1);
    position: relative;
    display: inline-block;
    margin: 100px auto;
    text-transform: uppercase;
    font-size: 15px;
}

.button-wrap:hover {
    -webkit-filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
    filter: drop-shadow(3px 3px 20px rgba(255, 14, 31, .7));
    color:  #FFFAFA;
    text-decoration: none;
}

.button-wrap:before{
    content:"";
    position: absolute;
    top: -1px;
    left: -15px;
    width: 0;
    height: 0;
    border-top: 54px solid #ff0e1f;
    border-left: 15px solid transparent;
    -webkit-transition: border-color .2s ease-in-out;
    -moz-transition: border-color .2s ease-in-out;
    transition: border-color .2s ease-in-out;
}

.button-wrap:after{
    content:"";
    position: absolute;
    top: -1px;
    right: -15px;
    width: 0;
    height: 0;
    border-top: 54px solid #ff0e1f;
    border-right: 15px solid transparent;
    -webkit-transition: border-color .2s ease-in-out;
    -moz-transition: border-color .2s ease-in-out;
    transition: border-color .2s ease-in-out;
} 
 
 .wrapper {
    height:95vh;
    -webkit-animation: slide 60s linear infinite;
    background:url(img/ohm3.jpg) repeat;
    background-position:120% 100%;
    background-size:cover;
    animation:animatebg 60s linear infinite;
}
.pulse {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:url(img/2nd.png);
    background-size:cover;
    animation:animateEarth 12s linear infinite;
    width:200px;
    height:200px;
    border-radius:50%;
    box-shadow:inset 0 0 40px rgba(255,255,255,.5);
}
@media (max-width: 768px){
  .wrapper {
    height:80vh;}}
    @media (max-width: 768px){
      .pulse {
   
    top:60%;
    left:50%;}}


.pulse span {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    display:block;
    width:100%;
    height:100%;
    border-radius:50%;
    background:transpatent;
    border:2px solid #fff;
    box-sizing:border-box;
    animation:animate 6s linear infinite;
}

.pulse span:nth-child(1) {
    animation-delay:0s;
}
.pulse span:nth-child(2) {
    animation-delay:-4s;
}
.pulse span:nth-child(3) {
    animation-delay:4s;
}
@keyframes animate {
    0% {
        width:200px;
        height:200px;
        opacity:1;
    }
    50% {
        opacity:1;
    }
    100% {
        width:500px;
        height:500px;
        opacity:0;
    }
   
}


@keyframes animateEarth {
    0% {
        background-position:0 0;
    }
    100% {
        background-position:719px 0;
    }
}

@keyframes animatebg {
    0% {
        background-position:0 0;
    }
    100% {
        background-position:719px 0;
    }
}

        .item{
            left: 0;
            top: 0;
            position: relative;
            overflow: hidden;
            margin-top:50px;
            
        }
        .item img{
            -webkit-transition: 0.6s ease;
            transition: 0.6s ease;
            
        }
        .item img:hover{
            -webkit-transform: scale(1.2);
            transform: scale(1.2);

        }
        .img-thumbnail{
            border:0px;
            border-radius:0px;
        }
            .sq-crousal4 .carousel-indicators li::before {width: 15px;height: 15px;background: #444;border-radius: 50%; border: solid 2px #AAACAE;
    transition: all 0.3s ease 0s;box-shadow: 6px 6px 8px #E9E0E0 inset;}
    .sq-crousal4 .carousel-indicators li.active::before {background: #1870ed;box-shadow: 2px 3px 2px #e5edf8 inset;border-color: #1870ed;}
    .sq-crousal4 .carousel-indicators {bottom: -40px;}
    .sq-crousal4 li {width: 20px;}
    .sq-crousal4 .fa-angle-left {font-size: 45px;color: #444;left: -30px;position: relative;top: -17px;}
    .sq-crousal4 .fa-angle-right {font-size: 45px;color: #444;right: -30px;position: relative;top: -17px;}
@media (max-width: 768px){
    .modal-content{
        width: 295px;
        height: 20px;}

    }
@media (max-width: 768px){
    .modal-body p{
        font-size: 15px;}
    }

@media (max-width: 768px){
.modal-footer button{
}
@media (max-width: 768px){
    .head h2{
        font-size: 20px;}
    }
    @media (max-width: 768px){
    .head h3{
        font-size: 18px;}
    }
@media (max-width: 768px){
.template img{
    width: 100%;
height: 150px;}
}
 

@media (max-width: 768px){
    .template p  {
        font-size:18px;}
    }

@media (max-width: 768px){
    .p-4{
        width: 100%;}
    }
@media (max-width: 768px){
    .template1 h2{
        font-size: 19px;}
    }

@media (max-width: 768px){
    .feedback-text h4{
        font-size: 16px;}
    }

    @media (max-width: 768px){
    .template2 h2{
        font-size: 20px;}
    }
    @media (max-width: 768px){
    .template2 img{
        height: 250px;}
    }

    @media (max-width: 768px){
    .template3 img{
        height: 90px;}
    }

 @media (max-width: 768px){
    .navbar .navbar-nav li a{
   
  font-size: 17px;
   
 } }
  @media (max-width: 768px){
  
.navbar-nav a{
   
  font-size: 15px;
   }
}
 @media (max-width: 768px){
.navbar-nav li{
   
  font-size: 13px;
   }
}
.template2 h6{
    color: #DC143C;
}

#blink {
                font-size: 17.5px;
                font-weight: bold;
                 
                transition: 0.1s;
            }
#blink a{
             
  text-decoration: none;
}
 .outer-box {
      padding: 20px;
      background-color: #444;
      border-radius:16px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
      margin: 20px auto;
      max-width: 90%; /* Ensures proper centering */
    }

    .inner-box {
      padding: 20px;
      background-color: #fff;
      border-radius:4px;
    }

    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 15px;
    }

    .gallery-item {
      overflow: hidden;
      border-radius: 8px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .gallery-item img {
      width: 100%;
      height: auto;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .gallery-item img:hover {
      transform: scale(1.1);
    }

    @media (min-width: 768px) {
      .outer-box {
        max-width: 70%;
      }
    }

    @media (min-width: 1200px) {
      .outer-box {
        max-width: 60%;
      }
    }