/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

:root{
  --primary:rgb(254, 250, 22);
  --light: #F1F8FF;
  --dark:rgb(29, 63, 9);
  --main-color:green;
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}
body{background-color: var(--main-color);}
.header{
  position: fixed;
  top: 0;
  left: 0;
  height: 6rem;
  width: 100%;
  z-index: 100;
  transition:0.5s;
  background-color: white;
  margin-right: 15px;
}
.header-active{
  height: 6rem;
  background-color: var(--white-color);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.navbar{
    display: flex;
    position: relative;
  height: 100%;
  align-items: center;
  justify-content: space-between;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   
}
.navbar .logo-text{
color: var(--main-color);

font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

    
}
.navbar .logo{
    display: flex;
    padding:15px;
    align-items: center;
    
    
}.navbar a{
    text-decoration: none;
    font-size:1.1rem;
    color:  var(--main-color);
    padding-top: 20px;
    position:relative;
    text-transform: uppercase;
}
          .navbar a:hover {
              text-decoration: underline;
              font-weight: bolder;
              background-color: white;
          }
          .navbar .icon {
            display: none;
          }
          @media screen and (max-width: 800px) {
            .navbar a:not(:first-child), .dropdown .dropbtn {
              display: none;
            }
            .navbar a.icon {
              float: right;
              display: block;
              font-size: 1.5rem;
              color:var(--main-color);
              background-color:#f1f1f1;
              border-radius: 3px;
              padding:3px;
            }
            .navbar .logo img{
                height:40px;
            }
            .navbar .logo-text{
                font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            }
            .navbar{
              height:fit-content;
         display: block;
              background-color: #f1f1f1;
            }
            .tp-text{
              display:none;
             padding-right:10px;
            }
          }
          
          @media screen and (max-width: 800px) {
            .navbar.responsive {position: relative;}
            .navbar.responsive .icon {
              position: absolute;
              right: 0;
              top: 0;
            }
            .dropdown{
              margin-left:0px;
            }
            .navbar.responsive a {
              float: none;
              display: block;
              text-align: center;
            }
            .navbar.responsive .dropdown {float: none;}
            .navbar.responsive .dropdown-content {position: relative;}
            .navbar.responsive .dropdown .dropbtn {
              display: block;
              width: 100%;
              text-align: center;
              
            }
            .main-slide .mySlides{
                width:100%;
                overflow: hidden;
            }
          .mySlides img{
object-fit: cover;
            overflow: hidden;
          }
    }
.contents{
    background-color: white;
    border-radius: 25px;
    padding:10px;
    position: relative;
    margin: 5% ;

}
/***** CONTENT *****/
#content {
	
	float: left;
	text-align: justify;
	font-size: 0.9em;
    padding: 3px;
    color:var(--main-color);
}
.jc-headings{
    font-size: 1.8rem;
	font-variant: small-caps;
	font-weight: bold;
    background: #F8F7F3 url(../images/post_h2.jpg) no-repeat 0 bottom;
    color:var(--main-color);
}
#content h1 {
	background: #F8F7F3 url(../images/post_h2.jpg) no-repeat 0 bottom;
	border: #EEEEDF 1px solid;
	height: 20px;
	font-size: 1.4em;
	font-variant: small-caps;
	font-weight: bold;
	padding: 5px 0 0 30px;
	margin: 10px 0;
	color:var(--main-color);
}
.mySlides{
    display: flex;
height:550px;
width:100%;
overflow: hidden;

 }

 .mySlides img{
  position: absolute;
  background-size:cover;
overflow: hidden;
   height:550px;
   
    object-fit:cover;
   }

 
.main-slide{
  display: flex;
  padding:0;
width:100%;
overflow: hidden;
}
.mySlides .text{
  background: rgba(15, 23, 43, .5);  
  top:50px; 
 justify-content: center;
 position: relative;
   color:white;
  font-size:1.4rem; 
  text-align: center;
  padding:10%;
  text-transform: uppercase;
      
 }
 .mySlides .text h2{
    color:yellow;
 }

.carousel-caption {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
 
}
.section-title {
  position: relative;
  display: inline-block;
  padding:0 10px;
  
}
.text h6{
  font-size: 1.5rem;
}

.section-title::before {
  position: absolute;
  content: "";
  width: 45px;
  height: 2px;
  top: 50%;
  left: -55px;
  margin-top: -1px;
  background: var(--primary);
}

.section-title::after {
  position: absolute;
  content: "";
  width: 45px;
  height: 2px;
  top: 50%;
  right: -55px;
  margin-top: -1px;
  background: var(--primary);
}

