@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Space+Grotesk:wght@300..700&display=swap');

:root {
  --font-family--body: Outfit, sans-serif;
  --color--paragraph-color: #343434;
  --font-size-desktop--body: 18px;
  --font-family--heading: "Space Grotesk", sans-serif;
  --color--heading-color: #0f252a;
  --color--light-blue: #eff6f8;
  --font-size-desktop--testimonial: 22px;
  --color--brand: #ffb606;
  --color--blue: #254edb;
  --color--red: #db2525;
  --color--white: white;
  --color--light-gray: #e9e9e9;
  --color--grey-blue: #6b8099;
  --color--deep-green: #20383e;
  --color--deep-blue: #1c375b;
  --color--light-yellow: #f1f1e9;
  --color--black: black;
}



* {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  font-family: var(--font-family--body);
  color: var(--color--paragraph-color);
  font-size: var(--font-size-desktop--body);
  letter-spacing: .5px;
  font-weight: 400;
  line-height: 29px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family--heading);
  color: var(--color--heading-color);
}

p {
  margin-bottom: 10px;
  font-size: var(--font-size-desktop--body);
}

a {
  color: var(--color--paragraph-color);
  text-decoration: none;
}

ul {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 20px;
}

img {
  object-fit: cover;
  max-width: 100%;
  display: inline-block;
}

blockquote {
  background-color: var(--color--light-blue);
  color: var(--color--heading-color);
  font-size: var(--font-size-desktop--testimonial);
  background-image: url("https://cdn.prod.website-files.com/668cb7adec02e140422345de/66ea4c86192bae1a948746ae_Quote%20Icon.svg");
  background-position: 50px 25px;
  background-repeat: no-repeat;
  background-size: auto;
  border-left-style: none;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 30px 60px 30px 160px;
  line-height: 32px;
}

.bg-light{
  background-color: var(--color--light-gray)!important;
}

.border-primary{
  border-color: var(--color--brand)!important;
}

.brand-color {
  color: var(--color--brand);
}

.font-blue {
  color: var(--color--blue);
}

.font-light{
  color:#adaeaf;
}

.font-heading-color {
  color: var(--color--heading-color);
}

/* Initial transparent navbar */
.navbar {
  transition: all 0.3s ease;
  background-color: transparent !important;
  padding: 20px 0;
}

/* Scrolled state - solid navbar */
.navbar.scrolled {
  background-color: rgba(15, 37, 42, 1) !important;
  /* Bootstrap's dark color with opacity */
  padding: 10px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Make navbar links more visible on transparent background */
.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9);
}

.btn-nav {
  color: var(--color--white);
  font-size: var(--font-size-desktop--menu-font);
  background-color: #c0c0c000;
  padding: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  transition: all 0.4s ease;
}

.btn-nav:hover {
  color: var(--color--white);
  font-size: var(--font-size-desktop--menu-font);
  padding: 0;
  border-bottom: 1px solid var(--color--white);
}

