body{

   font-family: sans-serif;
   font-size: 11px;
}

a {
   /* color: #0d6efd; */
  text-decoration: none; 
}
.fa {
   font-family: var(--fa-style-family, "Font Awesome 6 Free");
   font-weight: var(--fa-style, 900);
   margin-left: 50px;
   margin-top:10px;
}
/*
#header{
   background-color: white;
   width: 100%;
   position: fixed;
   border-bottom: 1px solid #f0f0f0;
   float: left;

   margin-top:0px;
}
.header{
   background-color: white;
   width: 100%;
   position: fixed;
   border-bottom: 1px solid #f0f0f0;
   float: left;

   margin-top:0px;
}
.logo{
  width: 60px;
  height: 40px; 
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  position: fixed;
}
*/
.explore{
   /*background-color: rgb(59 130 246);*/
   color:black;
   width: 100%;
   height:auto;
   float: left;
   /*padding: 120px;*/
   text-align: center;
   /*margin-bottom: 50px;*/
   clear:both;
}

.explore h1{
  
   text-align: center;
   font-size:30;
   font-weight: bold;
}
.explore input{
   width: 20%;
   padding: 6px;
   border-radius: 6px;
   margin-top:10px;
   margin-bottom: 10px;
   color: black;
   
}
.explore button{
   padding: 6px;
   margin-left: -7px;
   background-color: white;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   box-shadow: 2px 2px orange;
}


.subjectview{
background-color:#51c2d2;
   float: left;
   margin:20px 20px 20px 20px;
  width:20%;
  height:10%;
  font-weight:700;
  font-size:16px;
   border-radius: 12px;
   text-align: center;
   padding: 30px 20px 20px 20px;
   margin-left: 10px;
   color: white; /* Set text color to white */
   justify-content:space-between;
}

   .subjectview:hover {
       background-color: #9b4c00; /* Change background color on hover */
               color:white;

   }
.subjectview img{
   text-align: center;
}
.subjectview h3{
   font-weight: bold;
}


 /*  .leftpanel{
       display: none;
   }/*
.leftpanel{
   width: 15%;
   float: left;
   border-right: 1px solid #007FFF;
   height: 90vh;
   position:fixed;
   background-color: #f0f0f0;
   overflow:auto;
   margin-top:55px;

}
.leftpanel h2{
   font-size: 15;
   font-weight: bold;
   text-align: center;
   margin-top: 10px;
   color: grey;
}
.leftpanel li{

   margin-left: -20px;
   margin-top:10px;
   list-style-type: none;
}
.leftpanel li a{
   color:#012169;
   text-decoration: none;
}
.leftpanel li a:hover .sticky{
   color:#0044cc;
}
*/
#pdf-container {
   position: relative;
   width: 100%;
   height: 90vh;
   float: left;
   margin-left: 10px;
   overflow:hidden;
}

#overlay {
   position: fixed;
   z-index: 999; /* Make sure this value is higher than the z-index of your modal */
   top: 0;
   left: 0;
   width: 81.5%;
   margin-top:4%;
   margin-left:15%;
   height: 96vh;
   background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black overlay */
   pointer-events: auto;
   overflow: auto; /* Allow scrolling through the div */
}
   #examoverlay {
      /* position: fixed;*/
       z-index:0; /* Make sure this value is higher than the z-index of your modal */
       top: 0;
       left: 0;
       width: 45%;
       margin-top:4%;
       margin-left:80%;
       height: 100px;
       background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent black overlay */
       pointer-events: auto;
       overflow: auto; /* Allow scrolling through the div */
       float: right;
       backdrop-filter: blur(10px);
       
   }

.pdfbody{
   width: 74%;
   float: right;
   margin-top:0px;
   height:76vh;
   overflow:hidden;
}
.subjectmenu{
   width: 100%;
   height: 76vh;
   
}
.subjectmenu li{
   margin-left: 10px;
   margin-top:10px;
}
.subjectmenu li a{
   color: green;
   
}
.subjectmenu li a:hover{
   color: blue;  
}
.subjectmenu li a:active{
   color: blue;  
}

