@import url('https://fonts.googleapis.com/css2?family=Tiro+Kannada:ital@0;1&display=swap');
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 200,
  'GRAD' 0,
  'opsz' 1
}
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}
.fa {
  font-size: 4rem;
  width: 3rem;
  text-align: center;
  text-decoration: none;
  top:25%;
}

.fa-facebook{
color:white;
font-size:8rem;
border-radius:50%;
	position:relative;
	left:35%;
transition:all .5s ease-in;
}
.fa-facebook:hover{
background:blue;
}
.fa-instagram{
color:white;
		border-radius:50%;
	transition:all .5s ease-in;
	position:relative;
	left:45%;
}
.fa-instagram:hover{
background:crimson;
}
*{
    font-family: 'Times New Roman', Times, serif;
box-sizing: border-box;
}
body{
    background-color: rgb(248, 226, 194);
    scroll-behavior: smooth;
    margin: 0 0 0 0;
    max-width: 100%;
}
.my{
    background: linear-gradient(to top,rgb(240, 52, 52),rgb(250, 197, 111));
    margin: 10 10 10 10;
    width: 90%;
    height: 30em;
    position: relative;
    left: 50px;
    border-radius: 40px;
}
.my h2{
    color: rgb(255, 0, 0);
    position: relative;
    top:40px;
    text-align: center;
    font-size: 30px;
    }
marquee{
    color: crimson;
    font-size: 20px;
    font-weight: bold;
    background-color:rgb(252, 255, 214);
}
nav{
    display: flex;  
    background: linear-gradient(to right,rgb(237, 185, 95),rgb(225, 89, 44),rgb(237, 185, 95));
	background: linear-gradient(to bottom,rgb(225, 89, 44),rgb(237, 185, 95));
    position: sticky;
    column-gap: clamp(.1rem, 1rem, 15rem);
    height: 8rem;
    justify-content: center;
    font-size: larger;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 150px;
    left: 24px;
    transition: top 0.3s;
}
nav li{
    list-style-type: none;
    position: relative;
    top: .5rem;
    left: 5%;
}
nav li a{
color:rgb(241, 236, 201);
text-decoration: none;  
transition: all .4s ease-in;
font-size: clamp(0rem, .85rem, 55rem);
font-weight:bolder;
filter:drop-shadow(100px,100px,red);
}
nav li a:hover{
    color: rgb(73, 4, 4);
}
nav .image{
    width:20rem;
		position:absolute;
	margin-top:2rem;
}
nav .image1{
width:8%;
	position:absolute;
	top:10px;
    left:4%;
}
.reg{
    background: linear-gradient(to top,rgb(222, 152, 66),rgb(249, 212, 151));
    margin: 30 10 10 10;
    width: 90%;
    height: 30em;
    position: relative;
    left: 10px;
    border-radius: 40px;
    font-size: clamp(1rem, 1vw, 1.5rem);
}
.reg h1{
    position: relative;
    text-align:center;
    font-size: clamp(1rem, 2vw, 1.5rem);
    top:30px;
    font-weight: bolder;
}
.reg span{
    animation: colour .4s ease-in infinite;
}
@keyframes colour{
    0%{
        color: transparent;
    }
    100%{
        color:  rgb(249, 4, 4);
    }
}
.reg img{
    position: absolute;
    left: 47%;
    animation:move 1s ease-in infinite; 
    width: 5%;
}
@keyframes move{
from{
        top:0px;
    }
    to{
        top: 100px;
    }
}
.reg h2{
color: rgb(255, 0, 0);
position: relative;
top:40px;
text-align: center;
font-size: clamp(1rem, 2vw, 1.5rem);
}
.reg_type{
    display: flex;
    flex-wrap: wrap;
    column-gap: 500px;
    row-gap: 20px;
    position: relative;
    top: 50px;
    left: 64px;
}
.reg_type a{
    width: 20%;
    height: 90px;
    background-color: blueviolet;
    position: relative;
    top: 60px;
    border-radius: 15px;
    text-align: center;
    color: rgb(249, 212, 151);
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-decoration: none;
    cursor: pointer;
}
#about{
    background: linear-gradient(to top,rgb(222, 152, 66),rgb(249, 212, 151));
    margin: 30 10 10 10;
    width: 90%;
    height: 30em;
    position: relative;
    left: 10px;
    border-radius: 40px;   
}
#about h1{
   font-size: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    background-color: burlywood;
    width: 30%;
    position: relative;
    left: 35%;
    border-bottom-right-radius: 150%;
    border-bottom-left-radius: 150%;
    margin-bottom: 0;
}
#about p{
    color:black;
    font-size: clamp(1rem, 1em, 1.5rem);;
    text-align: center;
}
footer{
    margin: 30 10 10 10;
    width: 90%;
    height: 30em;
    position: relative;
    left: 10px;
    border-radius: 40px;  
    background: linear-gradient(to top,rgb(222, 152, 66),rgb(249, 212, 151));
}
#contact h1{
	font-size: clamp(1rem, 1em, 1.5rem);
    text-align: center;
    background-color: burlywood;
    width: clamp(1rem,5rem,20rem);
    position: relative;
    left: 40%;
    border-bottom-right-radius: 120%;
    border-bottom-left-radius: 120%;
    margin-bottom: 0;
}
.contact{
    position: relative;
     width: 100%;
    height: 30%;
    float: left;
	left:5%;

}
.contact p a{
    color:black;
    position: relative;
 
    left: 8px;
    text-decoration: none;
	font-size: clamp(1rem, 1rem, 10rem);
}
.contact img{
    width: 4%;
    position:relative;

}
.follow h2{
	position:relative;
text-align:center;
}
.samparka{
     margin: 30 10 10 10;
    width: 90%;
    height: 30em;
    position: relative;
    left: 10px;
    border-radius: 40px;  
    background: linear-gradient(to top,rgb(222, 152, 66),rgb(249, 212, 151));
}
.samparka h1{
   	font-size: clamp(1rem, 1em, 1.5rem);
    text-align: center;
    background-color: burlywood;
    width: clamp(1rem,5rem,20rem);
    position: relative;
    left: 40%;
    border-bottom-right-radius: 120%;
    border-bottom-left-radius: 120%;
    margin-bottom: 0;
}
}
.last{
    margin: 0;
    position: relative;
    color: black;
    font-size: clamp(1rem,1rem,20rem);
    text-align: center;
    top: 40px;
	opacity:.4;
}

