.gallery, .ContactUs, #Notice, #msgfromPri, #imp_links {

    background-color: white;
    overflow: hidden;
    animation: fade-out ease;
    animation-timeline: view();
    animation-range: exit 100px; 
}



  #Event {
    display: flex;
    flex-direction: column;
    background-color: white;
    overflow: hidden;
    animation: fade-out ease;
    animation-timeline: view();
    animation-range: exit -200px; 
    transition: ease;
  }
  





@keyframes fade-out {
    to {scale: 0.9; opacity: 1;}
}




#firstSec {
  margin-top: 1vw;
  display:flex;
  flex-direction: row;
  gap:2%;
 }

#firstSec > *:nth-child(1) {
  flex: 1 1 69%;
  height:42vw;
}

#firstSec > *:nth-child(2) {
  flex: 1 1 29%;
  height:42vw;
}

.Notice_container {
 display: grid;
 grid-template-rows: 70% 30%;
 grid-template-rows: 60% 36%;
 gap:4%;
}



.event_text_cont {
  padding: 1vw;
  height: 100%;
  min-height: 100%;
}


#event_text {
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
  border-style:outset;
  /*font-size: calc(var(--font-tittle_sz) + 1.5vw); */
  color:navy;
  margin-bottom: 5px;
  height: 60%;
  min-height: 60%;
  
  justify-content:center;
  align-items: center;
  text-align: center;
 animation: customAni 5s ease-out 0s infinite normal none;
}


@keyframes customAni {
  0%,
  100% {
	transform: translateX(0%);
	transform-origin: 50% 50%;
  }

  15% {
	transform: translateX(-30px) rotate(6deg);
  }

  30% {
	transform: translateX(15px) rotate(-6deg);
  }

  45% {
	transform: translateX(-15px) rotate(3.6deg);
  }

  60% {
	transform: translateX(9px) rotate(-2.4deg);
  }

  75% {
	transform: translateX(-6px) rotate(1.2deg);
  }
}

/* for welcome to official website */

.wrapper svg {
	font-style: italic;
	width: 100%;
  height: 45px;
}

.wrapper svg text {
	animation: stroke 5s infinite alternate;
	stroke-width: 0.4;
	stroke: #fcfcfa;
	font-size: 3.5vw;

}
@keyframes stroke {
	0%   {
		fill: rgba(204,204,204,0); stroke: rgb(245, 245, 244);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 0.4;
	}
	70%  {fill: rgba(204,204,204,0); stroke: rgb(250, 250, 244); }
	80%  {fill: rgba(204,204,204,0); stroke: rgb(245, 245, 244); stroke-width: 0.8; }
	100% {
		fill: rgba(204,204,204,1); stroke: rgba(255,244,0,0);
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0.1;
	}
}





/*************Photo div Starts *************/
  
.carousel_cont { 
  display: block;
  position: relative; 
  overflow: hidden; 
  background: rgb(34,193,195);
  isolation: isolate;
 
} 


.carousel-img .slide-image { 
  background-size: 100% 100%; 
  background-position: center;
  background-repeat: no-repeat; 


} 

.carousel-img { 
  position: absolute; 
  width: 100%; 
  height: 100%;
  border: none; 
  top: 0; 
  left: 100%; 
} 

.carousel-img.active { 
  left: 0; 
  transition: all 1s ease-out; 
} 

.carousel-img div { 
  height: 100%;
  background-size: cover;
  object-position: center;
} 

/*************Photo div Starts *************/

/*******************/


.div_tittle {
  margin-top: 0.2rem;
 font-size: calc(var(--font-base_sz) + 1vw);
 font-weight: 700;
 text-align: center;
 width: 100%;
  line-height: 1.5;
  color: white;
  background-color:rgb(47,79,79) ;
}