.topmenu {
 width: 80%;
   height: 50px;
   background-color: none;
   text-align: center;
   margin-top: 220px;
   margin-left:45px;
   /* Add the following properties */
   /*position: -webkit-sticky; /* For Safari */
   position: absolute;
   top: 0; /* Stick to the top of the viewport */
}

.sticky{
   top:-130px;
   position:fixed;
   z-index:1000;
   background-color:white;
}
.content {
 /* Add padding-top to prevent content from being overlapped by the fixed menu */
 padding-top: 90px; /* Adjust this value according to your needs */
}

.topmenu a{
   color:#0E3386;
   font-size:15px;
   padding:10px;
   text-decoration: none;
   
}
.topmenu a:hover{
background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #09acbe 0%, #37474f 100%);
background-size: cover;
background-position: center;
   color:white;
   border-radius:8px;
}
.loginform{
   width: 30%;
   height: auto;
   padding-top: 8px;
   padding-bottom:8px;
   margin-left: 35%;
   margin-top: 18%;
   border: 1px solid #ffb471;
   border-radius: 6px;
}
.loginform input,label,select{
   width: 90%;
   margin-left: 5%;
   padding-top:6px;
   padding-bottom: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
}
input{
   border:1px solid #ffb471;
   padding-left:5px;
   padding-right:5px;
}
.login-logo{
   margin-top:-100px;
   position:fixed;
   text-align: center;
   margin-left: 43%;
   width:150px;
   height:150px;
}
.login-error{
   width: 20%;
   margin-left: 40%;
   padding: 6px;
   background-color: crimson;
   border: 1px solid #ffb471;
   color: white;
   margin-top:-50px;
   position: fixed;
   z-index: 10;
   border-radius: 6px;
}
.information{
   width: 30%;
   margin-top: 10px;
   margin-left: 35%;
   padding: 6px;
   color: coral;
}
.profile{
   float:right;
   margin-right:10px;
   margin-top:-10px;
}
button{
   
   padding-left: 6px;
   padding-right: 6px;
   background-color: #54C1D1;
   color: white;
   border-radius: 5px;
   text-align:center;
   font-size:18px;
   font-weight:500;
}
button:hover{
   background-color: chocolate;
}
.paymentview{
   width:25%;
   margin-left:35%;
   text-align:left;
   border:1px solid;
}
.paymentview label{
   width:100%;
   text-align:left;
}
.mobilemenu{
   display:none;
}
.menu {
   /*background-color: #F6EDFA;*/
   padding: 1px;
}

.menu-list {
   list-style-type: none;
   margin: 0;
   padding: 0;
   list-style: none;
}

.menu-list a {
   text-decoration: none;
   color: black;
   font-size: 12px;
   display: block;
   padding: 1px;
   transition: background-color 0.3s;
}

.menu-list a:hover {
   background-color: #F6EDFA;
   color:blue;
}

.submenu-list {
   display: none;
   background-color: #F6EDFA;
}

.submenu-list li {
   padding: 1px;
}
.submenu-list a[href*="t=<?php echo $t; ?>"] {
   color: blue; /* Change this to the desired highlight color */
}
.menu-list .submenu:hover .submenu-list {
   display: block;
}

.profilediv{
   width: 30%;
   border: 1px solid #ffb471;
   padding-left: 6px;
   padding-top: 6px;
   margin-left: 10px;
   margin-top: 10px;
   float: left;
}
.profilediv td{
   padding: 6px;
}
.popup {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7);
}

.popup-content {
   position: absolute;
   top: 20%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   text-align: center;
   width: 40%;
}

