button, input, optgroup, select, textarea {
    margin: 0;
  font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
    font-size: inherit;
    line-height: inherit;
    width: 100% !important;
    padding: 5px;
font-size: 0.9em;

border-radius: 4px;
font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
}


#additional-rows3{
  float: right !important;
}
/* Basic table styling */
 .tab3 {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 10px;
 }

 .tab3 td {
   border: 1px solid black;
   padding: 8px;
   text-align: center;
 }

 .tab3td {
   font-weight: bold;

 }

 .tab3ibox {
   width: 100%;
   padding: 5px;
 }



 .toggle-btn3 {
   display: inline-block;
   width: 35px;
   height: 35px;
   background-color: #6d1f7b;
   color: white;
   border-radius: 50%;
   text-align: center;
   font-size: 24px;
   cursor: pointer;
   line-height: 35px;
   margin: 10px 0;
  float: inline-start !important;
 }
 .toggle-btn3:hover {
     transform: scale(1.2); /* Zooms in by 20% */
 }




@media (max-width: 767px) {
  .tab22 td {
    width: 25% !important; /* Sets equal width for 4 columns */
    text-align: center !important; /* Center-aligns the content */
    padding: 10px !important; /* Adds padding for better spacing */
    box-sizing: border-box !important; /* Ensures padding does not affect width */
    word-wrap: break-word !important; /* Wraps long text within the cell */
  }

  .tab22 {
    width: 100% ; /* Ensures table takes full width of screen */
    table-layout: fixed; /* Forces equal-width columns */
    border-collapse: collapse; /* Makes table borders collapse */
  }
}



.toggle-btn {
  float: left; /* Float the button to the left */
  margin-right: 10px; /* Optional: adds space between button and text */
}





/* Specific container for the note and button */
.note-container {
display: flex;  /* Use flexbox for layout */
align-items: center;  /* Vertically center the items */
flex-wrap: wrap; /* Allow wrapping in case the content overflows */
}

/* Style for the button */
.toggle-btn {
    display: inline-block;
    width: 60px;
    height: 60px;
    background-color: #6d1f7b;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    line-height: 60px;
    margin-right: 10px;
    margin-top: 20px;
    transition: transform 0.3s ease; /* Adds a smooth transition for transform */
}

/* Hover effect for zoom in and zoom out */
.toggle-btn:hover {
    transform: scale(1.2); /* Zooms in by 20% */
}


.note {
margin: 0; /* Reset default margin for p */
flex: 1;  /* Make the paragraph take the remaining space */
}






    /* Hide table by default */
    .tab33 {
      display: none;
    }


.container{
  width: 85% !important;
}
/* Initial styles to hide .main-content off-screen */
.main-content {
  position: relative;
  transform: translateX(100%);
  opacity: 0;
  transition: opacity 5s ease;
  animation: slideIn 5s ease forwards;
}







/* Animation for sliding in from right */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Hide loader after 5 seconds */
.loader-container {
  display: none;
}




.fullscreen-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff; /* Optional background color */
  z-index: 1000;
}

.loader-container {
  position: relative;
  display: inline-block;
}