/* Optional: Hero section to demonstrate the effect */
.hero {
    background-image: url('../images/hero.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 300px;
    padding-bottom: 170px;
    overflow: hidden;
}
.gradiant-text {
  letter-spacing: -2.3px;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(#5f88a3, #51616b00 95%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 110px;
  font-weight: 700;
  line-height: 98px;
}

.gradiant-text.gradiant-text-two {
  text-shadow: 0 -21px 33px #0009;
  background-image: linear-gradient(#5e6d77 15%, #0e181f00 89%);
  margin-top: -28px;
}

@media screen and (min-width: 1280px) {
  .gradiant-text {
    font-size: 120px;
  }
}

@media screen and (min-width: 1440px) { 
  .gradiant-text {
    font-size: 130px;
  }
}
@media screen and (max-width: 768px) {
  .gradiant-text {
    font-size: 80px;
    line-height: 70px;
  }
}
@media screen and (max-width: 480px) {
  .gradiant-text {
    font-size: 60px;
    line-height: 50px;
  }
}



/* Just to create scrollable content */
.content-section {
  height: 1000px;
  padding: 50px 0;
}

.about-image{  
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    background-image: url(../images/circle.svg),
    url(../images/circle-outline.svg);
    background-position: 17% 0, 15px 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, auto;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    max-width: 629px;
    padding-top: 40px;
    padding-bottom: 30px;
    display: flex;
}

.box-quote{
  background-color: var(--color--light-blue);
    border-radius: 4px;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 30px 40px;
}

.img-uni{
  object-fit: cover;
  height: 75vh;
  width: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.overlay-text{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 100%;
  padding: 40px 40px;
  /* background-color: rgba(0, 0, 0, 0.8); */
  
}

.hover-text{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.7s ease-in-out;
}

.uni-single:hover .hover-text{
  max-height: 70px;
}

.gradient-black-transparent {
    background: linear-gradient(to top, 
        rgba(0,0,0,1) 0%, 
        rgba(0, 0, 0, 0.05) 100%);
}

@media screen and (max-width: 992px) {
  .hover-text {
    max-height: 200px;
    overflow: hidden;
  }
  
}


/* Responsive adjustments for the chart container */
  .chart-container-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 15px 0; /* Add some padding around the chart container */
        }
        .chart-container {
            width: 100%; /* Full width on smaller screens */
            max-width: 700px; /* Max width for larger screens */
            margin: 20px auto; /* Centering the chart container */
            padding: 25px; /* Increased padding inside the container */
            background-color: #ffffff; /* White background for the chart area */
            border-radius: 12px; /* More rounded corners */
            box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Softer shadow */
        }
  

        /* Responsive adjustments for the chart canvas */
        #careerChart {
            max-height: 400px; /* Max height for the chart itself to prevent it from becoming too tall on narrow screens */
        }

        /* Styling for tooltips to ensure they are readable */
        .chartjs-tooltip {
            border-radius: 6px;
            padding: 8px 12px;
        }


        /* table css  */


/* Custom Table Styling */
.custom-table {
  background-color: transparent;
  border: 1px solid var(--color--light-gray);
  border-radius: 0.5rem; /* Optional: rounded corners for the table */
  overflow: hidden; /* Needed for border-radius on table */
  box-shadow: 0 4px 15px rgba(0,0,0,0.07); /* Optional: subtle shadow */
  padding: 1rem;
}

.custom-table thead {
  background-color: var(--color--light-blue); /* Light blue background for header */
}

.custom-table th {
  font-family: var(--font-family--heading);
  color: var(--color--heading-color);
  font-weight: 600; /* Make headings a bit bolder */
  border-bottom-width: 2px; /* Thicker bottom border for headers */
  border-color: var(--color--light-gray) !important; /* Override Bootstrap's border color */
  padding: 1.2rem 0.9rem;
  vertical-align: middle;
}

.custom-table td {
  color: var(--color--paragraph-color);
  border-color: var(--color--light-gray) !important; /* Override Bootstrap's border color */
  padding: 1rem 0.9rem;
  vertical-align: middle;
}

/* Styling for "Status" column based on content */
.custom-table .status-declining {
  color: var(--color--red); /* Muted grey-blue for declining */
  font-weight: 500;
}

.custom-table .status-emerging {
  color: var(--color--blue); /* Bright blue for emerging */
  font-weight: 600; /* Bolder for emerging */
}

/* Optional: Hover effect for rows */
.custom-table tbody tr:hover {
  background-color: var(--color--light-blue) !important; /* Light blue hover, !important to override BS if needed */
  /* color: var(--color--deep-green); */ /* Optional: change text color on hover */
}


.tab-hard{
  color: var(--color--blue);
  background-color: #dbeafe;
  border-radius: 4px;
  font-size: 0.875rem;
}

.service-card{
  background-color: var(--color--white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.service-card h2{
  color: var(--color--blue);
}

.btn-green{
  background-color: var(--color--heading-color);
  color: var(--color--white);
  padding: 10px 45px;
}
/* footer  */

.footer{
  background-color: var(--color--heading-color);
    background-image: url(../images/noisy_background.webp);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 80px;
    overflow: hidden;
}

.footer-link{
  color: #7b7c7d;
}

.footer-link:hover{
  color: var(--color--brand);
}

.footer-contact{
  color: #fff;
}

.footer-contact:hover{
  color: var(--color--brand);
}