*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

  html,
  body {
    position: relative;
    height: 100%;
}

 body {
    background: white;
    font-family:Poppins, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: #000;
    margin: 0;
    padding: 0;
}

header{
	display: flex;
	justify-content: space-between;
	text-align: center;
	background:  #9F3CC2;
	color: white;
	height: 50px;
}

header img{
    height: 50px;
    width:50px
}

label.logo{
	position: absolute;
    color:#FFFFFF;
    font-size: 40px;
    line-height: 10px;
    padding: 0;
    font-weight: bold;
    margin-top: 20px;
    margin-left:20px ;
    top: -2px;
    left: 40px;
}


.navbar ul{
	margin: 0;
	padding: 0;
	display: flex;
}

.navbar li{
	list-style: none;

}

.navbar li a{
	 color: #FFFFFF;
	text-decoration: none;
	padding: 1rem;
	display: block;
	font-weight: bold;
    font-size: 15px;	
}

.navbar li a:hover{
	 color:#f6eB07;
    transition: .5s;

}

.bar3{
	position: absolute;
	top: .20rem;
	right:1rem;
	color: white;
	display: none;
	font-size: 25px;
	font-weight: bold;
	cursor: pointer;
}

.bar3:hover{
	color:#f6eB07;
    transition: .5s;
}
                                      /* Home section */

 .swiper {
    width: 100%;
    height: 50%;
}

 .swiper-slide {
    font-size: 18px;
    position: relative;
}

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; 
  }

  .swiper-pagination-bullet-active{
    background: #9F3CC2;
    font-size: 10px;
  }



#maintopic{
    margin-top: 30px;
    text-align: center;
    color:#9F3CC2;
    font-size:1.3em;
    font-weight: bold; 
    z-index: 10; 
}

#intro{
    font-size: 1.2em;
    margin: 30px;
    padding: 0;
    text-align: justify;
}

.introbox{
    display: flex;
    justify-content: center;
    align-items: center;
}

#text{
   padding:0 10px ;
    width: 100%;
}

#text p{
    display: inline;
    font-style: italic;
}
 
#intro img{
    width:250px ;
    height:250px ;
    margin: 20px 100px;
}


#blog{
    font-size: 1.2em;
    margin: 30px;
    padding: 0;
    text-align: justify;
}

.blogbox{
    display: flex;
    justify-content: center;
    align-items: center;
}

#text2{
   padding:0 10px ;
    width: 100%;
   font-size:0.9em;
}

#text2 p{
    display: inline;
}

#text2 h4{
	text-align:center;
}
 
#blog img{
    width:250px ;
    height:250px ;
    margin: 20px 100px;
}

    
    /* Event section */

#events{
    background: #eee;
}

#head {
    color:#9F3CC2;
    text-align: center;
    padding-top: 10px;
}
#date{
    text-align: left;
    font-size: 0.9em;
    display: block;
    font-style: italic;
}
#icon{
    color:#9F3CC2;
    font-size:1.9em;
    letter-spacing: 10px;
}

#smallicon{
    color:#9F3CC2;
    font-size:15px;
}

#click{
    color:#9F3CC2;
    text-decoration: none;
    font-size:1.1em;
}

#click:hover{
    color:#f6eB07;
}

#events p{
    font-size:1.1em;

}
#events span{
    text-align: left;
    font-size:0.9em;
    display: block;
}

#events .box-container{
  position: relative;
  top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(18rem,1fr));
  gap:1.5rem;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;

}

#events .box-container .box {
    position: relative;
    padding: 1rem 1rem;
    color: #000;
    background: white;
    border:1px solid rgba(0, 0, 0, 0.2) ;
    overflow: hidden;
    text-align: center;
 }
 .space{
    background:#eee;
    height: 50px;
 }

    /* Footer Section */
#footer{
    background: linear-gradient(rgba(159, 60, 194, 0.9),rgba(159, 60, 194, 0.9)),url(images/logo.png) no-repeat;
    background-position-x: center;
    background-position-y: center;
     /*  background: rgba(0, 0, 0, 0.5); background: rgba(159, 60, 194, 0.7);*/
}

#footer .box-container{
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
  gap:1.9rem;
  top: 30px;

}


#footer .box-container .box {
    padding: 1rem 2rem;
    font-size:1.1em;
    color: #E8DB07;
}

#footer .box-container .box a {
    padding: 0.5rem 0;
    display: block;
    font-size:0.9em;
    color: white;
    text-decoration: none;

}
#footer .box-container .box a:hover{
    color:#f6eB07 ;
    text-decoration:underline;
}

.credit{
    text-align: center;
    color: #fff;
    border-top: 1px solid white; 
    font-size:0.9em;
    font-style: italic;
    padding: .5rem;
    padding-top: 1.5rem;
    margin-top:1.5rem;
    font-style: italic;
}
.credit a{
    text-decoration: none;
    color: white;
}


        /* Event page */

