body {
    margin: 0;
    font-family: Arial, sans-serif;
}


/* Header styles */

    
    * {
        box-sizing: border-box;
      }
      
      body {
        margin: 0px;
        font-family: 'segoe ui';
      }
      
      .nav {
        height: 50px;
        width: 100%;
        background-color:lightseagreen;
        position: relative;
        
            z-index: 1000; 
            transition: background-color 0.3s ease;
          
          
      }
      .nav.active {
        background-color: lightcoral;
        animation: changeColor 0.5s infinite alternate;
    }
    
    @keyframes changeColor {
        0% {
            background-color: lightseagreen;
        }
        50% {
            background-color: lightgreen;
        }
       
        100% {
            background-color:lightskyblue;
        }
       
    }
    .section:hover {
    color:black;
    font-size: 20px;
    }
    .r{
        font-size: 15px;
        font-weight: bold;
        
    }
    .rr{
        font-size: 15px;
        font-weight: bold;
        text-decoration: underline;
        
    }
    .ama {
      height: fit-content;
      width: auto;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      padding: 7px;
      margin-right: 5px;
      margin-bottom: 10px;
      margin-top: 5px;
      margin-left:5px;
      background-color: whitesmoke;
      transition: transform 0.3s ease-in-out;
  }
  
  .ama:hover {
      transform: scale(1.4);
  }
  
    
      
      .nav > .nav-header {
        display: inline;
      }
      
      .nav > .nav-header > .nav-title {
        display: inline-block;
        font-size: 30px;
        color: #fff;
        padding: 10px 10px 10px 10px;
      }
      
      .nav > .nav-btn {
        display: none;
      }
      
      .nav > .nav-links {
        display: inline;
        float: right;
        font-size: 18px;
      }
      
      .nav > .nav-links > a {
        display: inline-block;
        padding: 13px 10px 13px 10px;
        text-decoration: none;
        color: #efefef;
        font-size: 20px;
        font-weight: bold;
      }
      
      .nav > .nav-links > a:hover {
        background-color: rgba(0, 0, 0, 0.3);
      }
      
      .nav > #nav-check {
        display: none;
      }
      
      @media (max-width:600px) {
        .nav > .nav-btn {
          display: inline-block;
          position: absolute;
          right: 0px;
          top: 0px;
        }
        .nav > .nav-btn > label {
          display: inline-block;
          width: 50px;
          height: 50px;
          padding: 13px;
        }
        .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
          background-color: rgba(0, 0, 0, 0.3);
        }
        .nav > .nav-btn > label > span {
          display: block;
          width: 25px;
          height: 10px;
          border-top: 2px solid #eee;
        }
        .nav > .nav-links {
          position: absolute;
          display: block;
          width: 100%;
          background-color:lightseagreen;
          height:200px;
          height: auto; 
          transition: all 0.3s ease-in;
          overflow-y: hidden;
          top: 50px;
          left: 0px;
         
        }
        .nav > .nav-links > a {
          display: block;
          width: 100%;
        }
        .nav > #nav-check:not(:checked) ~ .nav-links {
          height: 0px;
        }
        .nav > #nav-check:checked ~ .nav-links {
          height: calc(100vh - 50px);
          overflow-y: auto;
        }
      }
      .live-link {
        position: relative;
        color: #000; /* added for visibility */
        text-decoration: none; /* added for better appearance */
    }
    
    .live-link::before {
        content: "LIVE";
        position: absolute;
        top: 10;
        left:10px; /* Adjust this value as needed */
        color: red;
        opacity: 0;
        animation: pulse 1.5s infinite alternate;
    }
    
    
    @keyframes pulse {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .nav-title{
font-weight: bold;
font-size: 10px;
    }
    


/* Table styles */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    background-color:lightblue;
    color:black;
}
thead th {
    background-color:lightseagreen; 
    color: white; 
}
th, td {
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
    font-size: 11px;
    color: black;
}


tr:nth-child(even) {
    background-color: #f2f2f2;
    color: black;
}

.contact {
    background-color: #f9f9f9;
    padding: 20px;
    text-align: center;
  }
  
  .contact h2 {
    margin-bottom: 10px;
  }
  
  .contact-icons {
    display: flex;
    justify-content: center;
  }
  
  .contact-icon {
    margin: 0 10px;
  }
  
  .contact-icon img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: transform 0.3s ease;
  }
  
  .contact-icon img:hover {
    transform: scale(1.2);
  }
