@import url('https://fonts.googleapis.com/css2?family=Lato&family=Raleway:wght@500&display=swap');

/* style.css */
body{
    font-family: 'Raleway', sans-serif;
    background-color: #090422;
}

/* Add general styling for animations */
.animated {
    opacity: 0; /* Initially set opacity to 0 for fade-in effect */
    animation: fadeIn 1s ease-in-out forwards; /* Apply fade-in animation */
  }
  
  /* Define the fade-in animation */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  .new-class{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.fake-nav{
    display: flex;
    justify-content: center;
}

.img-logo{
    width: 20%;
}

.feb-h-p{
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feb-container{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
}

.february {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Adjust gap as needed */
    margin-bottom: 35px;
} 

.feb{
    color: white;
    font-size: 130px;
    font-weight: 600;
    margin-left: -14px;
}

.feb-ui{
    color: #8ee51d;
}

.feb-p{
    color: #8fdc30;
    font-size: 25px;
    margin-left: -142px;
    margin-top: -28px;
}

.button-row {
    display: flex;
    justify-content: center;
    gap: 0px; /* Adjust the gap as needed */
    margin-bottom: 75px;
    margin-top: 40px;
}

.button-row>.col-lg-6 {
    display: flex;
    flex: 0 0 48%; /* Set a fixed width for better control */

}

.rules-col{
    justify-content: end;
}

.reg-col{
    justify-content: left;
}

/* Apply light and dark background to alternating rows */
.table-striped tbody tr:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0); /* Light color for odd rows */
    color: #ffffff;
}

.table-striped tbody tr:nth-child(even) {
    background-color: rgba(246, 246, 246, 0.1); /* Dark color for even rows */
    color: #ffffff; /* White text on dark background */
}

.table-striped tbody tr {
    margin-bottom: 10px;
}

/* Increase font size for better readability */
.table-striped th,
.table-striped td {
    font-size: 18px;
}

/* Add padding to table cells for better spacing */
.table-striped th,
.table-striped td {
    padding: 12px;
}

/* Increase the container width for the table to prevent compression */
.col {
    max-width: 100%;
    overflow-x: auto;
}

/* Style the table header background color */

.col1 {
    width: 10%;
    text-align: center;
}

.col2 {
    width: 20%;
    text-align: center;
}


.col3 {
    width: 30%;
    text-align: center;
}

.col4 {
    width: 40%;
    text-align: center;
}

.headings {
    text-align: center;
    font-size: 25px;
    background-color: rgba(54, 47, 75, 0.8); /* Transparent background color */
    color: #ffffff;
}

table {
    margin: 25px auto;
}

.learnmore,
.register {
  display: inline-block; /* Ensure the anchor tag behaves like a button */
  width: 100%; /* Ensure buttons take full width of columns */
  max-width: 300px; /* Limit the maximum width of buttons */
  padding: 15px; /* Adjust padding as desired */
  text-align: center;
  font-family: 'Lato', sans-serif;
  font-size: 20px;
  font-weight: 500;
  border: none;
  border-radius: 5px;
  text-decoration: none; /* Remove default underline for anchor tags */
}

.learnmore {
  background-color: #28036f;
  color: #9dd65b;
  cursor: pointer; /* Set cursor to pointer */
}

.learnmore:hover{
    background-color: #8ee51d;
    color: #08133a;
    text-decoration: none;
}

.register {
  background-color: #8ee51d;
  color: #08133a;
  cursor: pointer; /* Set cursor to pointer */
}

.register:hover{
    background-color: #28036f;
    color: #9dd65b;
}

#timer{
    font-size: 50px;
    color: #8ee51d;
}

.timer {
    font-size: 2em;
    color: #8ee51d;
    text-align: center;
    padding: 20px;
    border-radius: 10px;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }

.table-striped{
    margin-bottom: 100px;
}

.rules-section{
    margin-bottom: 100px;
}

.rule-text a {
    color: inherit; /* Use the inherit keyword to inherit the color from the parent */
    text-decoration: none;
    font-weight: bold;
    position: relative;
    transition: color 0.3s ease; /* Add a smooth transition effect for color changes */
}

/* Change the text color on hover */
.rule-text a:hover {
    color: #0077b5; /* Set the desired color on hover */
}

