.text-blue { color:#48b0ff; }      /* Full time */
.text-orange { color:#ff8c3f  }    /* Internship */
.text-gray { color:#6e6e6e; }      /* Lateral/Off-campus */
.text-red { color:#ff6700 }       /* No roles */
.text-bold { font-weight:600; }   /* numbers having values */
.text-right-align{text-align: right !important;} 
.text-left-align{text-align: left !important;} 
.padding{padding: 10px  !important;} 
.large-fonts{ font-size: x-large; } 



#section1 {
  background: linear-gradient(
         to top right,
      rgba(0, 0, 0, 1) 0%,          /* was 1.0 ? softer */
      rgba(32, 22, 12, 0.35) 55%,     /* subtle warm lift */
      rgba(0, 0, 0, 0.05) 100%        /* prevents harsh fade */
    ),
    url("../assets/images/ContactPage/Option3Landscape.jpg") center center / cover no-repeat;
}

#section2, #section3 {
  background: linear-gradient(
         to top right,
      rgba(0, 0, 0, 1) 0%,          /* was 1.0 ? softer */
      rgba(32, 22, 12, 0.35) 70%,     /* subtle warm lift */
      rgba(0, 0, 0, 0.05) 100%        /* prevents harsh fade */
    ),
    url("../assets/images/ContactPage/Option3Landscape.jpg") center center / cover no-repeat;
}

#section4 {
  background: linear-gradient(
         to top right,
      rgba(0, 0, 0, 0.85) 0%,          /* was 1.0 ? softer */
      rgba(32, 22, 12, 0.25) 55%,     /* subtle warm lift */
      rgba(0, 0, 0, 0.05) 100%        /* prevents harsh fade */
    ),
    url("../assets/images/ContactPage/Option3Landscape.jpg") center center / cover no-repeat;

    border-top: 2px solid #4d4d4d;
    width: 100svw;
    height: 100svh;
}

.section1_content {
  padding: 2rem;
  /* border-radius: 10px; */
  position: relative;
  width: 100%;
  height: 100svh;
  align-content: end;
  padding-left: 6.25dvw;
  padding-bottom: 20dvh;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.page-title {
  text-align: left;
}

.section1_text-gradient {
  background: linear-gradient(86.47deg, #855F39 -7.89%, #FFAC59 41.22%);
  -webkit-background-clip: text;
  color: transparent;
  font-family: 'Times New Roman', Times, serif;
  padding-bottom: 1.2rem;
  line-height: 0.9;
  font-size: 85px;
  line-height: 77.81px;
  font-weight: 400;
  font-family: "FreightDispProBook-Regular";
  font-weight: 400;
  font-size: 85px;
  line-height: 77.81px;
  letter-spacing: 3px;
  vertical-align: middle;
}

.job-image {
  width: 90%;
  height: auto;
  max-width: auto;
}

.section4_content{
  position: absolute;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
}


.table-container {
  /* Glassmorphism Base */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* border: 1px solid rgba(255, 255, 255, 0.15); */
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  color: #ffffff;

  width: 85dvw;
  height: 75dvh;
  overflow-x: auto;
  margin-top: 5dvw;
  border-radius: 15px;
  isolation: auto; /* Changed from isolate if present */
  -webkit-transform: translateZ(0); /* Hardware acceleration fix for iOS rendering */
}

/* Thin Scrollbar Styling */
.faqs-container::-webkit-scrollbar,
.table-container::-webkit-scrollbar
{
  width: 6px;
  height: 6px;
}
.faqs-container::-webkit-scrollbar-track,
.table-container::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.faqs-container::-webkit-scrollbar-thumb,
.table-container::-webkit-scrollbar-thumb
{
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.faqs-container::-webkit-scrollbar-thumb:hover,
.table-container::-webkit-scrollbar-thumb:hover
{
  background: rgba(255, 255, 255, 0.4);
}

.table-container table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;   /* important for responsive width */
}

/* text font */
.table-container th,
.table-container td {
  font-family: 'Inter', sans-serif;
  text-align: left;
  padding: 6px 6px;
}

.table-container th{
  padding: 12px 0px;
}

/* responsive column widths */
.table-container th:nth-child(1),
.table-container td:nth-child(1) {
  width: 40px;         /* Id column fixed width */
}

.table-container th:nth-child(2),
.table-container td:nth-child(2) {
  width: 110px;
}

.table-container th:nth-child(3),
.table-container td:nth-child(3) {
  width: 100px;
}

.table-container th:nth-child(4),
.table-container td:nth-child(4) {
  width: 100px;
}

.table-container th:nth-child(5),
.table-container td:nth-child(5) {
  width: 120px;
}

.table-container th:nth-child(6),
.table-container td:nth-child(6) {
  width: 160px;
}

.table-container th:nth-child(7),
.table-container td:nth-child(7){
  width: 90px;
}
.table-container th:nth-child(8),
.table-container td:nth-child(8){
  width: 70px;
}
.table-container th:nth-child(9),
.table-container td:nth-child(9){
  width: 90px;
}

.table-container th:nth-child(10),
.table-container td:nth-child(10){
  width: 220px;  /* eligibility column wider */
}

.table-container th:nth-child(11),
.table-container td:nth-child(11){
  width: 90px;
}

/* Alignments */
.table-container td:nth-child(7),
.table-container td:nth-child(8),
.table-container td:nth-child(9){
  text-align: right;
}
.table-container td:nth-child(11){
  text-align: center;
}
.table-container tbody {
  position: relative; 
  z-index: 5; /* Lower than header (100), but higher than container background */
  display: table-row-group; /* Forces correct table rendering on WebKit */
}

.table-container tbody td {
  position: relative;
  z-index: 1;
}
/* Colors */
.table-container th {
  /* Transient Gradient Header */
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 172, 89, 0.15)
  ) !important;
  color: #ffac59; /* Matching Gold/Orange Brand */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); 
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.table-container:has(tbody tr:hover) thead th {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}

.table-container thead th {
  color: #ffac59;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 100; /* Higher than tbody */
  /* Your existing glossy/opaque background styles here */
  background-color: rgb(24, 24, 24) !important; /* Ensure a solid fallback */

  position: sticky;
  top: 0;
}


/* Removed solid stripes for Glass transparency */
.table-container tr {
  background-color: transparent !important;
  transition: background-color 0.3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.table-container tr:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Keeping borders on last child if needed but making them subtle */
.table-container tr:last-child td:nth-child(7),
.table-container tr:last-child td:nth-child(8),
.table-container tr:last-child td:nth-child(9) {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}


/* Section2 --STARTS*/
#section2{
  padding: 10px 50px;

  width: 100svw;
  height: 100svh;
}
#section2 .faqs-wrapper{
  width: 70%;
  margin: auto;

  margin-top: 10svh;
}
#section2 .faqs-head{
  margin-bottom: 16px;
}
#section2 .faqs-head h2{
  font-family: 'Montserrat', sans-serif;
  font-size: 32px;
  color: #F0A355;

  font-weight: 600;
}
#section2 .faqs-container{
  width: 100%;
  height: 80vh;
  overflow-y: auto;
}
#section2 .faq{
  width: 100%;
  /* Glass effect */

  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 8px;

  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

  padding: 30px 40px;
  text-align: left;
  margin-bottom: 8px;
  
}
#section2 .faq .que{
  font-size: 24px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;

  color: #F0A355;

  display: flex;
  justify-content: space-between;
}
#section2 .faq .ans{
  font-size: 16px;
  margin-top: 12px;

  font-family: 'Inter', sans-serif;
}
/* Section2 --ENDS*/