.close {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 20px;
   cursor: pointer;
}
.questions{
   width: 100%;
   margin-left: 10px;
}
.answers{
   width: 45%;
   float:right;
}
.subjects{
   width:80%;
   margin-left:10%;
}
.pkgs{
   width:90%;
   margin: 0 10% 0 10%;
  
   
   text-align:center;
}
@media only screen and (max-width: 760px) {
   
.body {
       width:90%;
  
}
   body {
 font-size: 14px;
     /* Adjust other styles for tablets */
   }
   /*
   .header {
   position: fixed;
   background-color: white;
   background-image: url('../images/whitebg.PNG');
   background-size: 100% auto; 
   background-repeat: no-repeat; 
   background-position: center;
   width: 100%;
   height: auto;
}
#header {
   position: fixed;
   background-color: white;
   background-image: url('../images/whitebg.PNG');
   background-size: 100% auto; 
   background-repeat: no-repeat;
   background-position: center; 
   width: 100%; 
   height: auto; 
}
*/
.pkgs{
   width:100%;
   margin-left:2%;
}
   div{
       width: 90%;
       margin-top: 10px;
      
   }
   .subjects{
       width: 90%;
       margin-left: 2%;
   }
   .subjectview{
       width: 94%;
       margin-top:10px;
   }

   #pdf-container{
       width: 100%;
       height: 100vh;
       margin-left: 0px;
   }
   #overlay{
       display: none;
   }
   .pdfbody{
       width: 100%;
       margin-left: 0px;
   }
   .loginform{
       width: 96%;
       margin-left: 2%;
       margin-top:22%;
   }
   h1{
       font-size: 18;
   }
   .explore{
       padding-top:30%;
       padding-bottom: 80%;
       text-align: left;
   }
   .information{
       width:100%;
       margin-left:0px;
   }
   .login-logo{
       text-align: left;
       margin-left: 35%;
       margin-top:-20%;
       width : 30%;
       height:15%;
       
       
   }
   .paymentview{
       width:130%;
       margin-left:2%;
   }
   .profile{
       display:none;
   }
   .darkoverlay{
       z-index:1002;
       width:100%;
       height:100vh;
       position: fixed;
       top: 0;
       left: 0;
       background: rgba(0, 0, 0, 0.7);
       color: white;
   }
   .darkoverlay li{
       list-style:none;
       text-align:left;
       padding-top:5px;
       padding-bottom:5px;
   }
   .topmenu{
       display:none;
   }
   .mobilemenu{
       display:block;
   }
 }
 
 


/* Header Styles */
header {
margin-top:-40px;

}
.header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
 padding-top:5px;
   border-radius: 8px; /* Optional for rounded corners */

}

.logo {
   height: 30px;
}
.login-button {
 background-color:transparent;
   color: white;
   border: none;
   padding: 5px 10px 5px 10px;
   cursor: pointer;
   border-radius: 12px;

}
/* Intro Section */
.intro {
  text-align: center;
  padding: 50px 20px;
  background: linear-gradient(
        to left,
        #51C2D2, 
        #D8E7FF, 
        #E1F3FF,
        #E4D7FF
    );
}

.intro h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.intro p {
  font-size: 18px;
  color: #666;
}


/* Courses Section */
/* Courses Section */
.courses {
  text-align: center;
  padding: 50px 20px;
}

.courses h2 {
  font-size: 30px;
  margin-bottom: 40px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 10px; /* Reduced gap */
  justify-items: center;
  margin-bottom: 40px; /* Adds space below each course-grid div */
}

.course-grid p{
   color:#000;
}

.course-item {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s;
}

.course-item:hover {
  transform: translateY(-5px);
}

.course-item img {
  width: 100px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
    .logo {
   height: 20px;
}
    

       
    header {
margin-top:-60px;

} 
.courses h2 {
    margin-top:-10px;
  font-size: 24px;
  margin-bottom:20px;
}
   .login-button {
   background-color:transparent;
   color: white;
   border: none;

   cursor: pointer;
   border-radius: 12px;
margin-left:300px;

}


   
.intro h1 {
   font-size:24px;
}
.intro p{
   font-size:14px;
}
.intro{
    height:15vh;
}
  .course-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
  }
}


@media (max-width: 480px) {
     
header {
margin-top:-60px;

} 
.courses h2 {
    margin-top:-10px;
  font-size: 24px;
  margin-bottom:20px;
} 
     .login-button{
 background-color:transparent;
   color: white;
   border: none;

   cursor: pointer;
   border-radius: 8px;
   margin-left:300px;
}
   
.intro h1 {
   font-size:24px;
}
.intro p{
   font-size:14px;
}
 .intro{
    height:20vh;
}
  .course-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns for small screens */
      gap: 15px; /* Adjust gap if needed for better spacing */
  }
}

