html {
   scroll-padding-top: 120px;
   /* Adjust this value to match your navbar's height */
   scroll-behavior: smooth;
   scrollbar-width: thin;
   scrollbar-color: transparent transparent;
}

::-webkit-scrollbar {
   width: 10px;
   /* Set the width of the scrollbar */
   background: transparent;
   /* Make scrollbar track transparent */
}

::-webkit-scrollbar-thumb {
   background: transparent;
   /* Make scrollbar thumb transparent */
   border-radius: 5px;
   /* Optional: round scrollbar thumb */
}

::-webkit-scrollbar-thumb:hover {
   background: rgba(0, 0, 0, 0.15);
   /* Slightly visible on hover */
}

body {
   font-family: 'Tahoma', sans-serif;
   display: grid;
   grid-template-areas:
      'header header header header header'
      'home home home home home'
      'review review review review review'
      'jobs jobs jobs jobs jobs'
      'faq faq faq faq faq'
      'footer footer footer footer footer';
   background-color: #fff;
}

nav li,
nav a {
   text-decoration: none;
   list-style: none;
}

header {
   position: relative;
   grid-area: header;
   padding: 1rem 0;
   margin-left: 0;
   margin-bottom: 25px;
   width: 100%;
   background: black;
   border-radius: 8px;
   position: sticky;
   z-index: 1000;
   top: 0;
}

.heroBanner {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 1rem;
}

.heroBanner img {
   height: auto;
}

nav {
   /* Sticky positioning */
   top: 0;
   /* Sticks to the top */
   /* Ensures it stays above other content */
   background: rgb(0, 0, 0);
   /* Navbar background */
   border-radius: 16px;
   padding: 0.5rem 1rem;
   display: flex;
   justify-content: space-between;
   /* Align links and button neatly */
   align-items: center;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
   /* Subtle shadow */
   color: white;
}

nav ul {
   list-style: none;
   /* Remove default bullet points */
   display: flex;
   gap: 2rem;
   /* Space between nav items */
   padding: 0;
   margin: 0;
}

nav ul li {
   font-size: 16px;
}

nav ul li a {
   text-decoration: none;
   color: rgb(255, 255, 255);
   /* Default link color */
   font-weight: bold;
   transition: color 0.5s ease;
}

nav ul li a:hover {
   color: #eed2ab;
   /* Highlight on hover */
}

/* Parent container for perspective */
.Parentbutton {
   perspective: 400px;
   /* Enables 3D effect */
}

.colorFlipper {
   padding: 0.5rem 1rem;
   font-size: 14px;
   background-color: #ed152a;
   color: white;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   display: block;
   transition: transform 0.8s ease-in-out 0.2s, background-color 1.5s ease;
}

.colorFlipper:hover {
   background-color: #0056b3;
   transform: rotateX(360deg);
   /* Full flip effect */
}

.colorFlipper::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 8px;
   background: rgba(0, 0, 0, 0.1);
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease;
}

.colorFlipper:hover::after {
   opacity: 1;
   /* Show shadow or effect when hovered */
}

.Home {
   grid-area: home;
   display: grid;
   grid-template-columns: 1fr;
   gap: 2rem;
   margin: auto;
   padding: 0 0.5rem;
}

.Home>img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 8px;
}

.content {
   margin: 20px;
}

.content blockquote {
   margin: 0;
}