@media screen and (min-width: 441px) and (max-width: 1400px) {
  .table-container {
    zoom: 0.70;
    width: 120dvw;
    height: 100dvh;
  }
}


/* Responsive adjustments for mobile (iPhone 16 Pro etc.) */
@media only screen and (max-width: 440px) {
  
  /* 1. Expand container width for mobile */
  .table-container {
    width: 90dvw;       /* Give more horizontal room */
    height: 70dvh;      /* Reduce height slightly to see context */
    margin: 0 auto;
    overflow-x: auto;  /* Critical: enable side-scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth momentum scroll for iOS */
    border: 1px solid #ddd;
    /* overscroll-behavior: contain;  */
  }

  .table-hiring{
    zoom: 0.75;
  }
 

  /* 2. Prevent text wrapping in headers to maintain structure */
  .table-container th,
  .table-container td {
    font-size: 12px;   /* Smaller font for mobile */
    padding: 8px 4px;
    /* white-space: nowrap;  */
  }

  /* 3. Adjust specific column widths for narrow screens */
  .table-container th:nth-child(6),
  .table-container td:nth-child(6) {
    width: 140px;      /* Role column */
  }

  .table-container th:nth-child(10),
  .table-container td:nth-child(10) {
    width: 180px;      /* Eligibility column */
  }

  /* 4. Fix Section Content for Mobile */
  .section1_content {
    padding-left: 5vw;
    padding-bottom: 10svh;
    align-content: center;
  }

  .section1_text-gradient {
    font-size: 40px;   /* Shrink large title */
    line-height: 1.1;
  }

  /*Comment or remove the below line to allow zoom on mobile*/
  /* 5. Lock scroll events on mobile to prevent "Pull-to-Refresh" 
     or tab switching while interacting with the table */
  /* .table-container {
    touch-action: pan-x pan-y;
    overscroll-behavior: contain;
  } */

  .faqs-container::-webkit-scrollbar,
  .table-container::-webkit-scrollbar
  {
    width: 3px !important;
    height: 3px !important; 
  }
  .table-container{
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }

  
/* responsive column widths */
.table-container th:nth-child(1),
.table-container td:nth-child(1) {
  width: 40px;         /* Id column fixed width */
}

.table-container th:nth-child(2),
.table-container td:nth-child(2) {
  width: 75px;
}

.table-container th:nth-child(3),
.table-container td:nth-child(3) {
  width: 80px;
}

.table-container th:nth-child(4),
.table-container td:nth-child(4) {
  width: 65px;
}

.table-container th:nth-child(5),
.table-container td:nth-child(5) {
  width: 90px;
}

.table-container th:nth-child(6),
.table-container td:nth-child(6) {
  width: 140px;
}

.table-container th:nth-child(7),
.table-container td:nth-child(7){
  width: 70px;
}
.table-container th:nth-child(8),
.table-container td:nth-child(8){
  width: 50px;
}
.table-container th:nth-child(9),
.table-container td:nth-child(9){
  width: 75px;
}

.table-container th:nth-child(10),
.table-container td:nth-child(10){
  width: 205px;  /* eligibility column wider */
}

.table-container th:nth-child(11),
.table-container td:nth-child(11){
  width: 60px;
}

 /* Section2 */
 #section2{
    padding: 10px 10px;
  }
  #section2 .faqs-wrapper{
    width: 95%;
    margin: auto;

    margin-top: 10svh;
  }
  /* #section2 .faqs-head{
    margin-bottom: 8px;
  } */
  #section2 .faqs-head h2{
    font-size: 16px;
  }
  #section2 .faqs-container{
    width: 100%;
    height: 80svh;
    overflow-y: auto;
  }
  #section2 .faq{
    width: 100%;
    /* Glass effect */

    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border-radius: 8px;

    padding: 18px;
    text-align: left;
    margin-bottom: 8px;
  }
  #section2 .faq .que{
    font-size: 14px;
  }
  #section2 .faq .ans{
    font-size: 12px;
  }
}


 /* Optimized for iPhone Pro Max Landscape (932 x 430) */
