@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
  /* outline: 2px solid red; */
}

:root {
  --primary-color: #0092e8;
  --card-border-color: #efefef;
  --cards-bg-color: #ffffff;
  --background-color: #f5f7fb;
  --borderof-bulletpoint-color: #c7c7c7;
  --heading-color: #2e2e2e;
  --text-color1: #4e4e4e;
  --text-color2: #6e6e6e;
  --text-color3: #8e8e8e;
  --green-color: #00b864;
  --orange-color: #e67e00;
  --yellow-color: #ffcc00;
  --button-click-color: #0072b4;
}

body {
  background-color: var(--background-color);
}
a{
    text-decoration: none;
}
/* ========== Navbar =========> */
header {
  background-color: #f5f7fb;
  backdrop-filter: blur(10px);
  /* Applies blur */
  -webkit-backdrop-filter: blur(10px);
  /* Safari support */
  position: sticky;
  top: 0px;
  z-index: 2;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
}

.navbar-section {
  display: flex;
  align-items: center;
}

.navbar-section .dropdown:hover {
  .dropdown-mainbox {
    display: block;
  }

  .arrow-up {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
  }
}

.dropdown-mainbox {
  display: none;
  position: absolute;
  margin-top: -3px;
}

.logo {
  font-weight: bold;
  font-size: 1.2rem;
}

.logo a img {
  width: 180px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 24px;
  margin-bottom: 0px;
}

.nav-links li a {
  color: black;
  font-size: 18px;
  font-weight: 600;
  padding: 8px 16px !important;
  text-decoration: none;
}

.nav-links li a:hover {
  border-radius: 16px;
  background-color: #efefef;
  color: var(--heading-color);
}

.nav-links li a.active {
  border-radius: 16px;
  background-color: #e3f0f8;
}

.actions {
  gap: 16px;
  list-style: none;
}

.actions li a {
  color: black;
  font-size: 18px;
  font-weight: 600;
  padding: 8px 16px !important;
  text-decoration: none;
}

.actions li a:hover {
  border-radius: 16px;
  background-color: #efefef;
}

.action-btn {
  border-radius: 16px;
  color: var(--primary-color) !important;
  border: 2px solid var(--primary-color);
  padding: 8px 32px !important;
  font-size: 18px;
  font-weight: 600;
  display: block;
  text-decoration: none;
  background-color: transparent;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out;
}

.action-btn:hover {
  background-color: var(--primary-color) !important;
  color: #ffffff !important;
}

.breadcrumb {
  font-size: 40px;
  margin-left: 0px;
  display: none;
  cursor: pointer;
  margin-top: 9px;
}

/* Slide-in menu */
.slide-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: right 0.3s ease;
}

.slide-menu.open {
  right: 0;
}

.slide-links {
  list-style: none;
  text-align: left;
  padding: 32px;
  /* margin-bottom: 29px; */
  width: 100%;
}

.slide-links li {
  padding: 12px 0;
  font-size: 1.2rem;
  width: 100%;
  cursor: pointer;
}

.slide-links li a {
  text-decoration: none;
  color: var(--heading-color);
  font-weight: 700;
}

.slide-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 28px;
  cursor: pointer;
  color: #333;
}

/* Desktop dropdown */
.dropdown {
  position: relative;
  cursor: pointer;
}

.dropdown-card {
  /* display: none; */
  /* position: absolute; */
  margin-top: 10px;
  top: 135%;
  left: 0;
  background: white;
  color: black;
  min-width: 260px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  flex-direction: column;
  padding: 32px;
  z-index: 999;
  border-radius: 32px;
  width: 537px;
}

.dropdown-card a {
  padding: 10px 20px;
  text-decoration: none;
  color: black;
  display: block;
  transition: background 0.3s;
}

.dropdown-card a:hover {
  background-color: #f2f2f2;
}

.arrow-up {
  transition: transform 0.3s ease;
}

.arrow-up.rotate {
  transform: rotate(180deg);
}

#dropdownArrow {
  margin-left: 10px;
}

.nav-links li a {
  display: flex;
}

.service-link {
  margin-bottom: 32px;
}

.service-link img,
.service-link-end img {
  height: 53px;
  width: 53px;
}

.service-link-text {
  margin-left: 24px;
}

.service-link-text .main-text {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 0px;
}

.service-link-text .sub-text {
  font-size: 16px;
  margin-bottom: 0px;
  color: var(--text-color1);
}

/* Slide dropdown styles */
.slide-dropdown {
  position: relative;
  width: 100%;
  text-align: left;
}

.slide-dropdown-card {
  display: none;
  flex-direction: column;
  list-style: none;
  padding-left: 0;
  margin-top: 8px;
}

.slide-dropdown-card li a {
  display: block;
  padding: 8px 20px;
  text-decoration: none;
  color: #333;
}

.slide-dropdown-card li a:hover {
  background-color: #f0f0f0;
}

.slide-dropdown.open .slide-dropdown-card {
  display: flex;
}

@media (max-width: 1279px) {
  .nav-links {
    display: none;
  }

  .breadcrumb {
    display: block;
  }
}

@media (max-width: 767px) {
  .actions .action-btn1 {
    display: none;
  }

  .slide-actions {
    display: flex;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .slide-actions {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .dropdown:hover .dropdown-card {
    display: none;
  }
}

/* ========= Hero Section ==========> */
.hero {
  padding: 64px 0;
}

.hero-small-font {
  font-size: 16px;
  color: var(--text-color1);
  font-weight: 500;
  margin-bottom: 0px !important;
  border: 1px solid var(--borderof-bulletpoint-color);
  padding: 8px 16px;
  border-radius: 100px;
  display: inline;
}

.hero-small-count {
  color: var(--green-color);
  font-weight: 900;
}

.hero-heading {
  color: var(--heading-color);
  font-size: 40px;
  margin-top: 19px;
  margin-bottom: 24px;
  font-weight: 800;
  width: 600px;
}

.hero-description {
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 500;
  width: 470px;
}

.hero-btn {
  margin: 32px 0;
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 16px 64px;
  font-size: 18px;
  font-weight: 500;
  border: none;
  border-radius: 16px;
  gap: 12px;
  display: flex;
  align-items: center;
  box-shadow: none;
}

.hero-btn:hover {
  box-shadow: 0px 0px 16px 2px var(--primary-color);
  transition: box-shadow 0.3s ease-in-out;
}

.hero-btn:active {
  background-color: var(--button-click-color);
  box-shadow: none;
}

.hero-btn .icon {
  margin-top: 5px;
}

.hero-review-box {
  display: flex;
  gap: 8px;
}

.hero-review-box img {
  width: 90px;
  height: 42px;
}

.fa-star {
  color: var(--yellow-color);
}

.rating-point {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0px;
  margin-left: 5px;
}

.hero-review a {
  color: var(--heading-color);
  font-size: 14px;
  font-weight: 600;
}

.right-box {
  width: 652px;
  height: 572px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px;
  height: 100%;
}

.grid-item {
  padding: 24px;
}

.grid-item:nth-child(1) {
  background-color: #e2f0fa;
}

.grid-item:nth-child(2) {
  background-color: #e2f3ef;
  border-top-left-radius: 150px;
  border-bottom-left-radius: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-item:nth-child(3) {
  padding: 0px;
  background-color: #f4f1e7;
  border-top-right-radius: 150px;
  /* border-bottom-right-radius: 150px; */
}

.grid-item:nth-child(3) p {
  padding: 24px;
  width: 99%;
}

.grid-item:nth-child(3) img {
  width: 100%;
  margin-top: -68px;
}

.grid-item:nth-child(4) {
  background-color: #e2f0fa;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hero-card-heading {
  font-size: 48px;
  font-weight: 900;
  color: var(--heading-color);
}

.hero-card-second {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color2);
}

.partner-img-box {
  width: 259px;
  overflow: hidden;
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
  margin-top: 80px;
  padding-top: 24px;
}

.partner-img-box img {
  width: 40px !important;
  height: 40px !important;
  display: block !important;
}

.grid-item:nth-child(2) .top-box {
  float: right;
  align-items: end;
  display: flex;
  flex-direction: column;
}

.grid-item:nth-child(2) .big-box {
  background-color: #8ac9fe;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: bigGrow;
  height: 15px;
  width: 80px;
}

.grid-item:nth-child(2) .small-box {
  background-color: #8ac9fe;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-name: smallShrink;
  height: 15px;
  width: 40px;
  margin-top: 10px;
}

@keyframes bigGrow {

  0%,
  100% {
    width: 80px;
  }

  50% {
    width: 5px;
  }
}

@keyframes smallShrink {

  0%,
  100% {
    width: 5px;
  }

  50% {
    width: 40px;
  }
}

.grid-item:nth-child(2) h4 {
  font-size: 18px;
  font-weight: 900;
  color: var(--heading-color);
  margin-bottom: 0px;
  padding-top: 50px;
}

.skillbox-img-box {
  height: 96px;
  width: 96px;
  align-self: flex-end;
}

.skillbox-img-box img {
  height: 100%;
  width: 100%;
}

.box-4 {
  display: flex;
  align-self: flex-end;
}

.box-4 img {
  height: 48px;
  width: 48px;
}

.box-4 img:nth-child(2),
.box-4 img:nth-child(3),
.box-4 img:nth-child(4),
.box-4 img:nth-child(5) {
  margin-left: -16px;
}

/* ========== Trusted ========> */
.trusted {
  padding: 64px 0;
}

.trusted-heading {
  font-size: 24px;
  color: var(--text-color2);
  font-weight: 500;
  text-align: center;
  margin-bottom: 40px;
}

.trusted-company-wrapper {
  overflow: hidden;
  width: 100%;
}

.trusted-company-logobox {
  display: flex;
  gap: 40px;
  animation: scrollLeft 20s linear infinite;
}

.trusted-company-logobox img {
  height: 60px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.3s;
}

/* Pause animation on hover */
.trusted-company-wrapper:hover .trusted-company-logobox {
  animation-play-state: paused;
  cursor: pointer;
}

/* Keyframes for smooth infinite scroll */
@keyframes scrollLeft {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-50%);
  }
}