.homeCards {
   border-radius: 16px;
   background-color: #fff;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.homeCards>img {
   margin-left: 1rem;
   margin-bottom: 1rem;
   margin-top: 2rem;
   width: 95%;
   height: clamp(300px, 38vh, 600px);
   object-fit: cover;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.homeCards>img:hover {
   transform: translateY(-10px) rotateX(5deg);
   box-shadow: 0 12px 16px rgba(0, 0, 0, 0.5);
}

.homeCards img:nth-child(1) {
   margin-top: 0.8rem;
}

.Reviews {
   grid-area: review;
   display: grid;
   text-align: center;
   padding: 2rem;
   gap: 2rem;

}

.profile {
   display: grid;
   grid-template-areas:
      "prev image next"
      "name name name"
      "quote quote quote"
      "dislike reset like";
   grid-template-columns: auto 1fr auto;
   gap: 3.14rem;
   align-items: center;
   justify-items: center;
   padding: 1rem;
   background-color: #fff;
   border-radius: 16px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 800px;
   margin: auto;
}

.personImage {
   grid-area: image;
   border-radius: 32px;
   margin-top: 1.5rem;
   /*margin-left: calc(100%/5);*/
   padding: 0;
   margin: 0;
   width: auto;
   overflow: hidden;
   background: #f0f0f0;
}
.Image,
.quotes,
.personName,.personImage{
   opacity: 1;
   /* Default state */
   transition: all 0.5s ease-in-out;
}

.Image {
   height: 250px;
   width: 320px;
   display: block;
   object-fit: cover;
   max-width: 500px;
   overflow: hidden;
   margin-left: -40px;
   margin-top: -5px;
   margin-right: -30px;
}
.personImage:hover{
   transform: translateY(-5px);
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.profile button {
   background-color: transparent;
   border: none;
   padding: 10px;
   transition: all 0.3s ease;
}

.Counter svg,
.profile svg {
   width: 60px;
   height: 25px;
   fill: currentColor;
}

.personName {
   grid-area: name;
   margin: 0;
   padding: 0.5rem 0;
}

#Reset {
   grid-area: reset;
   margin: 0;
   padding: 8px 12px;
}

figcaption {
   grid-area: quote;
   padding: 0.5rem;
}

#Like {
   grid-area: like;
}

#nextBtn {
   grid-area: next;
}

#previousBtn svg {
   grid-area: prev;
   transform: rotate(180deg);
}

#DisLike svg {
   transform: rotate(180deg);
   grid-area: dislike;
   position: relative;
   top: 5px;
}

#Like,
#DisLike {
   flex-shrink: 0;
   overflow: hidden;
}

#Like:focus,
#DisLike:focus {
   padding: 12.5px;
   background-color: #ed152a;
   /* Button color */
   color: white;
   font-size: 16px;
   border: none;
   border-radius: 20px;
   /* Rounded edges for rectangle */
   display: flex;
   justify-content: space-between;
   /* Space out the counts */
   align-items: center;
   width: 120px;
   /* Set the width */
   transition: all 0.3s ease;
   /* Smooth transition */
}

#Like:focus svg,
#DisLike:focus svg {
   position: relative;
   right: 1rem;
}

#Like:focus .button-text,
#DisLike:focus .button-text {
   opacity: 1;
}

.button-text {
   opacity: 0;
   flex-grow: 1;
   font-size: 18px;
   margin: 0 3.5px 0 10px;
   text-align: right;
}

.profile:hover {
   box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.Jobs {
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   border-radius: 16px;
   grid-area: jobs;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   /* Ensures it takes full width for now */
   grid-template-areas:
      ".h1."
      ". searchBox ."
      "cards cards cards";
   /* Using grid areas for better positioning */
   /* Space between search form and job cards */
   gap: 2rem;
}

.Jobs svg {
   width: 25px;
   height: 100%;
   margin-right: 10px;
   position: relative;
   top: 5px;
}

.Jobs h2,
#searchBar {
   text-align: center;
}

.searchBox {
   grid-area: searchBox;
}

/* Styling for the search input */
.searchBox input[type="search"] {
   width: 65vw;
   /* Limit the maximum width */
   padding: 12px 16px;
   /* Inner padding for better usability */
   font-size: 19px;
   /* Text size for better readability */
   border: 1px solid #ccc;
   /* Light border */
   border-radius: 8px;
   /* Rounded corners */
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   /* Subtle shadow */
   outline: none;
   /* Remove the default outline */
   transition: all 0.3s ease;
   /* Smooth transition for hover and focus */
}

/* Hover effect for the search input */
.searchBox input[type="search"]:hover {
   border-color: #007BFF;
   /* Change border color on hover */
}