/* Pop-up Container */
.popup-container {
    display: none; /* Initially hidden */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

/* Pop-up Content */
.popup-content {
    background-color: #fff;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    position: relative;
}

/* Close Button */
.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-popup:hover, .close-popup:focus {
    color: black;
}



.list-inline {
   display: none; /* Hide the inline list on large screens */
}

/* Medium Screens */
@media (max-width: 768px) {
   .course-grid {
       grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
   }
}

/* Small Screens */
@media (max-width: 480px) {
   .course-grid {
       display: none; /* Hide the course grid on small screens */
   }

   .list-inline {
       display: flex; /* Show the inline list on small screens */
       padding: 0;
       margin: 0;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .list-inline-item {
      
       width: 45%; /* Adjust the width to fit two items per row */
       margin-bottom: 15px; /* Add some margin for spacing */
   }

   .card {
       width: 100%;
   }
}

body {
    overflow-x: auto;
    overflow-y: auto;
}

.pdftop {
    color: white;
    padding: 40px;
    background-image: url('../images/bg1.png');
    background-size: cover;
    background-position: center;
    height: 25vh;
    margin-bottom: 100px;
    width: 100%;
    text-align: center;
    background-color: transparent;
}

.katitle {
    width: 100%;
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    color: white;
}

.semititle {
    font-size: x-large;
    font-weight: bold;
    color: black;
    text-align: center;
}

.custom-button {
    padding: 15px;
    width: 250px;
    text-align: center;
}

.back {
    color:#005b96;
    margin-top: 35px;
}
.back:hover {
    color:#00aaff;

}

.test-bank-container {
    width: 100%;
    text-align: center;
}

.tab-menu {
  margin-top:80px;
    justify-content: center;
    margin-bottom: 20px;
     flex-wrap: wrap; /* Allow wrapping for mobile view */
}

.tab-link {
    margin-top: 20%;
    background-color: #fff;
    padding: 10px 20px;
    cursor: pointer;
    border: 2px solid #f1f1f1;
    margin: 0 5px;
    font-size: 16px;
    border-radius: 8px;
    color: inherit;
}


     .tab-link:hover {
            background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #00aaff 0%, #005b96 100%); 
            color: white;
      }
            .tab-link.active {
   background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #00aaff 0%, #005b96 100%); 
   color: white;
}

.table {
    width: 80%;
    margin-left:15%;  /* Center the table container */
    border: 2px solid #ddd;
    box-shadow: 0 4px 10px 2px rgba(64, 189, 220, 0.6);
    padding: 20px; /* Adjusted padding for better spacing */
    box-sizing: border-box;
    text-align: center;
}

.subject-button {
    display: inline-block; /* Allows buttons to sit next to each other */
    margin: 10px;
border: 1px solid #40BDDC;
    box-shadow: 0 4px 10px 2px rgba(64, 189, 220, 0.6); /* Added spread radius */
    width: 20%; /* Adjust as needed to fit your design */
    padding: 15px;
    background-color: #fff;
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: center; /* Center the text inside the button */
    box-sizing: border-box;
}

/* Responsive styles for mobile screens */


/* Additional adjustments for smaller screens like iPhone 7 */
@media (max-width: 375px) {
           
header {
margin-top:-60px;

} 
.courses h2 {
    margin-top:-10px;
  font-size: 20px;
  margin-bottom:20px;
} 
    
   
.intro h1 {
   font-size:20px;
}
.intro p{
   font-size:10px;
}
 .intro{
    height:25vh;
}
  .course-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns for small screens */
      gap: 15px; /* Adjust gap if needed for better spacing */
  }
     .tab-menu {
      width:80%;
      margin-left:10%;
   margin-top:-15px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .tab-menu a{
      font-size:12px;
  }
  .tab-menu > * {
    flex: 1 1 30%; /* Each item takes up about 30% of the row */
    margin-bottom: 10px; /* Space between rows */
    box-sizing: border-box; /* Ensure padding/margin doesn't affect width */
    text-align: center; /* Center text inside each column */
  }
    a {
    font-size:8px;
   /* color: #0d6efd; */
  text-decoration: none; 
}
    .table {
        padding: 5px; /* Further reduce padding for smaller screens */
    }

    .subject-button {
        padding: 8px; /* Reduce button padding to fit better on small screens */
        font-size: 14px; /* Adjust font size for better readability */
    }
}


.subject-button:hover {
   background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #00aaff 0%, #005b96 100%); 
    color: white;
}

/* Responsive adjustments */
@media only screen and (max-width: 768px) {
     .table{
         margin-left:10%;
         width:80%;
         padding:5px;
         margin-top:35px;
     }

    .subject-button {
        width: 45%; /* Two buttons per row on mobile */
        margin:5px;
        padding: 10px;
    }
       .subject-button a{
font-size:14px;
    }
    .back {
    margin-top: 10px;
}
  .tab-menu {
      width:80%;
      margin-left:10%;
   margin-top:-10px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .tab-menu a{
      font-size:12px;
  }
  .tab-menu > * {
    flex: 1 1 30%; /* Each item takes up about 30% of the row */
    margin-bottom: 10px; /* Space between rows */
    box-sizing: border-box; /* Ensure padding/margin doesn't affect width */
    text-align: center; /* Center text inside each column */
  }
}



/*.table {
    display: table;
    width: 60%;
    margin-bottom: 20px;
    border: 2px solid #ddd;
    padding: 10px;
}

.table-row {
    /*display: table-row;
}

.table-cell {
    /*display: table-cell;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 15px;
    text-align: center;
    width: 15%;
}

.table-cell:hover {
    background-color: #007bff;
    color: white;
}
*/
@media only screen and (max-width: 768px) {
    .pdftop {
        height: 35vh;
        margin-bottom: 100px;
    }
    .custom-button {
        padding: 15px;
        text-align: center;
    }
    .test-bank-container {
        width: 100%;
        text-align: center;
    }
    .tab-link{
    background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #09acbe 0%,#37474f 100%);
        color: #fff;
         padding: 8px 8px;
        font-size: 10px;
        width: 45%;
        height: 8vh;
        float: left;
                margin-left: 3%;

    }
    
      .tab-link:hover {
            background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #00aaff 0%, #005b96 100%); 
            color: white;
      }
      .tab-link.active {
   background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #00aaff 0%, #005b96 100%); 
   color: white;
}

a {
    font-size:10px;
   /* color: #0d6efd; */
  text-decoration: none; 
}
}
/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  position: fixed;
  bottom: 0;
  width: 80%; /* Adjust as needed, or use 80% */
  background: #fff;
  color: #212529;
  font-size: 12px;
  padding: 5px 5px 5px 5px; /* Reduced padding */

  z-index: 999; /* Ensure it stays above other content */

}
#footer .title{
     float:left;
  margin-left:48%;
    font-size: 18px; /* Adjusted title font size */

}
#footer .footer1{
    width:100%;
     float:left;
  margin-left:45%;
    font-size: 12px; /* Reduced font size */

}
#footer .footer{

     float:left;
  margin-left:2%;
}
#footer .footer img {
    margin-bottom:-10px;
  width: 20px; /* Adjusted icon size */
  height: auto;
}
#footer .copyright {
   font-size: 12px; /* Reduced font size */

  float:left;
  margin-left:45%;
}


@media (max-width: 575px) {

  #footer .copyright,
  #footer .credits {
    float: none;
    -moz-text-align-last: center;
    text-align-last: center;
    padding: 3px 0;
  }
}
@media only screen and (max-width: 768px) {
  #main {
    margin-left: 0;
    padding-bottom: 60px; /* Ensure space for footer */
  }

  #footer {
    width: 100%;
  }}
@media (max-width: 767.98px) { /* iPhone 7 portrait mode */

   
      #footer {
  display:none;
  } }
  
  
@media (min-width: 1200px) {

  .toggle-sidebar #main,
  .toggle-sidebar #footer {
    margin-left: 0;
  }}