.trusted-company-logobox .google {
  width: 160px;
  height: 90.97px;
}

.trusted-company-logobox .microsoft {
  width: 160px;
  height: 34px;
}

.trusted-company-logobox .tcs {
  width: 160px;
  height: 34.7px;
}

.trusted-company-logobox .flipkart {
  width: 160px;
  height: 42px;
}

.trusted-company-logobox .amazon {
  width: 160px;
  height: 48px;
}

/* .trusted-company-logobox {
  display: flex;
  align-items: center;
  justify-content: space-between;
} */

/* ========== About ==========> */
.about {
  padding: 96px 0;
}

.about-img-box .about-change-imgbox {
  width: 626px;
  height: 520px;
  background-color: #0092e8;
  border-radius: 32px;
}

.image-fader-box {
  position: relative;
  width: 100%;
  /* or your preferred size */
  height: 100%;
}

.fade-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 0;
  border-radius: 32px;
}

.fade-image.show {
  opacity: 1;
  z-index: 1;
}

.about-right-box {
  padding-left: 76px;
}

.about-heading {
  font-size: 40px;
  font-weight: 900;
  color: var(--heading-color);
}

.about-description {
  margin-top: 24px;
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 500;
}

.about-description strong {
  color: var(--heading-color);
}

.about-btn {
  margin-top: 32px;
  background-color: var(--primary-color);
  color: #ffffff;
  padding: 16px 64px;
  font-size: 18px;
  font-weight: 500;
  border: none;
  border-radius: 16px;
  gap: 12px;
  display: flex;
  align-items: center;
}

.about-btn:hover {
  box-shadow: 0px 0px 16px 2px var(--primary-color);
  transition: box-shadow 0.3s ease-in-out;
}

.about-btn:active {
  background-color: var(--button-click-color);
  box-shadow: none;
}

.about-btn .icon {
  margin-top: 5px;
}

/* ============ impact ==========> */
.impact {
  padding: 96px 0;
}

.title {
  font-size: 40px;
  color: var(--heading-color);
  margin-bottom: 0px;
  font-weight: 900;
  text-align: center;
}

.impact-row {
  margin-top: 64px;
}

/* .lives-impact {
    height: 241px;
    background-color: #FFFFFF;
    border-radius: 32px;
    padding: 32px;
} */

.lives-impact {
  height: 241px;
  width: 648px;
  background-color: #ffffff;
  border-radius: 32px;
  padding: 32px;
  margin-left: -5px;
}

.impact-row-2 {
  margin-top: 32px;
  justify-content: space-around;
}

.impact-small-box {
  height: 171px;
  width: 212px;
  border-radius: 32px;
  padding: 32px;
}

.engage {
  background-color: #f4f1e7;
}

.placed {
  background-color: #e2f3ef;
}

.college {
  background-color: #f4ebe7;
}

.lives-impact .heading {
  font-size: 128px;
  color: var(--primary-color);
  font-weight: 900;
  margin-bottom: 0px;
}

.lives-impact .small-text {
  font-size: 24px;
  color: var(--text-color1);
  font-weight: 900;
  margin-bottom: 0px;
}

.impact-small-box .heading {
  font-size: 48px;
  color: var(--primary-color);
  font-weight: 900;
  margin-bottom: 2px;
  text-align: center;
}

.impact-small-box .small-text {
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 900;
  text-align: center;
}

/* ========== Service ==========> */
.service {
  padding: 96px 0;
}

.service-box {
  margin-top: 64px;
}

.service-card {
  background-color: #ffffff;
  border-radius: 32px;
  padding: 32px;
  border: 2px solid var(--card-border-color);
  margin-bottom: 32px;
}