.topE{
    display:flex;
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(105, 97, 104, 0.7)),url(images/events.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 40vh;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#event{
    font-size:1.3em;;
    margin: 30px;
    padding: 0;
}

.introbox{
    disp1lay: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
}

#event1{
   padding:0 100px ;
    width: 100%;
    text-align: justify;
}
 
#event img{
    width:40% ;
    height:40% ;
}



#event p{
    text-align: justify;
    font-size: 0.9em;
}

#event h2{
    text-align: center;
    margin-bottom: 20px;
    color:#9F3CC2;
    font-size: 1.2em;

}
                                                /* About page */

.bg{
    display: flex;
    background: linear-gradient(rgba(0,0,0,0.5),rgba(105, 97, 104, 0.7)),url(images/about.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height:40vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    
}
.heading{
    margin:10vh 0;
    height: 20vh;
    width:100%;
    padding:5vh 0;
}

.heading h2{
	font-size:2.0em;
	color:#fff
}


.content p{
    padding: 20px 30px;
    color: black;
    font-size:1.2em;
    margin: 5px;
}

                                    /* Exectives page */
.top{
    display:flex;
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(105, 97, 104, 0.7)),url(images/lead.jpg) no-repeat;
    background-size: cover;
    width: 100%;
    height: 40vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    
}

#heads{
    text-align: center;
    width: 100%;
    font-size:1.3em;
    color:#dd4bf5;
}

#executive_intro {
    font-size:1.1em;
    text-align: justify;
    padding: 20px;
}

.row{
    display:flex;
    flex-wrap: wrap;
}

.row2{
    display:flex;
    flex-wrap: wrap;   
}

.row3{
    display:flex;
    flex-wrap: wrap;
    
}

.column{
    width:100%;
    padding:2%;
    text-align: center;
}

.column2{
    width:100%;
    padding:2%;
    text-align: center;
}

.column3{
    width:100%;
    padding:2%;
    text-align: center;
}

.card{
    width: 100%;
    height: 100%;
    box-shadow: 0 0 0 0.2em rgba(25, 0, 58, 0.1);
    padding:2em 1.5em;
    border-radius:0.6em ;
    color:#000 ;
    transition: 0.3s;
    background-color:whitesmoke;
    
}
.card .img-box{
    width: 10em;
    height: 10em;
    background-color:darkviolet ;
    padding: 0.2em;
    border-radius: 50%;
    margin: 0 auto 2em auto;
    
}
.card img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;

}

.card h3{
    font-weight: bold;
}

.card p{
    font-weight: 300;
    text-transform: uppercase;
    margin: 0.5em 0 2em 0;
    letter-spacing: 2px;
}
.card:hover{
    background: linear-gradient(rgba(241, 18, 189, 0.903),#e419e4ec);
    color: white;

}

.card:hover .img-box{
    transform: scale(1.2);
}

#social{
    font-size:1.0em;;
     letter-spacing: 15px;
     color: white;

}

#social a{
    color: black;
}

#social a:hover{
    color:white;
    transform: scale(1.2);
}

@media screen and (min-width: 786px ) {
    section{
        padding: 0 2em;
    }
    .column{
        flex: 0 50%;
        max-width: 50%;
    
    }
    .column2{
        flex: 0 50%;
        max-width: 50%;
    
    }
    .column3{
        flex: 0 50%;
        max-width: 50%;
    
    }
    
}

@media screen and (min-width: 992px ) {
    section{
        padding:1em  3em ;
           
    }
    .column{
        flex: 0 0 33.33%;
        max-width: 33.33%;
    
    }

    .column2{
        flex: 0 0 33.33%;
        max-width: 33.33%;
    
    }
    .column3{
        flex: 0 0 33.33%;
        max-width: 33.33%;
    
    }
} 

@media (max-width: 900px)
{

    .swiper {
    width: 100%;
    height: 60%;
   }

	header{
		align-items: flex-start;
		flex-direction: column ;
	}

	.navbar{
		display: none;
	}

	.bar3{
		display: inline-block;
	}

	.navbar ul{
		position: absolute;
		flex-direction: column;
		height: 24em;
		background: rgba(159, 60, 194, 0.9);
		width: 100%;
		top: 40px;
	}

	.navbar li{
		text-align: center;

	}

	.navbar li a{
		padding: 0.45em 5rem;
		font-size: 1.5em;
		font-weight: normal;
	}

	.navbar.active{
		display: flex;
		z-index: 3;
	}

    .introbox{
        display: block;
        text-align: justify;
    }

    #intro{
        height: auto;
    }

    #intro img {
        display: block;
        margin: auto;
        padding: 0;
    }
    #text{
        padding: 0;
        font-size: 0.9em;
    }

    .blogbox{
        display: block;
        text-align: justify;
    }

    #blog{
        height: auto;
    }

    #blog img {
        display: block;
        margin: auto;
        padding: 0;
        width:75%;
        height:75%;
    }

    #text2{
        padding: 0;
        
    }

    #text2{
    font-size: 0.7em;
    }
  
   
    #event1 {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;
    border: 0;
    padding: 0;
    }
    
    #event{
    margin: 30px;
    }

    #event img{
    width:70% ;
    height:40% ;
    margin: auto;
    }
    
    .top .heading{
    color: white;
    font-size: 28px;
    font-weight: bold;
    }

    #footer .box-container{
    grid-template-columns: repeat(auto-fit,minmax(20rem,1fr));
    gap:1.1em;
    }

    #event img{
    width:100% ;
    height:50% ;
    }

    .top .heading{
        font-size: 25px;
    }

    .heading h2 {
    font-size: 35px;
    }
     #events span{
       font-size:0.8em;

    }

}