/* Focus effect for the search input */
.searchBox input[type="search"]:focus {
   border-color: #007BFF;
   /* Change border color on focus */
   box-shadow: 0 4px 6px rgba(0, 123, 255, 0.2);
   /* Add focus shadow */
}

/* Placeholder styling */
.searchBox input[type="search"]::placeholder {
   color: #888;
   /* Lighter color for the placeholder */
   font-style: italic;
   /* Italic style for the placeholder */
}

.h1 {
   grid-area: h1;
}

.baseCards {
   grid-area: cards;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   /* Adjust columns dynamically */
   gap: 20px;
   /* Spacing between job cards */
   justify-items: center;
   /* Centering the job cards */
   margin-top: 0px;
}

.cards {
   width: 300px;
   /* Set a fixed width for all cards */
   padding: 16px;
   /* Add padding for inner spacing */
   border: 1px solid #ccc;
   /* Add a border for visual separation */
   border-radius: 8px;
   /* Optional: Rounded corners */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   /* Optional: Add a subtle shadow */
   overflow-wrap: break-word;
   /* Ensures long words are wrapped */
   word-wrap: break-word;
   /* Fallback for older browsers */
   word-break: break-word;
   /* Break long words */
   display: inline-block;
   /* Prevents overlapping, ensures they align properly */
   text-align: left;
   /* Ensures text is aligned left */
   margin: 25px;
   /* Add space between cards */
   margin-bottom: 30px;
}

.jobFor {}

.jobRole {}

.date {}

.apply {
   display: block;
   /* Makes the button take the full width if needed */
   width: 70%;
   font-size: 14.5px;
   margin-left: 2.5rem;
   /* Ensures the button matches the div width */
   margin-top: 12px;
   /* Add some space above the button */
   padding: 8px 12px;
   /* Padding for the button */
   background-color: #ed152a;
   /* Button color */
   color: white;
   /* Button text color */
   border: none;
   /* Remove border */
   border-radius: 8px;
   /* Rounded corners for the button */
   cursor: pointer;
   /* Pointer cursor on hover */
   transition: all 0.3s ease;
}

.apply:hover {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   background-color: #c91124;
}

.faq {
   background-image: url('https://assets.phenompeople.com/CareerConnectResources/prod/AIPACICA/images/black-bg-1723425999554.png');
   background-size: cover;
   color: white;
   grid-area: faq;
   margin-top: 25px;
   margin-bottom: 20px;
   text-align: center;
   width: auto;
   height: 200px;
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 25px;
   padding: 25px;
   border: none;
   /* Add a border for visual separation */
   border-radius: 4px;
   /* Optional: Rounded corners */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.faqButton {
   width: 150px;
   height: 100px;
   padding: 12px;
   font-size: 18px;
   background-color: #ed152a;
   border: none;
   border-radius: 18px;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: none;
}

.faqButton:hover {
   background-color: #c91124;
}

.faqButton a {
   text-decoration: none;
   color: white;
}

.footer {
   background-color: #1d1d1d;
   color: white;
   grid-area: footer;
   z-index: 2;
   margin-top: -25px;
   text-align: left;
   width: auto;
   height: 200px;
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   align-items: left;
   gap: 5px;
   padding: 15px;
   border: none;
   /* Add a border for visual separation */
   border-radius: 4px;
   /* Optional: Rounded corners */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}

.footer a {
   color: #ed152a;
}

@media screen and (max-width: 768px) {
   body {
      padding: 0;
      margin: 0.25rem;
   }

   header {
      margin-left: -0.1rem;
   }

   .homeCards img {
      padding: 0;
      margin: 0.65rem;
   }

   .content {
      margin-top: 0;
   }

   .Jobs {
      width: 420px;
      margin-left: 2.5rem;
   }

   .footer,
   .faq {
      margin-right: 0.25rem;
   }

   .h1Start {
      margin-bottom: 0;
      margin-top: 0;
      text-align: center;
   }

   .contents {
      margin: 0;
      margin-left: 0.5rem;
   }

   .profile {
      gap: 4.5rem;
      width: 400px;
   }
}

.hidden {
   display: none;
}