.rules{
    color: #8ee51d;
    font-size: 40px;
    font-weight: 600;
}

.rules-container{
    display: flex; /* Add flex display */
    flex-direction: column; /* Arrange rules vertically */
    gap: 20px; /* Adjust the gap between rules as needed */
}

.rules-container ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
}
  

.rule-text{
    color: white;
    font-size: 25px;
    margin-bottom: 25px;
    font-family: 'Lato', sans-serif;

}

.info-eldii{
    font-size: 20px;
    color: #8fdc30;
}

/* Define animation */
@keyframes iconAnimation {
    0% { transform: translateY(-10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

/* Apply animation to social icons */
.social-icon {
    animation: iconAnimation 0.5s ease forwards;
}

/* Style the icons */
.social-icon {
    color: #ffffff; /* Set icon color */
    font-size: 24px; /* Set icon size */
    margin-right: 10px; /* Add spacing between icons */
    transition: transform 0.3s ease; /* Add smooth transition */
}

/* Add hover effect to icons */
.social-icon:hover {
    transform: scale(1.2); /* Scale up the icon on hover */
}



@media (max-width: 1200px) {

    .img-logo{
        width: 20%;
    }

}

@media (max-width: 768px) {

    .img-logo{
        width: 30%;
    }

    .february{
        margin-top: -20%;
    }

    .feb {
        font-size: 75px; /* Adjust font size for smaller screens */
        margin-left: 0px;
        font-size: 112px;
    }

    .feb-p {
        font-size: 25px; /* Adjust font size for smaller screens */
        margin-left: 8px; /* Reset left margin */
        margin-top: -15px; /* Adjust top margin for smaller screens */
    }

    .learnmore,
    .register {
        width: 100%; /* Make buttons take full width on smaller screens */
        max-width: 300px; /* Limit the maximum width of buttons */
        padding: 15px; /* Adjust padding as desired */
        font-size: 16px; /* Adjust font size for smaller screens */
        display: flex;
        justify-content: center;
        align-items: center;
        border: solid #000000;
    }

    .button-row {
        flex-direction: column; /* Stack buttons vertically on smaller screens */
        align-items: center; /* Center buttons horizontally on smaller screens */
        margin-bottom: 30px; /* Adjust margin for spacing */
    }

    .button-row > .col-lg-6 {
        width: 100%; /* Set full width for buttons on smaller screens */
        margin-bottom: 10px; /* Adjust margin between buttons */
        justify-content: center;
    }


    .table-striped {
        margin-bottom: 47px;
        overflow-x: auto; /* Enable horizontal scrolling for small screens */
    }

    /* Adjust styles for table header and cells */
    .table-striped thead,
    .table-striped tbody,
    .table-striped th,
    .table-striped td,
    .table-striped tr {
        width: 1%; /* Take full width of the container */
    }

    /* Style individual table cells */
    .table-striped th,
    .table-striped td {
        border: none; /* Remove borders between cells */
        border-bottom: 1px solid #ddd; /* Add a border at the bottom of each cell */
        text-align: left; /* Left-align text in cells */
        padding: 8px; /* Add padding for better spacing */
        box-sizing: border-box; /* Include padding in width/height calculations */
        font-size: 15px;
    }

    /* Hide all columns except the first two (Topic and Second Column) */
    .table-striped th:not(:first-child):not(:nth-child(2)),
    .table-striped td:not(:first-child):not(:nth-child(2)) {
        display: none;
    }

    .table-striped tbody tr:nth-child(odd) {
        background-color: transparent;
        color: #ffffff;
    }

    .table-striped tbody tr:nth-child(even) {
        background-color: rgba(246, 246, 246, 0.1); /* Dark color for even rows */
        color: #ffffff;
    }

    .rules-section{
        margin-bottom: 20px;
    }

    .rules{
        text-align: center;
        font-size: 30px;
    }

    .rules-container{
        text-align: justify;
    }

    .rule-text{
        font-size: 20px;
    }

}

@media (max-width: 480px) {
    .feb{
        font-size: 21vw;
    }
    .feb-p{
        font-size: 4.9vw;
    }
}

@media (max-width: 370px) {
    #timer{
        font-size: 20px;
    }
}