.naga{
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    font-style: italic;
    background-color:black;
    color: #f2f2f2;
    display: flex;
    justify-content: center;
}
.main-container {
display: grid;
border-radius: 2em;
filter: grayscale(30%);
background-size: cover;
object-fit: cover;
background-position: center;
padding: 6em;
text-transform: uppercase;
letter-spacing: 2px;
color:black;
margin-top: 20px;
animation-name: ani;
animation-duration: 12s;
animation-iteration-count: infinite;
margin-bottom: 10px;
height: auto;
margin-bottom: 20px;
width: auto;
text-align: left;
}
.description{
   position: relative;
   top: 46px;
   right: 50px;
   color:gray;
}

@keyframes ani
 {
    
    0% { background-image: url(Nagaland\ arrow.png);
        object-fit: cover; } 
25% { background-image: url(Nagaland\ arrow.png);
object-fit: cover; }
50% { background-image: url(ARROW.png);
object-fit: cover;}
75% { background-image: url(ARROW.png);
object-fit: cover;
 }

100% { background-image: url(Your\ paragraph\ text\ \(2\).png);
object-fit: cover;
 }
}
@media (max-width: 1000px) {
.main-container1 {
font-size: 15px;
padding: 4em;
}

.btn {
text-decoration: none;
color: black;
font-size: 12px;
font-weight: bold;
background: white;
padding: 8px 12px;
opacity: 0.6;
border-radius: 8em;
}
}

@media (max-width: 850px) {
.main-container1{
font-size: 13px;
padding: 4em;
}

.btn {
text-decoration: none;
color: black;
font-size: 12px;
font-weight: bold;
background: white;
padding: 8px 12px;
opacity: 0.6;
border-radius: 8em;
}
}


@media (max-width: 730px) {
.main-container1 {
font-size: 11px;
padding: 4em;
}

.btn {
text-decoration: none;
color: black;
font-size: 12px;
font-weight: bold;
background: white;
padding: 8px 12px;
opacity: 0.6;
border-radius: 8em;
}

.features {
display: grid;
grid-template-columns: 1fr;
}

.features > .box1 {
background: rgb(233, 233, 233);
padding: 1em;
border-radius: 3em;
}

.meal {
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 1em;
}

.about-remain {
display: grid;
grid-column: 1/4;
grid-template-columns: repeat(4, 1fr);
}

.web-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column: 2/3;
}
}


@media (max-width: 1000px) {
.main-container {
font-size: 15px;
padding: 4em;
}

.btn {
text-decoration: none;
color: black;
font-size: 12px;
font-weight: bold;
background: white;
padding: 8px 12px;
opacity: 0.6;
border-radius: 8em;
}
}

@media (max-width: 850px) {
.main-container {
font-size: 13px;
padding: 4em;
}

.btn {
text-decoration: none;
color: black;
font-size: 9px;
font-weight: bold;
background: white;
padding: 8px 12px;
opacity: 0.6;
border-radius: 8em;
}
}

.uu{
font-size: 12px;
font-weight: bold;
font-weight: bold;

}
.previous{
text-align: center;font-size: 25px;
text-decoration: none;font-weight: bold;
margin-top: 10px;
margin-bottom: 10px;

}
.previous:hover{
color: yellow;
}
.live {
    position: relative;
    padding-left: 25px;
    text-align: center;
    font-size: 25px;
    
    font-weight: bold; 
    text-decoration: none;
}

.live:hover {
    color:red;
}

.live:before {
    content: '';
    position: absolute;
    left:540px;
    bottom: 144px;
    top: 1px;
    transform: translateY(-50%);
    width: 30px; /* Adjust the size of the symbol */
    height: 30px; /* Adjust the size of the symbol */
    border-radius: 50%;
    background-color: red; /* Color of the symbol */
    animation: pulse 1s infinite alternate; /* Animation */
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
@media (max-width: 768px) { /* Adjust the max-width based on your needs */
    .live:before {
        left: 100px;
        bottom: 10%;
        transform: translateX(-50%);
    }
}



  
  .content-section {
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .content-heading {
    color: #333;
    margin-top: 0;
    text-align: center;
  }
  .hii{
    text-align: center;
    font-size: 20px;
  }
  
  .content {
    padding-left: 20px;
  }
  
  .list-items {
    margin-bottom: 10px;
  }
  
  .list-items ul {
    list-style-type: disc;
    margin-left: 20px;
  }
  
  .sub-heading {
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    text-align: center;
    text-decoration: underline;
  }
  
  .sub-list-items {
    margin-left: 20px;
  }
  

  

/* Footer Styles */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
    bottom: 0;
    width: 100%;
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between;
  }
  
  .footer-content p {
    margin: 5px;
  }
  
  /* General Styles */
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  /* Rest of your existing CSS styles... */