@font-face {
  font-family: "Gellix Semibold";
  src: url("https://local2u.com/fonts/Gellix-SemiBold.ttf") format("truetype"),
       url("https://local2u.com/fonts/Gellix-SemiBold.woff") format("woff"),
       url("https://local2u.com/fonts/Gellix-SemiBold.svg") format("svg");
}

@font-face {
  font-family: "Gellix Medium";
  src: url("https://local2u.com/fonts/Gellix-Medium.ttf") format("truetype"),
       url("https://local2u.com/fonts/Gellix-Medium.woff") format("woff"),
       url("https://local2u.com/fonts/Gellix-Medium.svg") format("svg");
}

@font-face {
  font-family: "Gellix Regular";
  src: url("https://local2u.com/fonts/Gellix-Regular.ttf") format("truetype"),
       url("https://local2u.com/fonts/Gellix-Regular.woff") format("woff"),
       url("https://local2u.com/fonts/Gellix-Regular.svg") format("svg");
}

@font-face {
  font-family: "Camaufalge";
  src: url("https://local2u.com/fonts/Camaufalge.ttf") format("truetype"),
       url("https://local2u.com/fonts/Camaufalge.woff2") format("woff2"),
       url("https://local2u.com/fonts/Camaufalge.svg") format("svg");
}

/* Root Variables */
:root {
  /* Colors */
  --primary-white: 255, 255, 255;
  --primary-black: 0, 0, 0;
  --primary-gray: 121, 128, 138;
  --primary-red: 255, 40, 0;
  --primary-blue: 54, 128, 229;
  --primary-green: 43, 170, 64;
  --secondary-red: 255, 238, 235;
  --secondary-blue: 239, 245, 253;
  --secondary-gray: 250, 250, 250;
  --secondary-green: 229, 245, 232;
  --rollover-blue: 48, 115, 205;
  --rollover-red: 235, 37, 0;
  --container-white-outline: 235, 235, 235;

  /* Border Radius */
  --primary-border-radius: 40px;
  --secondary-border-radius: 30px;

  /* Button Styles */
  --primary-button-blue-rollover: 231, 240, 252;
  --secondary-button-blue-rollover: 205, 223, 249;
  --primary-button-red-rollover: 255, 229, 224;
  --secondary-button-red-rollover: 255, 201, 191;
  --primary-button-green-rollover: 223, 242, 227;
  --secondary-button-green-rollover: 196, 231, 203;

  /* Widths */
  --primary-container-width: 96%;
  --secondary-container-width: 90%;
}

/* Responsive Container Widths */
@media (max-width: 1000px) {
  :root {
    --primary-container-width: 95%;
  }
}

@media (max-width: 800px) {
  :root {
    --primary-container-width: 94%;
    --secondary-container-width: 88%;
  }
}

@media (max-width: 600px) {
  :root {
    --primary-container-width: 93%;
    --secondary-container-width: 85%;
  }
}

@media (max-width: 500px) {
  :root {
    --primary-container-width: 88%;
  }
}

/* General Body Styles */
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  
}

/* Header Styles */
.header-main-container {
  background-color: rgba(var(--primary-blue), 1);
  height: 380px;
  width: 100%;
  border-bottom-left-radius: var(--primary-border-radius);
  border-bottom-right-radius: var(--primary-border-radius);
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  margin-top: 70px;
}

.header-content-wrapper {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  padding: 0 60px;
}

.header-text-head {
  font-family: "Gellix Regular";
  font-size: 100px;
  color: rgba(var(--primary-white), 1);
  text-align: left;
  margin: 50px 0;
  width: 100%;
  max-width: 900px;
  line-height: 100px;
  display: flex;
  justify-content: space-between;
}

.header-text-head span {
  font-family: "Camaufalge";
}

.header-container-background {
  display: flex;
  background-image: url("https://local2u.com/careers/images/careers-top-team.jpg");
  background-size: cover;
  background-position: center 100px;
  background-repeat: no-repeat;
  width: 100%;
  height: 700px;
  position: absolute;
  bottom: -250px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
}

/* Body Styles */
.body-main-container {
  width: 100%;
  max-width: 1150px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 40px 60px 80px;
}

/* Lesson Column Styles */
.lesson-column-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.lesson-column {
  flex: 1 1 calc(50% - 40px); /* Adjust column width with gap */
  background-color: rgba(var(--secondary-blue), 1);
  box-shadow: 20px 40px 40px rgba(0, 10, 33, 0.03);
  border-radius: var(--secondary-border-radius);
  box-sizing: border-box;
  padding: 30px;
  height: auto; /* Adjust height based on content */
}

/* Text Styles */
ul {
  font-family: "Gellix Medium";
  color: rgba(var(--primary-gray), 1);
  font-size: 16px; /* Adjusted for readability */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
}

.lesson-header-text {
  font-family: "Gellix Regular";
  color: rgba(var(--primary-black), 1);
  font-size: 34px;
  margin: 0 0 20px;
}

.lesson-body-text {
  font-family: "Gellix Medium";
  color: rgba(var(--primary-black), 1);
  font-size: 20px;
  margin: 0 0 40px;
}

.lesson-header-text span,
.getnotified-header-text span {
  font-family: "Gellix Semibold";
}