.service-card-hover {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.service-card-hover:hover {
  transform: scale(1.04);
}

/* Rotate and color change on hover */
.service-card-hover:hover .arrow-icon {
  transform: rotate(360deg);
  transition: transform 0.6s ease, color 0.3s ease;
  color: #007bff;
  /* Change to your desired color (e.g. blue) */
}

/* Optional: transition setup for initial state */
.arrow-icon {
  transition: transform 0.6s ease, color 0.3s ease;
  transform-origin: center;
}


.service-heading {
  font-size: 24px;
  font-weight: 900;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.service-description {
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 600;
  margin-bottom: 0px;
}

.service-arrow-box {
  height: 64px;
  width: 64px;
  border: 1px solid var(--borderof-bulletpoint-color);
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.service-left {
  width: 467px;
}

.service-arrow-box .arrow-icon {
  color: var(--borderof-bulletpoint-color);
  font-size: 30px;
  rotate: 45deg;
}

.service-arrow-box .arrow-icon.active {
  color: var(--primary-color) !important;
}

.service-image-box {
  margin-top: 24px;
  height: 267px;
  display: flex;
  justify-content: center;
}

.service-image-alt {
  width: 237px;
}

.service-card-alt {
  background-color: #ffffff;
  border-radius: 32px;
  padding: 32px;
  border: 2px solid var(--card-border-color);
  height: 427px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-card-soon {
  background-color: #ffffff;
  border-radius: 32px;
  padding: 32px;
  border: 2px solid var(--card-border-color);
  height: 427px;
}

.soon-card-img-box {
  width: 100%;
  height: 96%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.soon-card-img-box img {
  width: 70%;
  height: 70%;
}

/* ========== University =========> */
.university {
  padding: 96px 0;
}

.university-title {
  margin-bottom: 24px;
}

.university-description {
  width: 793px;
  text-align: center;
  margin: auto;
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 500;
}

.university-scroll-box {
  overflow: hidden;
  width: 100%;
}

.university-scroll {
  display: flex;
  gap: 40px;
  animation: scrollLeft 20s linear infinite;
}

.university-scroll-alt {
  display: flex;
  gap: 40px;
  animation: scrollRight 20s linear infinite;
}

.university-scroll-box:hover .university-scroll-alt {
  /* animation-play-state: paused; */
  cursor: pointer;
}

@keyframes scrollRight {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(0%);
  }
}

.university-scroll img {
  height: 160px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.university-scroll-alt img {
  height: 160px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.3s;
}

/* Pause animation on hover */
.university-scroll-box:hover .university-scroll {
  /* animation-play-state: paused; */
  cursor: pointer;
}

.university-description strong {
  color: var(--heading-color);
}

.university-row {
  margin-top: 64px;
}

.university-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ======== Testimonial ==========> */
.testimonial {
  padding: 96px 0;
}

.testimonial-title {
  margin-bottom: 64px;
}

.testimonial-odd {
  height: 665px;
  margin-top: 50px;
  overflow: hidden;
  position: relative;
}

.testimonial-even {
  height: 750px;
  overflow: hidden;
  position: relative;
}

.testimonial-odd:hover .scrolling-wrapper,
.testimonial-even:hover .scrolling-wrapper-even {
  animation-play-state: paused;
  cursor: pointer;
}

.scrolling-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: scrollUp 30s linear infinite;
}

.scrolling-wrapper-even {
  display: flex;
  flex-direction: column;
  gap: 5px;
  animation: scrollDown 30s linear infinite;
}

@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }

  100% {
    transform: translateY(0%);
  }
}

/* Overlay styles */
.testimonial-overlay {
  position: absolute;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
  pointer-events: none;
  /* So it doesn't block interactions */
}

.top-overlay {
  top: 0;
  background: linear-gradient(to bottom, #f5f7fb, rgba(255, 255, 255, 0));
}

.bottom-overlay {
  bottom: 0;
  background: linear-gradient(to top, #f5f7fb, rgba(255, 255, 255, 0));
}

.user-small-screen {
  display: none;
}

.testimonial-card {
  background-color: #ffffff;
  padding: 24px;
  border-radius: 32px;
  margin-bottom: 24px;
  border: 2px solid var(--card-border-color);
}

.user-small-screen .testimonial-col .slick-track {
  display: flex !important;
}

.user-small-screen .testimonial-col .slick-slide {
  display: flex !important;
  align-items: center !important;
  /* ✅ Center vertically */
  justify-content: center;
  /* Optional: center horizontally */
  height: 100%;
}

.user-small-screen .testimonial-col .slick-slide>div {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.top-course-box .slick-track {
  display: flex;
  align-items: center;
}

.top-course-card {
  margin: 0 10px;
}

.top-course-slider {
  margin: 20px 0;
}

.custom-arrow {
  background: #0092e8;
  border: none;
  color: white;
  padding: 10px;
  height: 35px;
  width: 35px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 10px;
  z-index: 10;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.slick-prev {
  left: -35px;
}

.slick-next {
  right: -35px;
}

@media (max-width: 768px) {
  .slick-prev {
    left: 0;
  }

  .top-course-card-wrapper {
    padding: 20px;
  }

  .slick-next {
    right: 0;
  }
}

.rating-star-box {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

.rating-star-box .fa-star {
  font-size: 22px;
}

.review {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-color1);
  margin-bottom: 32px;
}

.review-user {
  display: flex;
  gap: 8px;
  align-items: center;
}

.review-user img {
  height: 54px;
  width: 54px;
}

.review-user .user-dtl {
  display: flex;
  flex-direction: column;
}

.user-dtl .name {
  font-size: 20px;
  color: var(--heading-color);
  font-weight: 900;
  margin-bottom: 1px;
}

.user-dtl .designation {
  font-size: 16px;
  color: var(--text-color2);
  margin-bottom: 0px;
  font-weight: 600;
}

/* ========== CTA ===========> */
.cta {
  padding: 96px 0;
}

.cta-card {
  padding: 64px;
  border-radius: 32px;
  border: none;
  background-color: var(--primary-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-image: url("assets/CTA_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 110%;
}

.cta-heading {
  font-size: 40px;
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 16px;
}

.cta-description {
  font-size: 18px;
  color: var(--background-color);
  font-weight: 500;
  width: 725px;
  margin: auto;
}

.cta-btn {
  margin-top: 32px;
  background-color: var(--background-color);
  color: var(--heading-color);
  padding: 16px 64px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 16px;
  gap: 12px;
  display: flex;
  align-items: center;
  text-align: center;
}

.cta-btn:hover {
  box-shadow: 0px 0px 16px 2px var(--background-color);
  transition: box-shadow 0.3s ease-in-out;
}

.cta-btn:active {
  background-color: #e0f2fc;
  box-shadow: none;
}

/* ========== Certifate ==========> */
.certificate-card {
  width: 820px;
  padding: 32px;
  border-radius: 32px;
  border: 1px solid var(--card-border-color);
  background-color: #ffffff;
  margin: auto;
}

.c-img-mini {
  display: flex;
  align-items: center;
  column-gap: 20px;
}

.certificate-card .heading {
  font-size: 24px;
  color: var(--heading-color);
  font-weight: 900;
  text-align: center;
}

.cerificate-img-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px;
}

.cerificate-img-box img {
  height: 60px;
}

/* ========= Footer =========> */
.footer {
  padding: 96px 0 40px 0;
}

.footer-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-links .navbar-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 30px;
}

.address {
  padding: 48px 0;
}

.add-card h5 {
  font-size: 20px;
  color: var(--heading-color);
  font-weight: 900;
  margin-bottom: 16px;
}

.add-card p {
  font-size: 18px;
  color: var(--text-color2);
  font-weight: 600;
  margin-bottom: 0px;
}

.add-card a {
  text-decoration: none;
  color: var(--text-color2);
}

.map {
  height: 240px;
  border-radius: 32px;
}

iframe {
  height: 100%;
  width: 100%;
  border-radius: 32px;
}

.copyright {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.copy p {
  font-size: 18px;
  color: var(--heading-color);
  font-weight: 500;
  margin-bottom: 0px;
}

.copy .fa-heart {
  margin: 0 5px;
}

.copy-right {
  color: var(--text-color1);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 0px;
}

.copy-right .strong {
  color: var(--heading-color);
  font-weight: 600;
}

.social-icons {
  display: flex;
  align-items: center;
  font-size: 26px;
  gap: 20px;
}

.hr-bar {
  background-color: #c7c7c7;
  height: 2px;
  width: 79%;
  border-radius: 25%;
}

/* ===================== Screen 1280 ==================> */
@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .container {
    max-width: 1185px;
  }

  .hero-heading {
    font-size: 44px;
    margin-top: 16px;
    width: 500px;
  }

  .left-box {
    width: 500px;
  }

  .right-box {
    width: 650px;
    margin-left: 30px;
  }

  .trusted-heading {
    margin-bottom: 32px;
  }

  .about-img-box .about-change-imgbox {
    width: 528px;
    height: 438px;
  }

  .about-heading {
    margin-bottom: 0px;
  }

  .about-right-box {
    padding-left: 19px;
  }

  .lives-impact {
    width: 583px;
    margin-left: -8px;
  }

  .lives-impact .heading {
    font-size: 112px;
  }

  .impact-small-box .heading {
    font-size: 40px;
    text-align: center;
  }

  .impact-small-box {
    height: 162px;
    width: 188px;
  }

  .lives-impact .small-text {
    margin-bottom: 0px;
    margin-top: 9px;
  }

  .impact-img {
    height: 434px;
    width: 567px;
  }

  .service-arrow-box {
    height: 60px;
  }

  .service-card-box {
    margin-bottom: 32px;
  }

  .service-card-alt {
    height: 450px;
  }

  .service-card-soon {
    height: 450px;
  }

  .service-card-soon img {
    width: 314px;
    height: 296px;
    margin-top: 25px;
  }
}

/* ===================== Screen 768 ==================> */
@media screen and (min-width: 768px) and (max-width: 1279px) {

  /* .main-nav {
        max-width: 768px;
    } */
  .cerificate-img-box,
  .c-img-mini {
    gap: 5px;
  }

  .container {
    max-width: 768px;
    padding: 0 32px;
  }

  .hamberger-btn {
    display: block;
  }

  .slide-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 375px;
    height: 100%;
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: right 0.3s ease;
  }

  .slide-dropdown-card li a {
    padding: 0;
  }

  .slide-links {
    padding: 24px 32px !important;
  }

  .slide-links li {
    padding: 8px 16px;
  }

  .slide-links li:hover {
    background-color: var(--card-border-color);
    border-radius: 8px;
  }

  .slide-links li a.active>.slide-links li {
    background-color: var(--card-border-color);
    border-radius: 8px;
  }

  .slide-links .slide-dropdown {
    display: flex;
    justify-content: space-between;
  }

  /* .slide-links .slide-dropdown:hover .arrow-up {
        rotate: 90deg;
    } */

  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background-color: transparent;
  }

  .navbar-section {
    height: 50px;
  }

  .close-btn {
    font-size: 40px;
    top: 3px;
  }

  .small-screen-title {
    font-size: 18px;
    font-weight: 700;
    margin-top: 30px;
  }

  .hero {
    padding: 48px 0;
  }

  .left-box {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-heading {
    font-size: 40px;
    width: 100%;
    margin-top: 16px;
    margin-bottom: 24px;
  }

  .hero-description {
    width: 662px;
    margin: auto;
  }

  .hero-row .right-box {
    display: flex;
    justify-content: center;
  }

  .hero-row .right-box .grid-container {
    width: 652px;
  }

  .right-box {
    margin-top: 48px;
    width: 100%;
  }

  .hero-card-second {
    width: 266px;
  }

  .trusted {
    padding: 48px 0;
  }

  .trusted-heading {
    margin-bottom: 32px;
  }

  .about {
    padding: 48px 0;
  }

  .about-right-box {
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .about-heading {
    margin-bottom: 0px;
  }

  .about-description {
    text-align: center;
    padding: 0 20px;
    margin-bottom: 0px;
  }

  .about-img-box {
    margin-top: 48px;
  }

  .about-img-box .about-change-imgbox {
    width: 100%;
  }

  .impact {
    padding: 48px 0;
  }

  .impact-row {
    margin-top: 48px;
    padding: 0 30px;
  }

  .impact-img {
    margin-top: 32px;
    width: 102%;
    margin-left: -5px;
  }

  .impact-small-box .heading {
    text-align: center;
  }

  /* .lives-impact {
        width: 645px;
    } */

  .lives-impact {
    width: 653px;
  }

  .service {
    padding: 48px 0;
  }

  .service-box {
    margin-top: 48px;
    padding: 0 30px;
  }

  .service-card,
  .service-card-alt {
    margin-bottom: 32px;
  }

  .soon-card-img-box img {
    width: 40%;
  }

  .university {
    padding: 48px 0;
  }

  .university-row {
    margin-top: 48px;
  }

  .university-logo-box img {
    width: 128px;
    height: 128px;
  }

  .university-scroll img,
  .university-scroll-alt img {
    height: 128px;
  }

  .testimonial {
    padding: 48px 0;
  }

  .testimonial-title {
    margin-bottom: 48px;
  }

  .user-big-screen {
    display: none;
  }

  .user-small-screen {
    display: block;
  }

  .user-small-screen .testimonial-col .testimonial-card {
    width: 368px;
    margin: 0px 20px;
  }

  .user-small-screen .testimonial-col .testimonial-card {
    margin: 0 15px;
    /* gap between slides */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    /* ensure full height for centering */
  }

  .slick-slide {
    display: flex !important;
    align-items: center;
    height: 100%;
  }

  .slick-track {
    display: flex;
    align-items: center;
  }

  .cta {
    padding: 48px 0;
  }

  .cta-card {
    padding: 48px;
    background-size: 190%;
  }

  .cta-description {
    width: auto;
  }

  .certificate-card {
    width: 704px;
  }

  .footer {
    padding: 48px 0;
  }

  .footer-nav {
    flex-direction: column;
  }

  .footer-links {
    margin-top: 48px;
  }

  .foot-address {
    width: 556px;
    margin: auto;
  }

  .map {
    margin-top: 64px;
  }

  .copy {
    width: 50%;
  }

  .copy-right-box {
    width: 50%;
  }

  .copy-right {
    text-align: right;
  }

  .social-icons {
    margin-top: 195px;
    position: absolute;
    margin-left: 32%;
    padding-bottom: 48px;
  }

  .trusted-company-logobox {
    animation: scrollLeft 10s linear infinite;
  }

  /* --- this is temporary ----- */
  .trusted-company-logobox .microsoft {
    width: 160px;
    height: 34px;
    display: none;
  }

  .university-description {
    width: auto;
    text-align: center;
    margin: auto;
    font-size: 18px;
    color: var(--text-color1);
    font-weight: 500;
  }

  .service-link-small {
    display: flex;
    align-items: center;
  }

  .service-link-small img {
    width: 24px;
    height: 24px;
  }

  .service-link-small .main-text {
    font-size: 16px;
    margin-left: 24px;
    margin-bottom: 0px;
  }

  .add-card {
    text-align: center;
  }
}

/* ===================== Screen 768 ==================> */
@media screen and (max-width: 767px) {
  .navbar {
    padding: 24px 16px;
  }

  .slide-menu {
    position: fixed;
    padding-top: 32px;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    justify-content: flex-start;
  }

  .breadcrumb {
    font-size: 33px;
    margin-top: -8px;
    height: 22px;
  }

  .small-screen-title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 24px;
  }

  .slide-links .slide-dropdown {
    display: flex;
    justify-content: space-between;
  }

  .slide-links li:hover {
    background-color: var(--card-border-color);
    border-radius: 8px;
  }

  .slide-dropdown-card li a:hover {
    background-color: #f0f0f0;
    border-radius: 8px;
  }

  .close-btn {
    top: 12px;
    font-size: 35px;
  }

  .slide-links {
    padding: 24px 32px;
    margin-bottom: 0px;
  }

  .slide-links li a {
    font-size: 18px;
  }

  .slide-links li {
    padding: 8px 16px;
    border-radius: 8px;
  }

  .action-btn {
    font-size: 16px;
  }

  .slide-actions {
    display: flex;
    margin-top: 1px;
    margin-bottom: 32px;
  }

  .sign-in {
    background-color: #0092e8;
    color: #ffffff !important;
  }

  .slide-actions .action-btn.sign-in {
    order: -1;
  }

  .service-link-small {
    display: flex;
    align-items: center;
  }

  .service-link-small img {
    width: 24px;
    height: 24px;
  }

  .service-link-small .main-text {
    font-size: 16px;
    margin-left: 24px;
    margin-bottom: 0px;
  }

  .hero {
    padding: 32px 16px;
  }

  .left-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .hero-small-font {
    font-size: 12px;
  }

  .hero-heading {
    font-size: 32px;
    margin-top: 8px;
    margin-bottom: 16px;
    width: 340px;
    text-align: center;
  }

  .hero-description {
    font-size: 16px;
    color: var(--text-color1);
    font-weight: 500;
    width: 350px;
    text-align: center;
    margin-bottom: 0px;
  }

  .hero-btn {
    margin-top: 32px;
    margin-bottom: 24px;
    padding: 12px 48px;
    font-size: 16px;
  }

  .hero-btn .icon {
    margin-top: 2px;
  }

  .rating-point {
    font-size: 12px;
  }

  .hero-review a {
    font-size: 12px;
  }

  .hero-row .right-box {
    display: none;
  }

  .trusted {
    padding: 32px 16px;
  }

  .trusted .container {
    padding: 0;
  }

  .trusted-heading {
    font-size: 18px;
    margin-bottom: 24px;
  }

  .trusted-company-logobox .google {
    width: 96px;
    /* height: 33px; */
  }

  .trusted-company-logobox .microsoft {
    width: 96px;
    height: 34px;
  }

  .trusted-company-logobox .tcs {
    width: 96px;
    height: 34.7px;
  }

  .trusted-company-logobox .flipkart {
    width: 96px;
    height: 42px;
  }

  .trusted-company-logobox .amazon {
    width: 96px;
    height: 48px;
  }

  .about {
    padding: 32px 16px;
  }

  .about .container {
    padding: 0;
  }

  .about-heading {
    font-size: 34px;
    text-align: center;
  }

  .about-description {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .about-right-box {
    padding-left: 16px;
    text-align: center;
  }

  .about-btn {
    padding: 12px 48px;
    font-size: 16px;
    margin: auto;
  }

  .about-btn .icon {
    margin-top: 2px;
  }

  .about-img-box .about-change-imgbox {
    width: 343px;
    height: 240px;
    margin-top: 32px;
  }

  .impact {
    padding: 32px 16px;
  }

  .title {
    font-size: 32px;
  }

  .impact-row {
    margin-top: 32px;
  }

  .lives-impact {
    height: 147px;
    padding: 24px;
    width: 343px;
    margin-left: 0px;
  }

  .lives-impact .heading {
    font-size: 65px;
    margin-left: -40px;
    text-align: center;
  }

  .lives-impact .small-text {
    font-size: 18px;
  }

  .impact-row .num-cards,
  .num-img {
    padding: 0;
  }

  .impact-row-2 {
    margin-top: 24px;
  }

  .impact-small-box {
    height: 117px;
    width: 343px;
    border-radius: 32px;
    padding: 24px;
    display: flex;
    margin-bottom: 24px;
    justify-content: space-between;
    align-items: center;
  }

  .impact-img {
    /* width: 343px;
    height: 240px; */
    margin-top: 8px;
  }

  .service {
    padding: 32px 16px;
  }

  .service-box {
    margin-top: 32px;
  }

  .service-left {
    width: 286px;
  }

  .service-arrow-box {
    height: 42px;
    width: 55px;
    border-radius: 8px;
  }

  .service-arrow-box .arrow-icon {
    font-size: 25px;
  }

  .service-heading {
    font-size: 18px;
  }

  .service-description {
    font-size: 16px;
  }

  /* .service-image {
    margin-top: 24px;
    width: 279px;
  } */

  .service-skill {
    width: 279px;
  }

  .ser-card {
    padding: 0;
  }

  .service-card-alt {
    margin-bottom: 32px;
  }

  .service-card-alt img {
    width: 295px;
  }

  .service-card-soon img {
    width: 323px;
    margin-left: -17px;
  }

  .service-card-soon .service-heading {
    font-size: 24px;
  }

  .university {
    padding: 32px 16px;
  }

  .university .container {
    padding: 0px;
  }

  .university-description {
    width: auto;
    font-size: 16px;
  }

  .university-row {
    margin-top: 32px;
  }

  .university-scroll img,
  .university-scroll-alt img {
    height: 128px;
  }

  .testimonial {
    padding: 32px 16px;
  }

  .testimonial-title {
    margin-bottom: 32px;
  }

  .review {
    font-size: 16px;
  }

  .user-dtl .name {
    font-size: 18px;
  }

  .testimonial .container {
    padding: 0px;
  }

  .review-user img {
    height: 51px;
    width: 51px;
  }

  .testimonial-odd {
    margin-top: 0px;
  }

  .cta {
    padding: 32px 0;
  }

  .cta-card {
    padding: 32px;
    background-size: 420%;
  }

  .cta-heading {
    font-size: 32px;
  }

  .cta-description {
    font-size: 16px;
  }

  .cta-btn {
    padding: 12px 48px;
    font-size: 16px;
  }

  .cta-description {
    width: auto;
  }

  .certificate-card {
    width: 100%;
  }

  .cerificate-img-box {
    flex-direction: column;
    align-items: normal;
    justify-content: space-between;
  }

  .c-img-mini {
    display: flex;
    justify-content: space-between;
  }

  .c-img-mini-1 {
    display: block;
    margin: 10px auto;
    height: 120px !important;
  }

  .footer {
    padding: 32px 16px;
  }

  .footer-nav {
    flex-direction: column;
  }

  .footer-links .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }

  .navbar-brand {
    margin-right: 0px;
  }

  .navbar-brand img {
    width: 192px;
    height: 60px;
  }

  .footer-links {
    margin-top: 32px;
  }

  .address {
    padding: 32px 0;
  }

  .foot-address {
    text-align: center;
  }

  .add-card {
    margin-bottom: 32px;
    text-align: center;
  }

  .map-pre {
    padding: 0px;
  }

  .copyright {
    margin-top: 32px;
    flex-direction: column;
    text-align: center;
    width: 340px;
  }

  .copy-small {
    margin-bottom: 32px;
  }

  /* .cerificate-img-box img {
    width: calc(50% - 8px);
  } */
}

/* ======================== Campus Placement Page ======================> */
.campus-placehero {
  padding: 96px 0px;
}

.campus-place-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.campus-right-box {
  width: 600px;
  height: 480px;
  padding: 0px;
}

.campus-right-box img {
  width: 100%;
  height: 100%;
}

.campus-place-row .left-box .hero-btn {
  margin-top: 32px;
  margin-bottom: 0px;
}

.campus-heading,
.campus-desc {
  width: 656px;
}

/* -------what we offer -------- */

.weoffer {
  padding: 96px 0;
}

.offer-box {
  margin-top: 64px;
}

.smart-sol-box {
  align-items: center;
}

.offer-card {
  padding: 32px;
  border: none;
  border-radius: 32px;
  background-color: #ffffff;
  text-align: center;
  border: 2px solid var(--card-border-color);
}

.offer-card img {
  width: 80px;
  height: 80px;
}

.offer-card .title {
  font-size: 24px;
  font-weight: 900;
  color: var(--heading-color);
  width: auto;
  margin: auto;
  /* margin-top: 32px;
  margin-bottom: 16px; */
}

.offer-card img {
  margin-bottom: 32px;
}

/* .offer-card .title {
    width: auto;
    margin: auto;
  } */

.offer-card .description {
  margin-top: 16px;
}

.offer-card .description {
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 500;
  margin-bottom: 0px;
}

/* -------- how it works --------- */

.howitworks {
  padding: 96px 0;
}

.howitwok-card {
  padding: 32px;
  border: none;
  border-radius: 32px;
}

.howitwok-card .step {
  font-size: 18px;
  color: #0092e8;
  font-weight: 600;
}

.howitwok-card .title {
  font-size: 24px;
  font-weight: 900;
  color: var(--heading-color);
  margin-top: 16px;
  margin-bottom: 32px;
  display: flex;
}

.howitwok-card .description {
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 500;
  margin-bottom: 0px;
}

.offer-box .step-1,
.offer-box .step-3 {
  background-color: #f4f1e7;
}

.offer-box .step-2 {
  background-color: #e2f3ef;
}

.get-started-btn {
  margin-top: 64px;
  margin-bottom: 0px;
}

/* ---------- Stats ----------- */
.stat-img-box {
  width: 600px;
  height: 425px;
}

.stat-img-box img {
  width: 100%;
  height: 100%;
}

.stat-right-box {
  padding-left: 94px;
}

.stat-description {
  margin: 24px 0px;
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 500;
  width: 580px;
}

.stat-right-box ul li {
  font-size: 18px;
  font-weight: 900;
  color: var(--heading-color);
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .campus-placehero .container {
    max-width: 100%;
    padding: 0px 64px;
  }

  .campus-heading,
  .campus-desc {
    width: 535px;
  }

  .campus-heading {
    font-size: 48px;
  }

  .offer-card img {
    margin-bottom: 32px;
  }

  .offer-card .title {
    width: 185px !important;
    margin: auto;
  }

  .offer-card .description {
    margin-top: 16px;
  }

  .howitwok-card {
    height: 300px;
  }

  .stat-about .container {
    max-width: 100%;
    padding: 0px 64px;
  }

  .stat-row {
    justify-content: space-between;
  }

  .stat-row .stat-right-box {
    width: 525px;
    padding-left: 0px;
  }

  .stat-description {
    width: 514px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .campus-placehero {
    padding: 48px 0px;
  }

  .campus-place-row {
    flex-wrap: wrap;
  }

  .campus-right-box {
    width: 704px;
    height: 480px;
    padding: 0px;
    margin-top: 48px;
  }

  .weoffer {
    padding: 48px 0;
  }

  .offer-box {
    margin-top: 48px;
  }

  .offer-card {
    height: 408px;
  }

  .offer-card-mb {
    margin-bottom: 25px;
  }

  .offer-card-end {
    margin: auto;
  }

  .offer-card-end .offer-card .title {
    width: 175px;
  }

  .howitworks {
    padding: 48px 0;
  }

  .howitworks .container .get-started-btn {
    margin-top: 48px;
  }

  .stat-right-box {
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stat-img-box {
    margin-top: 48px;
  }

  .stat-img-box img {
    width: 704px;
    height: 420px;
  }

  .stat-description {
    width: 698px;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .campus-placehero .container {
    max-width: 100%;
    padding: 0px 16px;
  }

  .campus-placehero {
    padding: 32px 0px;
  }

  .campus-place-row {
    flex-direction: column;
  }

  .campus-heading {
    font-size: 31px;
    width: 341px;
    margin-top: 16px;
    margin-bottom: 24px;
  }

  .campus-desc {
    width: 341px;
  }

  .campus-right-box {
    width: 343px;
    height: 343px;
    padding: 0px;
    margin-top: 32px;
  }

  .weoffer {
    padding: 32px 0;
  }

  .offer-box {
    margin-top: 32px;
  }

  .offer-card img {
    width: 64px;
    height: 64px;
  }

  .offer-card .title {
    font-size: 18px;
  }

  .offer-card .description {
    font-size: 16px;
  }

  .offer-card-mb {
    margin-bottom: 32px;
  }

  .howitworks {
    padding: 48px 0;
  }

  .howitwok-card .title {
    font-size: 18px;
  }

  .howitwok-card .description {
    font-size: 16px;
  }

  .get-started-btn {
    margin-top: 0px;
  }

  .howitworks {
    padding: 32px 0;
  }

  .offer-card-end {
    margin-bottom: 32px;
  }

  .stat-right-box {
    padding: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .stat-description {
    width: 343px;
    text-align: center;
    font-size: 16px;
  }

  .about-heading {
    font-size: 32px;
    text-align: center;
  }

  .stat-right-box ul li {
    font-size: 16px;
  }

  .stat-img-box {
    width: 600px;
    height: 425px;
    margin-top: 32px;
  }

  .stat-img-box {
    width: 343px;
    height: 200px;
    margin-top: 32px;
  }

  .stat-img-box img {
    width: 343px;
    height: 200px;
  }
}

/* ================ Hiring Page ====================> */
.hiring-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hiring-text-box {
  width: 491px;
}

.hiring-text-box h1 {
  font-size: 48px;
  color: var(--heading-color);
  font-weight: 900;
}

.hiring-text-box p {
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 500;
  margin-top: 24px;
  margin-bottom: 32px;
}

/* .hiring-card-box {
  width: 343px;
  height: 500px;
  border-radius: 32px;
  padding: 24px;
  background-image: url("assets/hiring-img-card.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}

.hiring-card-box .hiring-inner-card {
  padding: 16px;
  border-radius: 16px;
  background-color: #ffffff;
  border: 2px solid var(--card-border-color);
  position: absolute;
  width: 295px;
  bottom: 24px;
  text-align: center;
}

.hiring-inner-card h5 {
  font-size: 18px;
  font-weight: 900;
  color: var(--heading-color);
}

.hiring-inner-card p {
  font-size: 16px;
  font-weight: 500;
  color: var(--text-color1);
  margin-bottom: 0px;
} */

.hiring-card-wrapper {
  position: relative;
  width: 343px;
  height: 500px;
  border-radius: 32px;
  overflow: hidden;
}

.hiring-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.8s ease-in-out;
  opacity: 0;
  z-index: 1;
}

.hiring-card-bg.active {
  opacity: 1;
  z-index: 2;
}

.hiring-card-details {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: white;
  padding: 16px;
  border-radius: 16px;
  border: 2px solid #ccc;
  text-align: center;
  transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
  opacity: 0;
  z-index: 3;
  transform: translateY(20px);
}

.hiring-card-details.active {
  opacity: 1;
  transform: translateY(0);
}

h5 {
  font-size: 18px;
  font-weight: 900;
  color: #222;
}

p {
  font-size: 16px;
  font-weight: 500;
  color: #555;
  margin: 0;
}

.hiring-card-box-second {
  width: 343px;
  height: 500px;
  background-color: #ffffff;
  border: 2px solid var(--card-border-color);
  border-radius: 32px;
  padding: 24px;
}

.hiring-card-box-second ul li {
  font-size: 18px;
  color: var(--heading-color);
  font-weight: 500;
}

.hiring-card-box-second ul li::marker {
  color: #00b864;
  font-size: 32px;
}

/* --------- Roles --------- */
.roles-description {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color1);
  width: 606px;
  text-align: center;
  margin: auto;
}

.role-title {
  margin-bottom: 24px;
}

.role-box {
  margin-bottom: 64px;
}

.role-card {
  height: 352px;
}

.role-btn .icon {
  margin-top: 0px;
}

.partner-btn {
  margin-top: 32px;
}

.partner-btn .icon {
  margin-top: 0px;
}

/* --------- Why Choose us ----------- */
.why-choose-card {
  padding: 32px;
  border: none;
  border-radius: 32px;
  width: 419px;
}

.why-choose-card img {
  width: 80px;
  height: 80px;
}

.why-choose-card .title {
  font-size: 24px;
  font-weight: 900;
  color: var(--heading-color);
  margin-top: 32px;
  margin-bottom: 16px;
  display: flex;
}

.why-choose-card .description {
  font-size: 18px;
  color: var(--text-color1);
  font-weight: 500;
  margin-bottom: 0px;
}

.skilldev-box .image-fader-box {
  height: 500px;
}

.skilldev-box .image-fader-box img {
  height: 100%;
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .hiring-hero {
    padding: 96px 0;
  }

  .hiring-hero .container {
    max-width: 100%;
    padding: 0px 64px;
  }

  .hiring-text-box {
    width: 441px;
  }

  .offer-card .title {
    width: 299px !important;
    margin: auto;
  }

  .power-growth-row {
    justify-content: space-between;
  }

  .power-growth-row .stat-right-box {
    padding-left: 0px;
    width: 535px;
  }

  .power-growth-row .stat-right-box .partner-btn {
    margin-bottom: 0px;
  }

  .why-choose-card {
    width: 363px;
    height: 326px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .hiring-main {
    flex-wrap: wrap;
  }

  .hiring-text-box h1 {
    font-size: 40px;
  }

  .hiring-text-box {
    width: 595px;
    text-align: center;
    margin: auto;
  }

  .hiring-text-box .hero-btn {
    margin: auto;
  }

  .hiring-card-box,
  .hiring-card-box-second {
    margin-top: 48px;
  }

  .role-box {
    justify-content: center;
  }

  .role-box-main,
  .role-box-end {
    width: 364px;
  }

  .role-box-end {
    margin-top: 25px;
  }

  .role-card .title {
    width: 286px;
  }

  .role-box {
    margin-bottom: 48px;
  }

  .weoffer .container .role-btn {
    margin-bottom: 0px;
  }

  .why-choose-card {
    width: 336px;
    height: 353px;
  }

  .why-choose-end .step-3 {
    margin-top: 27px;
  }

  .why-chhose-offer-box {
    justify-content: center;
  }

  .skilldev-box .image-fader-box {
    height: 480px;
  }
}

@media screen and (max-width: 667px) {
  .howitworks .container {
    padding: 0px 16px;
  }

  .hiring-main {
    flex-wrap: wrap;
    padding: 0px;
    justify-content: center;
  }

  .hiring-text-box h1 {
    font-size: 32px;
  }

  .hiring-text-box {
    width: 491px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hiring-text-box p {
    font-size: 16px;
  }

  .hiring-text-box .hero-btn {
    margin-top: 0px;
    margin-bottom: 32px;
  }

  .hiring-inner-card h5 {
    font-size: 16px;
  }

  .hiring-card-box-second {
    margin-top: 32px;
  }

  .hiring-card-box-second ul li {
    font-size: 16px;
  }

  .hiring-card-box-second {
    height: 450px;
  }

  .roles-description {
    font-size: 16px;
    width: auto;
  }

  .role-card {
    height: 336px;
    margin-bottom: 32px;
  }

  .role-box {
    margin-bottom: 0px;
  }

  .partner-btn {
    margin-bottom: 32px;
  }

  .why-choose-card {
    width: auto;
  }

  .why-choose-card img {
    width: 64px;
    height: 64px;
  }

  .why-choose-card .title {
    font-size: 18px;
  }

  .why-choose-card .description {
    font-size: 16px;
  }

  .why-choose-main {
    margin-bottom: 32px;
  }

  .skilldev-box .image-fader-box {
    height: 480px;
  }
}

/* ================ Skill Developement ================> */
.skill-dev {
  padding: 96px 0;
}

.skilldev-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skilldev-box .title {
  font-size: 48px;
  color: var(--heading-color);
  font-weight: 900;
  margin-bottom: 16px;
}

.skill-dev .description {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color1);
  margin-bottom: 24px;
  width: 924px;
  text-align: center;
}

.skilldev-box ul {
  margin-bottom: 32px;
}

.skilldev-box ul li {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color1);
}

.skilldev-box ul li::marker {
  color: var(--orange-color);
}

.skilldev-box ul li span {
  color: var(--orange-color);
}

.skilldev-btn {
  margin-top: 0px !important;
  margin-bottom: 64px !important;
}

.skilldev-box img {
  width: 1312px;
  height: 560px;
}

/* --------- Our Approach --------- */
.our-approach {
  padding: 96px 0px;
}

.our-approach .roles-description {
  margin-top: 24px;
}

.our-approach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 309px;
}

.our-approach-card .odd-img {
  width: 64px;
  height: 64px;
}

/* --------- Top Couses -------- */
.topcourses {
  padding: 96px 0px;
}

.top-course-box {
  margin: 64px 0px;
  display: flex;
  justify-content: space-between;
}

.top-course-card {
  /* width: 390px; */
  /* height: 550px; */
  border-radius: 32px;
  background-color: #ffffff;
  border: 2px solid var(--card-border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.top-course-card img {
  width: 100%;
  height: 209px;
  object-fit: cover;
  display: block;
}

.top-course-card .content {
  padding: 0px 32px 32px 32px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.top-course-card .title {
  font-size: 24px;
  color: var(--heading-color);
  font-weight: 500;
  margin-bottom: 16px;
  text-align: left;
  margin-bottom: 5px;
  margin-top: 15px;
}

.top-course-card .description {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color3);
  margin-bottom: 16px;
}

.tablet-box {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}

.tablet-box .tablet {
  padding: 8px 12px;
  border: 2px solid var(--card-border-color);
  color: var(--text-color1);
  font-size: 13px;
  font-weight: 500;
  border-radius: 100px;
  display: inline;
}

.dt-user {
  display: flex;
  align-items: center;
  gap: 32px;
}

.dt-user-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-user-inner img {
  width: 20px;
  height: 20px;
}

.dt-user-inner p {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 0px;
}

.dt-user .calender {
  color: var(--text-color3);
}

.dt-user .user {
  color: var(--green-color);
}

.separator {
  height: 2px;
  width: 100%;
  background-color: var(--card-border-color);
  margin: 32px 0px;
}

.tablet-box .last-tab {
  font-weight: 400 !important;
}

.tablet-box .last-tab span {
  color: var(--orange-color);
  font-weight: 900;
}

.last-tab-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.last-tab-box a {
  text-decoration: none;
  color: var(--button-click-color);
  font-size: 18px;
  font-weight: 500;
}

.last-tab-box a .icon {
  margin-left: 8px;
}

/* -------- Why Choose Our Skill Program -------- */
.why-chooseourskill {
  padding: 96px 0;
}

.why-chooseourskill .head-div {
  margin-bottom: 64px;
}

.whychooseskill-btn {
  margin: 0px !important;
}

.whychooseskill-btn .icon {
  margin-top: 2px;
}

.why-chooseskill-card {
  background-color: #ffffff;
  border: 2px solid var(--card-border-color);
  padding: 32px;
  border-radius: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.why-chooseskill-card img {
  height: 80px;
  width: 80px;
}

.why-chooseskill-card h4 {
  font-size: 24px;
  color: var(--heading-color);
  font-weight: 900;
  width: 556px;
  margin-bottom: 0px;
}

.why-chooseskill-card p {
  font-size: 17px;
  color: var(--text-color1);
  font-weight: 500;
  width: 310px;
  margin-bottom: 0px;
}

.why-chooseourskill .last-card {
  margin-bottom: 0px;
}

/* ===================== Staffing Page ==================> */
.staffing {
  padding: 96px 0px;
}

.staffing-small-font {
  font-size: 14px;
  color: var(--text-color2);
  font-weight: 500;
  margin-bottom: 0px !important;
  border: 1px solid var(--borderof-bulletpoint-color);
  padding: 8px 16px;
  border-radius: 100px;
  display: inline;
}

.capsul-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.staffing-heading {
  margin-top: 16px;
  margin-bottom: 24px;
  width: 490px;
}

.staffing-desc {
  width: 504px;
  margin-bottom: 0px;
}

.staffing-btn {
  margin-top: 32px;
  margin-bottom: 0px;
}

.staffing-btn .icon {
  margin-top: 3px;
}

.staffing-right-box {
  width: 656px;
  height: 528px;
}

.staffing-right-box img {
  height: 100%;
  width: 100%;
}

/* -------- Smart Solution ------- */
.smart-sol .container {
  padding: 0px;
}

.smart-sol .container .main-title {
  margin-bottom: 24px;
}

.smart-sol .container .main-description {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color1);
  width: 706px;
  text-align: center;
  margin: auto;
}

.smart-sol-box {
  margin: 64px 0px;
}

/* ----------- Industy We Serve ------- */
.industy-wesearve {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.weserve-left {
  width: 387px;
}

.weserve-left h1 {
  font-size: 40px;
  font-weight: 900;
  color: var(--heading-color);
  margin-bottom: 24px;
}

.weserve-left p {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color1);
}

.weserve-right {
  width: 745px;
}

.weserve-right {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}

.tech-box {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tech-box img {
  height: 62px;
  width: 62px;
}

.tech-box p {
  padding: 16px 32px;
  font-size: 20px;
  color: var(--heading-color);
  font-weight: 900;
  border-radius: 16px;
  background-color: #ffffff;
  margin-bottom: 0px;
  text-align: center;
}

/* --------------- Why choose --------- */
.why-choose-box {
  align-items: center;
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .staffing .container {
    max-width: 100%;
    padding: 0px 64px;
  }

  .staffing .container .hero-row {
    justify-content: space-between;
  }

  .staffing .container .hero-row .left-box {
    width: 425px;
  }

  .hero-heading {
    font-size: 48px;
  }

  .staffing .container .hero-row .left-box .staffing-desc {
    font-size: 18px;
  }

  .why-choose-card .title {
    text-align: left;
  }

  .why-choose-box .step-2 {
    width: 363px;
    height: 375px;
  }

  .why-choose-card {
    width: 363px;
    height: 355px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  .staffing {
    padding: 48px 0px;
  }

  .staffing-heading {
    width: auto;
  }

  .staffing-desc {
    width: 704px;
  }

  .staffing-right-box {
    width: 100%;
    height: 480px;
    margin-top: 48px;
  }

  .smart-sol-box {
    margin: 48px 0px;
    gap: 32px;
    justify-content: center;
  }

  .smart-sol .container {
    padding: 0px 32px;
  }

  .smart-sol-main,
  .smart-sol-last {
    padding: 0px;
    width: 336px;
  }

  .smart-sol-main .offer-card,
  .smart-sol-last .offer-card {
    height: 442px;
  }

  .role-box-main .offer-card,
  .role-box-end .offer-card {
    height: 390px;
  }

  .industy-wesearve {
    flex-direction: column;
  }

  .weserve-left {
    width: auto;
    text-align: center;
    margin-bottom: 48px;
  }

  .weserve-right {
    gap: 24px;
  }

  .weserve-right {
    justify-content: center;
  }

  .why-choose-box {
    justify-content: center;
  }

  .why-choose-card {
    width: 336px;
    height: 379px;
  }

  .why-topchoose-end {
    margin-top: 32px;
  }
}

@media screen and (max-width: 767px) {
  .staffing {
    padding: 32px 0px;
  }

  .box-center {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .staffing .container {
    width: 100%;
    padding: 0px 16px;
  }

  .capsul-box {
    display: none;
  }

  .staffing-heading {
    margin-top: 0px;
    margin-bottom: 24px;
    width: auto;
  }

  .staffing-desc {
    width: auto;
    margin-bottom: 0px;
  }

  .staffing-right-box {
    margin-top: 32px;
  }

  .staffing-right-box {
    width: 656px;
    height: 240px;
  }

  .smart-sol-box {
    margin: 32px 0px;
  }

  .smart-sol-main {
    margin-bottom: 32px;
  }

  .industy-wesearve {
    flex-wrap: wrap;
  }

  .weserve-left h1 {
    font-size: 32px;
    text-align: center;
  }

  .weserve-left p {
    font-size: 16px;
    text-align: center;
    margin-bottom: 32px;
  }

  .tech-box img {
    height: 56px;
    width: 56px;
  }

  .tech-box p {
    font-size: 18px;
  }

  .weserve-right {
    justify-content: center;
  }

  .why-choose-card {
    margin-bottom: 32px;
  }

  .why-topchoose-end .why-choose-card-end {
    margin-bottom: 0px;
  }

  .why-choose-card .title {
    text-align: left;
  }
}

@media screen and (max-width: 768px) {
  .why-choose-card .title {
    text-align: left;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1439px) {
  .our-approach-card {
    width: 100%;
    height: 336px;
  }
}

@media screen and (max-width: 1279px) {
  .skilldev-box img {
    width: 100%;
    height: 100%;
  }

  .skill-dev .description {
    width: 704px;
  }

  .skilldev-box .title {
    font-size: 40px;
  }

  .our-approach {
    padding: 48px 0px;
  }

  .skill-dev {
    padding: 48px 0;
  }

  .why-choose-card {
    width: 100%;
    margin-bottom: 32px;
    /* height: 336px; */
  }

  .topcourses {
    padding: 48px 0px;
  }

  .web {
    display: none;
  }

  .mob {
    display: flex;
  }

  .why-chooseskill-card {
    display: block;
  }

  .why-chooseskill-card img {
    margin-bottom: 32px;
  }

  .why-chooseskill-card h4 {
    margin-bottom: 32px;
    width: 100%;
  }

  .why-chooseskill-card p {
    width: 100%;
  }

  .learning-btn {
    display: flex;
    justify-content: center;
    margin-top: 48px;
  }

  .why-chooseourskill {
    padding: 48px 0;
  }

  .top-course-card {
    margin-bottom: 26px;
    margin: 0 5px 0 5px;
  }

  .tablet-box {
    flex-wrap: wrap;
  }

  .top-course-card .content {
    padding: 0px 16px 16px 16px;
  }

  .dt-user-inner p {
    font-size: 13px;
  }

  .web-tab {
    display: none !important;
  }
}

@media screen and (max-width: 426px) {
  .skill-dev .description {
    width: 100%;
  }

  .roles-description {
    width: 100%;
  }

  .skill-dev {
    padding: 32px 0;
  }

  .our-approach {
    padding: 32px 0px;
  }

  .topcourses {
    padding: 32px 0px;
  }

  .top-course-box {
    margin: 32px 0px;
  }

  .why-chooseourskill {
    padding: 32px 0;
  }

  .service-card-alt img {
    width: 230px;
  }

  .trusted-company-logobox {
    animation: scrollLeft 10s linear infinite;
  }

  .university-scroll img,
  .university-scroll-alt img {
    height: 96px;
  }

  .university-scroll {
    animation: scrollLeft 10s linear infinite;
  }

  .university-scroll-alt {
    animation: scrollRight 10s linear infinite;
  }

  .skilldev-box .image-fader-box {
    height: 240px;
  }
}

@media screen and (max-width: 425px) {
  .lives-impact .heading {
    margin-left: 0;
  }

  .impact-row-2 {
    padding: 0px 11px;
  }

  .impact-row-2 .impact-small-box {
    width: 100%;
  }

  .hiring-text-box h1 {
    width: 295px;
  }

  .service-arrow-box {
    height: 42px;
    width: 42px;
  }

  .service-card-soon img {
    width: 72%;
    margin-left: 0;
  }

  .university-scroll img,
  .university-scroll-alt img {
    height: 96px;
  }

  .skilldev-box .image-fader-box {
    height: 240px;
  }

  .copyright {
    width: 100%;
  }
}

.mob {
  display: none;
}

.slick-dots li button:before {
  font-size: 12px;
  color: #888;
  /* Inactive dot color */
  opacity: 1;
}

.slick-dots li.slick-active button:before {
  color: #000;
  /* Active dot color */
}

@media screen and (max-width: 426px) {
  .about-img-box .about-change-imgbox {
    width: 100%;
  }

  .impact-img {
    width: 100%;
    height: 100%;
  }

  .lives-impact {
    width: 100%;
  }

  .lives-impact .small-text {
    text-align: center;
  }

  .service-card-soon img {
    width: 100%;
    margin-left: 0;
  }

  .campus-right-box {
    width: 100%;
  }

  .stat-img-box {
    width: 100%;
  }

  .stat-img-box img {
    width: 100%;
  }

  .hiring-card-box {
    width: 100%;
  }

  .hiring-card-box .hiring-inner-card {
    width: 87%;
  }

  .hiring-card-box-second {
    width: 100%;
  }

  .smart-sol .container .main-description {
    width: 100%;
    padding: 0px 16px;
  }

  .service-image-box {
    height: 160px;
  }

  .service-card-alt,
  .service-card-soon {
    height: 379px;
  }

  .service-card-alt img {
    width: 246px;
  }

  .service-card-soon img {
    width: 72%;
    margin-left: 0;
  }

  .university-scroll img,
  .university-scroll-alt img {
    height: 96px;
  }

  .user-big-screen {
    display: none;
  }

  .user-small-screen {
    display: block;
  }

  .user-small-screen .testimonial-col .testimonial-card {
    width: 100%;
    margin: 0px 20px;
  }

  .user-small-screen .testimonial-col .testimonial-card {
    margin: 0 5px;
    /* gap between slides */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    /* ensure full height for centering */
  }

  .slick-slide {
    display: flex !important;
    align-items: center;
    height: 100%;
  }

  .slick-track {
    display: flex;
    align-items: center;
  }
}

@media screen and (max-width: 375px) {
  .copyright {
    width: 100%;
  }

  .cerificate-img-box img {
    width: 120px;
  }

  .about-img-box .about-change-imgbox {
    width: 100%;
  }

  .lives-impact {
    width: 100%;
  }

  .impact-small-box {
    width: 100%;
  }

  .impact-img {
    width: 100%;
  }

  .campus-right-box {
    width: 100%;
  }

  .stat-img-box img {
    width: 100%;
  }

  .cta-btn {
    font-size: 13px;
  }

  .tablet-box .tablet {
    padding: 4px 8px;
  }

  .smart-sol .container .main-description {
    width: 100%;
  }

  .impact-row-2 {
    padding: 0px 11px;
  }

  .weserve-right .tech-box:nth-of-type(2) p {
    width: 200px;
  }

  .weserve-right .tech-box:nth-of-type(5) p {
    width: 220px;
  }

  .service-card-alt img {
    height: 168px;
    width: 207px;
  }

  .service-left {
    width: 223px;
  }

  .service-arrow-box {
    height: 42px;
    width: 42px;
  }

  .service-card-soon img {
    width: 72%;
    margin-left: 0;
  }

  .university-scroll img,
  .university-scroll-alt img {
    height: 96px;
  }
}