.loader {
  border: 16px solid #ffffff; /* White for the middle border */
  border-top: 16px solid #FF9933; /* Saffron */
  border-right: 16px solid #ffffff; /* White */
  border-bottom: 16px solid #138808; /* Green */
  width: 200px;
  height: 200px;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

.loader-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.loader-text img {
  width: 150px; /* Adjust image size as needed */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.main-content {
  display: none; /* Hide main content initially */
  padding: 20px;
  text-align: center;
}



.contbox{
  margin-top:300px;
}
/* For mobile and laptops (up to 1024px width) */
@media (max-width: 1024px) {
  .introbox {
    margin-top: -40px !important;
  }
}

.introbox {
  margin-top: 0px;
}

.mobbox{
  margin-top: -220px;
  margin-left: 50px;
}
.tab1{
  width: 100%;
  margin-top:40px;
}
.tab1td{

  padding: 8px;
  border: 2px solid #6d1f7b;
  padding: 8px;
  text-align: center;
  font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
}
.tab1td2{
width: 25%;
padding: 8px;
}

.tab1td3{
width: 25%;
padding: 8px;
padding: 5px;

}

.tab1ibox{
  width: 100%;
}
.subbtn1{
  width: 100%;
  padding: 10px 20px;
   background-color: #6d1f7b;
  color: white;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
}
.tab22{
  margin-top: 20px !important;
}



* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
background-color: #fddfd2 !important;
  background-image: url('./web.jpg');
  background-color: #fbe4e4; /* Fallback color */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: top;
  display: flex; /* Allows for centering */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  min-height: 100vh; /* Ensures full viewport height */
  margin: 0; /* Removes default margin */
}



@media only screen and (min-width: 768px) and (max-width: 1024px) {
body {
background-color: #fddfd2 !important;
  background-image: url('./tabnew.png');
  background-color: #fbe4e4; /* Fallback color */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: top;
  display: flex; /* Allows for centering */
  justify-content: center; /* Centers content horizontally */
  align-items: center; /* Centers content vertically */
  min-height: 100vh; /* Ensures full viewport height */
  margin: 0; /* Removes default margin */
}
.contbox {
    margin-top: 150px;
}

}



@media only screen and (max-width: 480px) {

table{
  width: 180% !important;
}

  /* Styles for mobile phones (portrait) */
  body {
  background-color: #fddfd2 !important;
    background-image: url('./mobim.jpg');
    background-color: #fbe4e4; /* Fallback color */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: top;
    display: flex; /* Allows for centering */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    min-height: 100vh; /* Ensures full viewport height */
    margin: 0; /* Removes default margin */
  }
}


@media only screen and (min-width: 481px) and (max-width: 767px) {
  /* Styles for mobile phones (landscape) */
  table{
    width: 110% !important;
  }

  body {
  background-color: #fddfd2 !important;
    background-image: url('./mobim.jpg');
    background-color: #fbe4e4; /* Fallback color */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: top;
    display: flex; /* Allows for centering */
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    min-height: 100vh; /* Ensures full viewport height */
    margin: 0; /* Removes default margin */
  }
}





.container {
  width: 70%;
  max-width: 1200px;

  padding: 20px;

  border-radius: 8px;
}

.header h1 {
  text-align: center;
  color: #6d1f7b;
  font-size: 2em;
  margin-bottom: 10px;
}

.intro p {
  text-align: justify;
  margin-bottom: 25px;
  font-family: cerapro black;
  font-size: 1.2rem;
  font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .mobintro{
    display: none;
  }
}

@media only screen and (min-width: 1025px) and (max-width: 1440px) {
  .mobintro{
    display: none;
  }
}

@media only screen and (min-width: 1441px) {
  .mobintro{
    display: none;
  }
}

.teams{
  width:115px !important;
}


@media only screen and (max-width: 480px) {

  /* Styles for mobile phones (portrait) */
  .teams{
    width:35px !important;
  }
  .mobintro p {
    text-align: left;
    margin-bottom: 25px;
    font-family: cerapro black;
    font-size: 1.5rem;
    font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
  }


  .intro{
display: none;
  }

  .mobintro{
    margin-left: 25px !important;
width: 110% !important;
padding-right: 30px;
  }
  .container {
    width: 100% !important;
    max-width: 1200px;

    padding: 20px;

    border-radius: 8px;
  }
body{
padding-right: 35px !important;
}


}



@media only screen and (min-width: 481px) and (max-width: 767px) {
  /* Styles for mobile phones (landscape) */

  .teams{
    width:35px !important;
  }

  .intro{
display: none;
  }
  .mobintro{
    margin-left: 25px !important;
width: 110% !important;
padding-right: 30px;
  }
  .mobintro p {
    text-align: left;
    margin-bottom: 25px;
    font-family: cerapro black;
    font-size: 1.5rem;
    font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
  }
  .container {
    width: 100% !important;
    max-width: 1200px;

    padding: 20px;

    border-radius: 8px;
  }
  body{
  padding-right: 35px !important;
  }
}

/* Apply line breaks only on larger screens (desktop, laptop) */
@media (min-width: 768px) {
  .break-text br {
    display: block;  /* Forces line breaks */
  }
th, td {
text-align: left !important;
}


}

/* On smaller screens (mobile), remove line breaks */
@media (max-width: 767px) {
  .break-text br {
    display: none;  /* Hides the line breaks */
  }
}



table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

th, td {
  border: 2px solid #6d1f7b;
  padding: 8px;
  text-align: center;
font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
color: #6d1f7b !important;
    font-size: 1.0rem;
    font-family: 'CeraProBlack';
}

th {


font-size: 1.0rem;
font-family: 'CeraProBlack';
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  font-size: 0.9em;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
}

.note {
  font-size: 0.9em;
  color: #6d1f7b;
  margin-top: 10px;
  text-align: left;
  float: left !important;
 font-weight: 600;
 font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
}


table{
  font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;

}

button {
  background-color: #6d1f7b;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin-top: 20px;
  display: block;
  width: 100%;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1em;
  border-radius: 4px;
  font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
}

button:hover {
  background-color: #4c125b;
}

@media (max-width: 768px) {
  .header h1 {
    font-size: 1.5em;
  }

  th, td {
    padding: 5px;
    font-size: 0.8em;
    font-family: "Cera Bold", Helvetica, Arial, sans-serif !important;
  }

  .note {
    font-size: 0.8em;
  }

  button {
    font-size: 0.9em;
    padding: 8px 16px;
  }
}