.register button{
     width: 30%;
     height: 10%;
     background-color:brown;
     color: bisque; 
     position: relative;
     left: 35%;
     margin: 200 0 0 0;
     outline: none;
     border: none;
     border-radius: 50px;
     font-size: clamp(1rem, 2vw, 1.5rem);
     transition: all .2s ease-in;
     font-weight: bolder;
}
.register button:hover{
    background-color:burlywood;
    cursor: pointer;
    color: brown;
}
.gal h1{
    font-size: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    background-color: burlywood;
    width: 90%;
	left:5%;
	border-radius:1rem;
    position: relative;
    margin-top: 10%;
}

.mySlides {display: none;}
.mySlides img{vertical-align: middle;
	position:relative;
	}
.mySlides img{
width:90%;
height:20rem;
}
/* Slideshow container */
.slideshow-container {
width:70%;
  position: relative;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
#slids2
.mySlides1 {display: none;}
.mySlides1 img{vertical-align: middle;
	position:relative;
	}
.mySlides1 img{
width:90%;
height:20rem;
}
.slideshow-container1 {
width:70%;
  position: relative;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.update{
	background: linear-gradient(to top,rgb(240, 205, 150),rgb(240, 235, 174));
    margin: 30 10 10 10;
    width: 90%;
    height: 20em;
    position: relative;
    left: 10px;
    border-radius: 40px;
	 border: brown solid 1px;
}
.update h1{
	  font-size: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    background-color: burlywood;
    width: 30%;
    position: relative;
    left: 35%;
    border-bottom-right-radius: 150%;
    border-bottom-left-radius: 150%;
    margin: 0 0 0 0;
}
.update-1{
	background: linear-gradient(to top,rgb(240, 205, 150),rgb(240, 235, 174));
    margin: 30 10 10 10;
    width: clamp(1rem, 90vw, 50rem);
    height: 40em;
    position: relative;
    left: 10px;
    border-radius: 40px;
	 border: brown solid 1px;
}
.update-1 h1{
	  font-size: clamp(1rem, 2rem, 1.5rem);
    text-align: center;
    background-color: burlywood;
    width: 50%;
    position: relative;
    left: 25%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    margin: 0 0 0 0;
}
.update marquee{
	background:none;
	width:100%;
	text-align:center;
}
.marq{
    width: 100%;
    height: 17rem;
	position:relative;

	background:none;
}
.update-1 .detail a{
    text-align:center;
}