@media only screen and (max-device-width: 932px) and (orientation: landscape) {
  
  .table-container {
    width: 120dvw;       /* Slightly wider to utilize horizontal space */
    height: 90dvh;      /* Reduce height so it doesn't clip the header/footer */
    zoom: 0.75;        /* Balanced zoom for readability and space */
    margin-top:  5dvw; 
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /*overscroll-behavior: contain; /* Prevents background slide movement */
  }

  .table-container table {
    /* Critical: Switch to 'auto' to stop the text overlap seen in screenshots */
    table-layout: auto !important; 
    width: 100%;
    min-width: 900px;  /* Ensures columns have enough breath room */
  }

  /* 1. Fix 'Role' column overlap */
  .table-container th:nth-child(6),
  .table-container td:nth-child(6) {
    width: 160px !important; /* Fixed minimum width for the role name */
    white-space: normal !important; /* Allow wrapping to prevent bleed-through */
    padding-right: 10px;
  }

  /* 2. Fix Numeric Columns (Positions, Hired, Openings) */
  .table-container th:nth-child(7),
  .table-container td:nth-child(7),
  .table-container th:nth-child(8),
  .table-container td:nth-child(8),
  .table-container th:nth-child(9),
  .table-container td:nth-child(9) {
    width: 70px !important;
    text-align: right !important;
    padding-right: 8px;
  }

  /* 3. Fix Eligibility Column */
  .table-container th:nth-child(10),
  .table-container td:nth-child(10) {
    min-width: 200px;
    white-space: normal !important;
    font-size: 11px;
  }

  /* 4. Global text size for landscape */
  .table-container th,
  .table-container td {
    font-size: 12px;
    padding: 10px 5px;
  }
}


/* Scrollbar */
/* width */