@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@400;700&family=Oswald:wght@400;600&family=Poppins:wght@300;700&display=swap');

    body {
      
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
      
       height: 100vh;
            
      
    }

    #hindi{
      margin-top: 80px;
      display: none;
    }
    #punjabi{
      margin-top: 100px;
    }
 
    /* Custom styles for the grid */
    .custom-grid {
      margin-top: 20px;
      margin-bottom: 40px;
      /* justify-content:flex-start; */
      /* align-items: start; */
      row-gap: 30px;
      
    }
    .card-body{
        min-height: 120px;
    }
    .card-text{
      font-size: 1.02rem;
      font-weight: bold;
      color: blue;
      text-align: center;
      
    }
    /* Hide all containers by default */
    .container-item {
      display: none;
    }
    /* Active page number styling */
    .pagination .page-item.active .page-link {
      background-color: #007bff;
      color: #fff;
      
    }
    .page-link{
      font-size: 1.1rem;
      font-weight: 600;
      color: darkblue;
    }
    .title_item {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px; /* You can adjust this height as needed */
      background-color: #350425;
      opacity: .8;
      box-shadow: 0px 10px 10px rgb(202, 201, 201);
    }
    #element{
      
        font-size: 2.0rem;
        color: rgb(48, 224, 224);
        font-weight: 800;
        text-shadow: 3px 4px 20px  rgb(244, 247, 246);
      
    }

    .nav2{
      display: flex;
      justify-content: left;
      justify-items: center;
      background-color:#350425f5;
      padding-left:  25px;
      padding-top: 25px;
      

    }
    .nav2 a {
      font-size: 1.2rem;
      font-weight: 600;
      border: 1px solid rgb(226, 235, 226);
      border-radius: 5px;
      /* background-colo  r: #d12f2f; */
      margin: 5px;
      line-height: 20px;
      
      color: #f7f7f2 !important;
    }
    #btnthought{
      margin-top: 50px;
      display:flex;
      justify-content: space-evenly;
      
  
    }
    .btn{
      background-color: rgb(219, 29, 45);
      color: #f7f7f2;
      font-weight: 600;
    }
    .ptext{
    
      margin-top: 25px;
      color: yellow;
      padding: 10px 70px;
      text-align: justify;
      font-size: 1.2rem;
      font-weight: 600;
    }
    #hr{
      height: 0.2px;
            background-color: #f3f356;
      width: 100%;
      animation: hrline 1s   4 ;
    }
    @keyframes hrline {
      0%{
        width:5%;
        background-color: aquamarine;
      }
      15%{
        width:15%;
        background-color: #f3f356;
      }
      30%{
        width:30%;
        background-color: red;
      }
      45%{
        width:40%;
        background-color: blue;
      }
      60%{
        width:60%;
        background-color: cadetblue;
      }
      80%{
        width:80%;
        background-color: azure;
      }
      100%{
        width:90%;
        background-color: darkseagreen;
      }
      
          }
          /* styling for english section  */
     
    #english{
      display: none;
      color: #fff;
      
      margin-top: 170px;
           
    }
    #english ul li{
      margin-top: 20px;
      margin-left: 50px;
      font-size: 1.1rem;
      text-align: justify;
      line-height: 1.8;
      word-spacing: 5px;
    }
    .helper{
     
      height:35%;
      background-image: url(/img/book4.jpg);
      background-repeat: no-repeat;

    }
    .helper h2{
      width: 100%;
      text-align: center;
      background-color: rgb(166, 168, 168);
      
      color: #970a0a;
      font-weight: 800;
      text-shadow: 2px -2px 10px rgb(238, 64, 215);

    }
    .helper img{
      height:120px;
      width: 130px;
      border-radius: 50%;
    }
    #engthought{
        list-style-position: inside;
        
    }
 
    
   #engthought li{
                                             
        background-color: #4d3319; 
        background-image: url("/img/w2.jpg"); /* Replace with the actual path to your wood texture image */
        background-size: cover; 
      
        color: rgb(181, 248, 126); /* Text color */
        
        padding: 10px; 
        margin: 5px 0; /* Add margin for spacing between list items */
        border-radius: 15px; /* Round the corners a bit */
        font-family: Arial, sans-serif; /* Choose an appropriate font */
        font-size: 16px; /* Adjust the font size as needed */
        box-shadow: 5px -6px 5px rgb(53, 43, 43);    
    }  
    .gkitem li{
      font-size: 1.1rem;
      
      background-color: #131311a9;
      padding: 10px;
      margin-bottom: 18px;
      color: #faf9f9;
      border: 1px solid rgb(36, 35, 35) ;
      list-style: none;
      padding-left: 30px;
      border-radius: 10px;
      box-shadow: 2px -2px 5px white , -1px 2px 1px white ;
      
    }
     /* CSS For AI video Hindi Section */
   .AI iframe{
  position:fixed;
  right:5px;
  bottom: 90px;
  z-index: 1;
  border: 2px solid white;
}
    
    @media (max-width: 767px) {
         
        #btnthought{
            margin-top: 20px;
            
        
          }
          .btn{
            height: 80px;
            width: 130px;
            font-size: 1.0rem;
            padding: 10px;
            font-weight: 600;
          }
          .ptext{
    
            margin-top: 25px;
            color: yellow;
            padding: 10px 20px;
            /* text-align: justify;
            font-size: 1.2rem;
            font-weight: 600; */
          }
          #english{
                     
            margin-top: 70px;
                 
          }
          /* update */
          .btn{
            height: auto;
            width: auto;
            padding: 6px;
            font-size: 14px;
          }
          .table td{
            padding: 10px;
            font-size: 13px;
          }
          .table th{
            padding: 10px;
            font-size: 14px;
          }
          .ptext{
    
            margin-top: 15px;
            padding: 10px 20px;
             font-size: 1.0rem;
            font-weight: 500;
          }
          #element{
      
            font-size: 1.3rem;
            color: rgb(48, 224, 224);
            font-weight: 800;
            text-shadow: 3px 4px 20px  rgb(244, 247, 246);
          
        }
         #english ul li {
          margin-top: 20px;
          margin-left: 8px;
        
        }

                  }