.section-title.text-start::before,
.section-title.text-end::after {
  display: none;
}
.primary-btn { 
  background-color: var(--primary); color: var(--dark); 
  text-align: center; border: none; 
  font-size: 1.1rem; 
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold; padding: 7px; 
  text-decoration: none;
  cursor: pointer;
}
.primary-btn:hover { 
  background-color: yellow; color: var(--dark); 
 
}

.white-btn { 
  background-color: white; border: none; 
  font-size: 1.1rem; 
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: bold; padding: 7px; 
  text-decoration: none;
  cursor: pointer;
text-align:center;
}
.white-btn:hover {
  background-color: #f1f1f1; color: var(--dark);
}
.upevents{
    text-align:center;

   color:#0f6935;
   font-size: 1.2rem;
   padding:0;
   background-color: white;
   border: solid 2px #7ce92a;
   border-radius:10px;
    
    max-height:27vh;
    overflow:scroll;
  }
  .upevents h3{
  background-color:burlywood;
  text-align: center;
  }
  
  .upevents h4{
  
  background-color: #f1f1f1;
  text-align: center;
  }
  .upiconi{
   
  margin-bottom:-8px;
    background-color:#514c4c;
    padding-right:rem;
    border-radius:2px;
  }
  .upicon{
    font-size:1rem;
    font-family: 'Segoe UI', Tahoma,  Verdana, sans-serif;
    padding:5px 0px;
  }
  .introhead{
  margin:-4px 0 0 -36%;
  background-color: #f1f1f1;
  padding:1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  border-bottom: 2px solid green;
  }
  
  
  /* Login Form */
     .account-page{
      padding: 50px 0;
      background: radial-gradient(#fff, #ffd6d6);
      
      }
      .account-page img{
        max-width:350px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        
      }
  
    .form-container{
      background: #fff;
      width: 300px;
      height: 400px;
      position:relative;
      text-align: center;
      padding: 20px 0;
      margin: auto;
      box-shadow: 0 0 20px 0px rgba(0,0,0,0.1);
      overflow: hidden;
    }
    .form-container span{
      font-weight: bold;
      padding: 0 10px;
      color: #555
      cursor: pointer;
      width: 100px;
      display: inline-block;
      }
      .form-btn{
        display: inline-block;
    
      }
      .form-container form{
        max-width: 300px;
        padding: 0 20px;
        position: absolute;
        top:100px;
        transition: transform 1s;
     
      }
      .form-container form input{
      width: 100%;
      height: 30px;
      margin: 10px 0;
      padding: 0 10px;
      border: 1px solid #ccc;
      }
      .form-container form button{
      width: 100%;
      border: none;
      cursor: pointer;
      margin: 10px 0;
      font-weight: bold;
      padding:5px;
        border-radius:25px;
      }
      .form-events{
        background: #fff;
        width: 350px;
        height: 620px;
        position:relative;
        text-align: center;
        padding: 15px ;
        margin: auto;
        box-shadow: 0 0 20px 0px rgba(0,0,0,0.1);
        overflow: hidden;
        }
    .form-events input, select{
      width:100%;
      border: 1px solid #f1f1f1;
      padding:0 10px;
      margin: 8px 0;
      height:30px;
      }
    .form-events textarea{
      width:100%;
      border: 1px solid #f1f1f1;
      padding:0 10px;
      margin: 8px 0;
      height:60px;
      }
   table{
        border: 2px solid #4df862;
        padding:3px;
       border-radius:10px;
      }
      th{
        border:2px solid ##5cfb6f;
        
        padding:5px;
        background-color:#f4f4f4
      }
      td{
        border: 1px solid #f1f1f1;
      }
      .subdisplay{
       
        background-color:#f1f1f1;
       
                text-align:center;
        align-items: center;
        justify-content: space-between;
     
          }
      .subdisplay a{
        text-decoration:none;
        color:black;
        background-color:white;
       
      }
      .subdisplay a:hover{
       color:red;
        font-weight:bolder;
      }
      .subdisplay img{
        height:70px;
        margin:0;
      }
      .subdisplay h2{
        font-size:1.2rem;
        margin:0;
      }
      .footer{
        background-image: url('images/jc-logo.jpg');
        background: rgb(35,175,16);
        background: linear-gradient(90deg, rgba(35,175,16,0.9164040616246498) 0%, rgba(255,237,65,1) 26%, rgba(250,255,63,1) 74%, rgba(32,149,43,0.8099614845938375) 100%);
      }