.look-closer{
    font-size: 80px;
    color: #000000;
    font-family: "courageous",sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0em;
    text-transform: uppercase;
}
.formSubscribe{
    width: 60%;
    margin: auto;
}
.formMidLine{
    border-left: 1px solid grey;
}

.sbox{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    padding: 1em;
}

div.sbox:hover {
	  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.btn-orange{
    background-color: #ff8f23;
}

.evt-box:hover{
  transform:scaleY(1.1);
  transition: transform 2s;
}

.sidebar a{
  color: white;
  font-weight: 600;
  display: block;
  padding: 10px;
  text-decoration: none;
}

.sidebar ul{
  line-height: 20px;
  margin: 0px;
}

.sidebar a:hover{
  background-color: black;
  color: white;
  text-decoration: none;
}

button, input[type=submit], input[type=reset] {
  background-color: #ddd; /* Fallback color */
  color: white;
  /* Define a linear gradient: first color (red) 50%, second color (black) 50% */
  background-image: linear-gradient(to top, #ff8f23 50%, #ffffff 50%);
  background-size: 100% 200%; /* Double the height to show only one color initially */
  background-position: bottom; /* Position at the bottom to show the 'red' part first */
  border: 0px;
  /* Transition the background-position property */
  transition: background-position 0.5s ease-out, color 0.5s ease-out; 
}

button:hover, input[type=submit]:hover, input[type=reset]:hover {
  background-position: top; /* Move the background up to show the 'black' part */
  color: #ff8f23; /* Change text color for better contrast */
  border-top: 2px solid #ff8f23;
  border-bottom: 2px solid #ff8f23;
}

.nav-item a {
  background-color: #ddd; /* Fallback color */
  /* Define a linear gradient: first color (red) 50%, second color (black) 50% */
  background-image: linear-gradient(to top, #ffffff 50%, #ff8f23 50%);
  background-size: 100% 200%; /* Double the height to show only one color initially */
  background-position: bottom; /* Position at the bottom to show the 'red' part first */
  
  /* Transition the background-position property */
  transition: background-position 3s ease-out, color 3s ease-out; 
}

.nav-item a:hover {
  background-position: top; /* Move the background up to show the 'black' part */
  color: black; /* Change text color for better contrast */
}

.typingContainer{
    font-family: monospace; /* Typewriter font style */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

/* This is the actual container where text is typed */

p#typewriter-text {
    border-right: .15em solid orange; /* The blinking cursor line */
    white-space: nowrap; /* Prevents text from wrapping to the next line prematurely */
    overflow: hidden; /* Hides the text until JavaScript reveals it */
    margin: 0 auto;
    letter-spacing: .15em; /* Spacing between characters */
    /* Use CSS animation for the blinking cursor */
    animation: 
        blink-caret .75s step-end infinite;
}

/* The typing animation is controlled by JavaScript, 
   but the cursor blink is purely CSS */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: orange; }
}

@media screen and (max-width: 680px) {
  .videoclip {
    width: 100%;
    height: auto;
  }

  .districtText{
      font-size: 60px;
  }

  .look-closer{
      font-size: 50px;
      color: #000000;
      font-family: "courageous",sans-serif;
      font-style: normal;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0em;
      text-transform: uppercase;
  }

  .formSubscribe{
      width: 100%;
      margin: auto;
  }

  .formMidLine{
    border-left: 0px solid grey;
  }

  .btnCong{
      font-weight: 700px; 
      position: relative; 
      top: 400px; 
      right: 250px; 
      padding: 15px;
  }

  .mainheading{
      font-size: 40px;
      font-weight: 700;
  }

  .depthead{
      width: 50%;
      text-align: center;
      align-items: center;
      justify-content: center;
  }

  .center-dept{
    text-align: center;
  }

}