.getnotified-header-text {
  font-family: "Gellix Regular";
  color: rgba(var(--primary-black), 1);
  font-size: 34px;
  margin: 0 0 20px;
}

.getnotified-body-text {
  font-family: "Gellix Medium";
  color: rgba(var(--primary-black), 1);
  font-size: 20px;
  margin: 0 0 60px;
}

/* Responsive Adjustments */
@media (max-width: 1000px) {
  .lesson-column {
    flex-basis: calc(50% - 40px); /* Two columns per row */
  }
}

@media (max-width: 800px) {
  .header-main-container {
    border-bottom-left-radius: var(--secondary-border-radius);
    border-bottom-right-radius: var(--secondary-border-radius);
  }
  .header-content-wrapper {
    padding: 0 40px;
  }
  .body-main-container {
    padding: 0 40px;
  }
  .header-text-head {
    font-size: 45px;
    line-height: 40px;
  }
}

@media (max-width: 500px) {
  .header-container-background {
    display: none;
  }
  .header-main-container {
    display: grid;
    height: auto;
  }
  .header-text-body {
    width: 100%;
  }
}

@media (max-width: 450px) {
  .header-text-head {
    font-size: 35px;
    line-height: 30px;
  }
  .lesson-header-text {
    font-size: 30px;
  }
  .getnotified-header-text {
    font-size: 30px;
  }
  .lesson-column {
    padding: px;
  }
  .lesson-title-writ {
    font-size: 24px;
    font-family: 'Gellix Semibold';
  }
}
.lesson-title-writ {
    font-size: 24px;
    font-family: 'Gellix Semibold';
  }
}
@media (max-width: 480px) {
  .arrow-container {
    margin-top: 10px;
  }

  .move-icon {
    font-size: 1.5rem;
    width: 2.5em;
    height: 2.5em;
  }
}

/* Button Styles */
.btn, .pos-button {
  font-family: 'Gellix Semibold', sans-serif;
}

/* Card Styles */
.card-group {
  display: flex;
  scroll-behavior: smooth;
  gap: 4em;
  padding: 2em;
  justify-content: center;
  align-items: center;
  max-width: 8000px;
}
.card-group::before,
.card-group::after {
 content: '';
    position: absolute;
    top: 10;
    width: 10%; /* Adjust to fit your needs */
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    z-index: 1; /* Keep it below other content */
}

.card-group::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.card-group::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
}

.card {
  width: 340px;
  border-radius: var(--secondary-border-radius);
  padding: 2em;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
  color: rgb(var(--primary-white));
  font-family: "Gellix Semibold";
  background-color: rgb(var(--primary-blue));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .card-group::before,
  .card-group::after {
    display: none;
  }
}
.card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1em;
}

.card-icon {
  width: auto;
  height: 50px;
  margin-right: 10px;
}

.card-header h1 {
  margin: 0;
  text-align: left;
  line-height: 1.2;
  overflow: hidden;
}

.card-button {
  display: inline-block;
  background-color: rgb(var(--primary-white));
  border: 1px solid rgb(var(--primary-white));
  color: rgb(var(--primary-black));
  padding: 0.8em 1.5em;
  border-radius: 15px;
  font-size: 1em;
  margin-top: 1em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.card-button:hover {
  background-color: rgb(var(--primary-button-blue-rollover));
  border-color: rgb(var(--primary-button-blue-rollover));
}

/* Arrow Container Styles */
.arrow-container {
  position: relative;
  height: 100%;
}

.move-icon {
  cursor: pointer;
  font-size: 1.2rem;
  position: absolute;
  color: rgb(var(--primary-red));
  font-weight: 700;
  border-radius: 50%;
  width: 1.8em;
  height: 1.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(var(--secondary-red));
}

.move-prev {
  left: 485px; 
  top: 110%;
  transform: translateY(10px);
} 

.move-next {
  right: 485px; 
  top: 110%;
  transform: translateY(10px);
}

/* Mobile Styles */
@media (max-width: 768px) {
  .arrow-container {
    position: flex;
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 20px;
  }

  .move-icon {
    font-size: 2.5rem;
    width: 3em;
    height: 3em;
    position: static;
  }

  .move-prev, .move-next {
    transform: none;
  }
}

@media (max-width: 480px) {
  .arrow-container {
    margin-top: 10px;
    left: 10px;
  }

  .move-icon {
    font-size: 1.5rem;
    width: 2.5em;
    height: 2.5em;
  }
}
@media (max-width: 768px) {
  .card-carousel {
    display: none; /* Hide carousel on mobile */
  }

  .card-list {
    display: flex; /* Use flexbox for layout */
    flex-wrap: wrap; /* Allow wrapping of items */
    justify-content: center; /* Center items in the container */
}

.card-list p {
    padding: 0; /* Remove padding */
    margin: 10px; /* Space between items */
    font-family: "Gellix Semibold"; /* Ensure font is correctly set */
    color: #000; /* Optional: Set text color */
    flex: 1 1 45%; /* Allow items to grow, shrink and set a base width */
    min-width: 200px; /* Minimum width for each item */
}

/* Media query for mobile screens */
@media (max-width: 600px) {
    .card-list {
        flex-direction: column; /* Change direction to column on smaller screens */
        align-items: center; /* Center items */
    }
}