:root {
  /* Global color variables */
  --primary-color: #ff4b5c;  /* Base color for buttons */
  --hover-color: #e94f5b;    /* Darker shade for hover effect */
  --active-color: #d1454f;   /* Even darker shade for active state */
  --button-padding: 10px 20px; /* Padding for the button */
  --font-size: 14px;         /* Font size for buttons */
  --font-weight: bold;       /* Font weight for buttons */
  --border-radius: 20px;     /* Border radius for buttons */
  --shadow-color: rgba(0, 0, 0, 0.1); 
  --button-color:  #000;
  --border-color:  #000;
  --card-background-color:#000;
  --link-color:#007bff;
  --button-hover-color: #4CAF50;
  --background-color: #f7f7f7;
  --border-color:#272626;
  --background-color-matte: #373837;
  /* Shadow color */
}

body {
    font-family: Arial, sans-serif;
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
  }
.feedback-form {
    width: 80%;
    margin: 50px auto;
    background-color: var(--background-color);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 5px 10px #001002f1;
  }

.feedback-form h1 {
    text-align: center;
    margin-bottom: 20px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label1 {
    font-weight: bold;
    display: block;
  }
  .form-group p {
    font-weight: bold;
    display: block;
  }
  .form-group input[type="text"],
  .form-group input[type="email"],
  .form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  .form-group textarea {
    height: 100px;
    resize: none;
  }
  .rating {
    display: flex;
    gap: 10px;
  }
  .rating input[type="radio"] {
    display: none;
  }
  .rating label {
    font-size: 25px;
    color: #ccc;
    cursor: pointer;
  }
  .rating input[type="radio"]:checked ~ label {
    color: #FFD700;
  }
  .submit-btn {
    width: 100%;
    padding: 10px;
    background-color: var(--button-hover-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .submit-btn:hover {
    background-color: var(--button-hover-color);
  }

  .boxfeedback {
    width: 100%; /* Set the width of the container */
    margin: 0 auto; /* Center the box horizontally */
    padding: 20px;
    border: 2px solid var(--border-color); /* Add a border around the box */
    text-align: center; /* Center the content inside the box */
    background-color: var(--background-color-matte);
    color: white;
  }

.boxfeedback h1 {
    font-size: 40px;
    margin: 0; /* Remove default margin of the heading */
  }

  .h1 {
  font-size: 40px;
  }

  /* .scroll-container1 {
    width: 100%;
    height: 200px;
    overflow-y: auto; 
    border: 1px solid #ccc; 
  } */

/* Main container for the scrollable table */
.scroll-container1 {
  width: 98%;
  height: 300px;  /* Adjusted for better visibility */
  overflow-y: auto; /* Enables vertical scrolling */
  border: 1px solid var(--card-background-color);/* Light gray border */
  border-radius: 10px;  /* Rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Shadow for a subtle 3D effect */
  padding: 10px; /* Padding around the container */
  background-color: #fafafa; /* Light background for the scroll container */
  margin-top: 20px;  /* Space from top elements */
  margin-bottom: 20px;
  margin-left: 20px; /* Left margin */
  box-sizing: border-box; /* Ensure padding/margin doesn't affect width */
}


.scroll-container3 {
  width: 98%;
  overflow-y: auto; /* Enables vertical scrolling */
  border: 1px solid var(--card-background-color);/* Light gray border */
  border-radius: 10px;  /* Rounded corners */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Shadow for a subtle 3D effect */
  padding: 10px; /* Padding around the container */
  background-color: #fafafa; /* Light background for the scroll container */
  margin-top: 20px;  /* Space from top elements */
  margin-bottom: 20px;
  margin-left: 20px; /* Left margin */
  box-sizing: border-box; /* Ensure padding/margin doesn't affect width */
}


/* Styling for the table */
.organization-table {
  width: 100%;
  border-collapse: collapse;  /* Remove double borders between table cells */
}

/* Header styling */
.organization-table .header {
  font-weight: bold;
  background: linear-gradient(to right, #4b6cb7, #1ac9ec);
  color: var(--background-color);  /* Make header text white for better contrast */
  padding: 12px;
  text-align: left;
  font-size: 14px;
  border-right: 1px solid #ddd;  /* Border between columns */
}

.organization-table .header1 {
  font-weight: bold;
  background-color: var( --card-background-color);
  color: var(--background-color);  /* Make header text white for better contrast */
  padding: 12px;
  text-align: left;
  font-size: 14px;
  border-right: 1px solid #ddd;  /* Border between columns */
}

/* Remove right border from the last header cell */
.organization-table .header:last-child {
  border-right: none;
}

/* Row styling */
.organization-table tr {
  border-bottom: 1px solid #ddd;  /* Add space between rows */
}

/* Cell styling */
.organization-table td {
  padding: 12px;
  text-align: left;
  font-size: 14px;
  border-right: 1px solid #ddd;  /* Add vertical border for separation between columns */
}

/* Remove right border for the last cell in each row */
.organization-table td:last-child {
  border-right: none;
}
 
/* Link styling within the cells */
.organization-table td a {
  color: var(--link-color);  /* Blue color for links */
  text-decoration: none; /* Remove underline */
  font-weight: bold; /* Bold links */
  padding: 5px 10px;  /* Padding for better clickable area */
  border-radius: 5px;  /* Rounded corners for links */
  transition: background-color 0.3s ease;  /* Smooth transition for hover */
}

/* Link hover effect */
.organization-table td a:hover {
  background-color: #e6f7ff;  /* Light blue background on hover */
}


  .scroll-container2 {
    width: 100%;
    height: 500px;
    overflow-y: auto; /* Enables vertical scrolling */
    border: 1px solid #ccc; /* Optional: adds border around the div */
  }
  .content2 {
    height: 600px; /* Larger than the container to create scroll */
    background: linear-gradient(to bottom, #ffcccc, #ccccff);
  }