@charset "utf-8";
/* CSS Document */
 /* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */


 
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url(../img/Preloader_2.gif) center no-repeat #fff;
}


 .accordion_info {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border:rgba(109,129,142,1.00) 1px solid;
  border-radius:3px;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
}

.accordion_active_info, .accordion_info:hover {
  background-color: #ccc;
}

.accordion_info:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.accordion_active_info:after {
  content: "\2212";
}

.accordion_panel {
  padding:18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
    
.active{
	background-color:#D3D8DF !important;
	color:#0D2039 !important;
	border-radius:5px;
 	border:rgba(235,7,10,1.00)  solid 2px;
	}
 
.containerx {
  position: relative;
  width: 100%;
}
.containerx:hover {
  opacity: 0.5;
}

.containerx:hover .middlex {
  opacity: 1;
}
 .img-entrance{
  opacity: 2;
  transition: .5s ease-in;
  transition-delay:.1s;
  }
 
.middlex {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.textx {
  background-color:rgba(0,0,0,0.54);
  color: white ;
  font-size: 30px;
  padding: 16px;
  border-radius:10%;
}



.playingx {
  background: url(img/audiospec.gif) center no-repeat;
  padding:10px 0;
  width:100%;
  height:0;
  display:block;
  position:relative;
 }
 

 
 .fa{padding:5px; color:#ffffff;}

.fa:hover {
    opacity: 0.7;
  
}

.fa-facebook {
  background: #3B5998;
 
 }

.fa-twitter {
  background: #55ACEE;
 }

.fa-google {
  background: #dd4b39;
 }

.fa-linkedin {
  background: #007bb5;
 }

.fa-youtube {
  background: #bb0000;
 }

.fa-instagram {
  background:#790044;
 }

.fa-pinterest {
  background: #cb2027;
 }
  

.fa-tumblr {
  background: #2c4762;
 }
  
 
.fa-stumbleupon {
  background: #eb4924;
 }
   

.fa-reddit {
  background: #ff5700;
 }

 .fa-envelope {
  background: #ff5700;
 }
 
 .fa-whatsapp {
  background:#40D55F;
 }
 
.fa-print{
  background: #ff5700;
   }
 

 
 .shortdiv{
  padding: 5px 0;
  display: inline-block;
  position:relative;
}

 .shortdiv:before{
  content:"";
  width:100%;
  height:3px;
  left:0;
  top:0;
  position:absolute;
  z-index:9;
  background:linear-gradient(to right, #6086A8 70%, #E51013 30%);
}
.shortdiv:after{
  content:"";
  width:100%;
  height:3px;
  left:0;
  bottom:0;
  position:absolute;
  z-index:9;
  background:linear-gradient(to right, #121A3B 100%, white 0%);
}


.bouncing-arrow {
  position: relative; /* Or absolute/fixed depending on placement */
  width: 0;
  height: 0;
  margin: 20px auto; /* Adjust as needed for centering/positioning */
}

.bouncing-arrow span {
  display: block;
  width: 20px; /* Adjust arrow size */
  height: 20px; /* Adjust arrow size */
  border-bottom: 3px solid #333; /* Arrow color and thickness */
  border-right: 3px solid #333; /* Arrow color and thickness */
  transform: rotate(45deg); /* Rotate to form the arrow point */
  position: absolute;
  top: 0;
  left: 0;
}


@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0) rotate(45deg); /* Start and end at original position */
    border-color: #6a06e5; /* Start color */

  }
  40% {
    transform: translateY(10px) rotate(45deg); /* Move down */
    border-color: #ffffff; /* Middle color */

  }
  60% {
    transform: translateY(5px) rotate(45deg); /* Bounce slightly back up */
    border-color: #d400ff; /* Middle color */

  }
}

.bouncing-arrow span {
  /* ... existing styles ... */
    animation: bounce 1.5s infinite, color-change 3s infinite; /* Add a new animation */
}