@media (max-width: 500px)
{   

    .navbar ul{
        height: 24em;
    }

    .navbar li a{
        padding: 0.6em 5rem;
        font-size: 1.2em;
        font-weight: 550;
    }

    #executive_intro {
    font-size: 1.0em;
    
    }

    .content p {
    font-size: 1.0em;
    }

    #intro{
        height: auto;
    }

    #intro img {
        height: 200px;
        width: 200px;
    }

    #maintopic{
        font-size: 1.1em;
    }

    #text p{
     font-size: 0.9em;
    }

    #text2{
        font-size: 0.8em;
    }
    #events p {
        font-size: 0.84em;
    }
    
    #events span{
      font-size:0.8em;

    }

    .top{
    background: linear-gradient(rgba(0, 0, 0, 0.5),rgba(105, 97, 104, 0.7)),url(images/smalllead.jpg) no-repeat;
	height:30vh;
    }
    
   .top .heading{
	   height:15vh;
        margin:7.5vh 0;
        padding: 3.75vh 0;
     }

    .bg{
    background: linear-gradient(rgba(0,0,0,0.5),rgba(105, 97, 104, 0.7)),url(images/smallabout.jpg) no-repeat;
	    height:28vh;
     }

    .bg .heading{
	    height:14vh;
        margin:7vh 0;
        padding:3.5vh 0;
    }

   .bg .heading h2{
    font-size:22px;
    }

    .heading h2{
	    font-size:25px;
	}

    .topE{
    height: 35vh;
    }
	
   .bg .heading{
	    height:17.5vh;
        margin:8.75vh 0;
        padding:4.375vh 0;
    }
    
    #event h2{
        font-size: 20px;
    }

    #event {
    font-size: 18px;
    }
    #eventhead{
        font-size:0.97em ;
    }
    #footer .box-container {
        grid-template-columns: repeat(auto-fit,minmax(12rem,1fr));
        gap: inherit;
    }

    #footer .box-container .box {
        font-size:0.97em ;
        padding-left: 40px;
    }

    #footer .box-container .box  a{
        font-size: 0.84em;
    }
    .credit {
        font-size: 0.84em;
    }
 
}

@media (max-width: 400px)
{

    .navbar ul{
        height: 24em;
    }


    .navbar li a{
        padding: 0.6em 5rem;
        font-size: 18px;
        font-weight: 550;

    }

    #intro img {
        height: 150px;
        width: 150px;
    }

    #blog img {
        height: 150px;
        width: 150px;
    }

    #maintopic {
        font-size: 0.9rem;
    }
    

    #text p {
        font-size: 0.625em;
    }

    #events p {
        font-size: 0.75em;
    }

    #eventhead {
        font-size: 0.8em;
    }

    #events span{
      font-size:0.6em;

    }
    
    #click{
       0.9em;
    }

    #text2{
        font-size: 0.6em;
    }

    #footer .box-container {
        grid-template-columns: repeat(auto-fit,minmax(10rem,1fr));
        gap: inherit;
    }

    #footer .box-container{

        gap:0.1px;
    }
    #footer .box-container .box {
        padding: 2rem 3rem;
    
        font-size:15px ;
    
    }
    .credit {
        font-size: 0.75em;
    }
  
    #footer .box-container .box{
        font-size: 0.65em;
    }

    #footer .box-container .box  a{
        font-size: 1.0em;
    }

    #event h2 {
        font-size: 20px;
    }

    .top .heading {
    font-size: 20px;
    }


    .bg .heading{
        font-size:18px;
    }
  
}

@media (max-width: 319px)
{
     h1{
        font-size: 15px;
    }

    #text{
        font-size: 15px;
    }
    #maintopic{
        font-size: 15px;
    }
    #footer .credit{
        font-size: 0.6em;
    }

    #blog text2{
        font-size: 15px;
    }

    .top heading {
    font-size: 20px;
    }

    #media2 img {
    height: 150px;
    width: 150px;
    margin: auto;
    }
	
    #events .box-container {
    grid-template-columns: repeat(auto-fit,minmax(18rem,1fr));
    gap: 1.5rem;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    }
	
    #events .box-container .box {
    position: relative;
    padding: 1px
    
    }
     #events .box-container .box  img{
            width: 250px;
     }
     #event h2 {
    font-size: 20px;
    }
        #events span{
      font-size:0.8em;

    }
}