.anim_ttl {
  margin-top: 0.2rem;
 font-size: calc(var(--font-base_sz) + 1.3vw);
 font-weight: 800;
 text-align: center;
 width: 100%;
 line-height: 1.5;
  color: white;
  background-repeat: no-repeat;
  background-size: 0% 100%;
  background-image: linear-gradient(90deg, rgb(47,79,79), rgb(47,79,79));
  animation: sec_bgfill linear forwards;
  animation-timeline: view(y);
  animation-range-start: contain;
  animation-range-end: contain 25vh;
}

@keyframes sec_bgfill {
  to { background-size: 100% 100%; }
}


/**************** css for new in notification ************/

.high {
  position: relative;
}

.high::after {
  content: "NEW";
  position: absolute;
  font-size: calc(7px + 0.3vw); 
  font-weight: 600;
  padding-left: 2vw;
  padding-right: 5px;
  padding-top: 6px;
  padding-bottom: 6px;
  color:rgb(255, 255, 58);
  letter-spacing: 5px;
  background: red;
  border:1px solid rgb(251, 253, 100);
  clip-path:polygon(40% 0%, 40% 26%, 90% 25%, 90% 74%, 41% 75%, 40% 100%, 0 49%);
  transition: 0.5s;
  animation: move 1s alternate infinite ;
  }

  @keyframes move {
      0% {
          transform: translateX(70px)
      }
      50% {
          transform: translateX(0px);
      }
      100% {
          transform: translateX(70px);
      }
  }

/**************** css for new in notification ************/






  #SecondSec  {
    padding: 2vw;
   /* background: radial-gradient(#baebf7, #eac6fc,#eafc83,white 70%); */
   background-color: #fff;
    box-shadow: -6px 6px 2px rgb(250, 225, 1);
    animation: fade-out ease;
    animation-timeline: view();
    animation-range: exit 100px; 
 }

 .aboutUs {
  padding-top: 1vw;
  padding-inline: 4vw;
 }

 p {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding-inline: 1rem;
 
}
.long_text {
padding-top: 0.5rem;
letter-spacing: 0.1vw;
line-height: calc(1.5vw + 18px);
text-align: justify;
}




#ThirdSec {
  display: flex;
  gap:2%;
  margin-top: 4vw;
  
}

#ThirdSec > *:nth-child(1) {
  flex: 1 1 48%;
  padding: 2vw;
}

#ThirdSec > *:nth-child(2) {
  flex: 1 1 50%;
}



#Contact_Link {
  display: flex;
  gap: 4%;
}

#Contact_Link > *:nth-child(1) {
  flex: 1 1 60%;
  padding: 2vw;
}

#Contact_Link > *:nth-child(2) {
  flex: 1 1 42%;
  padding: 2vw;
}


#contact_frm > div {
  margin-top: calc(1vw + 3px);
  display: flex;
  flex-direction: column;
} 

#contact_frm label {
  font-weight: 500;
}

input {
  padding: 0.5vw 0.8vw;
  background-color: rgb(220, 245, 245);
}


textarea {
  padding:  0.5vw 0.8vw;
  background-color: rgb(220, 245, 245);
  height:calc(5vw + 2rem);
}

.btn_cnt {
  align-items: end;
}


#contact_frm .btn {
  width: 50%;
}


#imp_links {
  padding: 2vw;
  position: relative;
}



.Qck_link_list ul {
  margin-top: 2vw;
  list-style: none;
  padding-left: 2.5vw;

}

.Qck_link_list a {

  margin-top: 0.2vw;
  padding-top: 0.5vw;
  margin-right: 0;
  padding-right: 0;
  text-decoration: none;
  display: inline-block;

}




.map_location {
  position: absolute; 
  right:0;
  bottom: 0;
}


  .btn {
    
    position: relative;
    padding: 4px 4px;
    padding-left: 1vw;
    padding-right: 1vw;
    background: transparent;
    border: 2px solid #0ef;
    outline: none;
    border-radius: 40px;
    cursor: pointer;
    color: #fff;
    z-index: 1;
    overflow: hidden;
    transition: .5s;
}

.btn::before {
    content: "";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    background: linear-gradient(#081b29, #0ef, #081b29, #0ef);
    z-index: -1;

}

.btn:hover::before {
    top: 0;
}