@font-face {
  font-family: "Regular";
  src: url("../fonts/Gilroy-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Bold";
  src: url("../fonts/Gilroy-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "ExtraBold";
  src: url("../fonts/Gilroy-ExtraBold.ttf") format("truetype");
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Regular";
}

/* ==================================================================================================== */

/* .hero-section {
  font-family: "Bold";
  width: 100%;
  height: 215px;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
} */
/* .product-section {
  font-family: "Regular";
  font-size: 1rem;
  max-width: 1240px;
  line-height: 1.2;
} */

.screen {
  border: 1px solid black;
  /* border-radius: 15px; */
}
.logo {
  width: 8%;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 22px 70px 4px;
}
.description-text {
  font-size: 1.1rem;
  font-weight: 500;
  text-align: justify;
}

/* ---------------------------------------------------------------------------------------------------- */
.trackq-gradient-background {
  background: rgb(0, 36, 24);
  background: linear-gradient(90deg, rgba(0, 36, 24, 1) 0%, rgba(18, 235, 241, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.trackq-content-border {
  border: 2px solid transparent;
  border-radius: 15px;
  border-image: linear-gradient(115deg, rgba(255, 255, 255, 1) 0%, rgba(18, 235, 241, 1) 100%) 1;
}
.trackq-gradient-tagline {
  /* background-image: linear-gradient(115deg, #0014fa, #ff0000); */
  /* -webkit-background-clip: text; */
  /* color: transparent; */
  font-weight: bolder;
  margin: 0px;
}
.trackq-gradient-text {
  background-image: linear-gradient(115deg, #0014fa, #ff0000);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: "Bold";
}
/* ---------------------------------------------------------------------------------------------------- */
.mpptcl-dtbr-gradient-background {
  background: rgb(11, 11, 11);
  background: linear-gradient(90deg, rgba(11, 11, 11, 1) 20%, rgba(255, 193, 0, 1) 100%);
}
.mpptcl-dtbr-content-border {
  border: 2px solid transparent;
  border-radius: 15px;
  border-image: linear-gradient(90deg, rgba(255, 193, 0, 1) 0%, rgba(11, 11, 11, 1) 100%) 1;
}
.mpptcl-dtbr-gradient-tagline {
  background-image: linear-gradient(115deg, #ff7400, #fff);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bolder;
  margin: 0px;
}
.mpptcl-dtbr-gradient-text {
  background-image: linear-gradient(115deg, #ff7400, #fff);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: "Bold";
}
/* ---------------------------------------------------------------------------------------------------- */
.mpptcl-dtsr-gradient-background {
  background: rgb(0, 218, 255);
  background: linear-gradient(90deg, rgba(0, 218, 255, 1) 0%, rgba(253, 0, 255, 1) 100%);
}
.mpptcl-dtsr-content-border {
  border: 2px solid transparent;
  border-radius: 15px;
  border-image: linear-gradient(90deg, rgba(253, 0, 255, 1) 0%, rgba(0, 218, 255, 1) 100%) 1;
}
.mpptcl-dtsr-gradient-tagline {
  color: #0023c2;
  font-weight: bolder;
  margin: 0px;
}
.mpptcl-dtsr-gradient-text {
  color: #0023c2;
  font-weight: "Bold";
}
/* ---------------------------------------------------------------------------------------------------- */
.wcr-gear-failure-gradient-background {
  background: rgb(222, 0, 0);
  background: linear-gradient(90deg, rgba(222, 0, 0, 1) 50%, rgba(200, 200, 200, 1) 100%);
}
.wcr-gear-failure-content-border {
  border: 2px solid transparent;
  border-radius: 15px;
  border-image: linear-gradient(90deg, rgba(200, 200, 200, 1) 50%, rgba(222, 0, 0, 1) 100%) 1;
}
.wcr-gear-failure-gradient-tagline {
  color: #0023c2;
  font-weight: bolder;
  margin: 0px;
}
.wcr-gear-failure-gradient-text {
  color: #0023c2;
  font-weight: "Bold";
}
/* ---------------------------------------------------------------------------------------------------- */
.wcr-signal-failure-gradient-background {
  background: rgb(200, 200, 200);
  background: linear-gradient(90deg, rgba(200, 200, 200, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
.wcr-signal-failure-content-border {
  border: 2px solid transparent;
  border-radius: 15px;
  border-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(200, 200, 200, 1) 100%) 1;
}
.wcr-signal-failure-gradient-tagline {
  background-image: linear-gradient(115deg, #0023c2 70%, #fff 100%);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bolder;
  margin: 0px;
}
.wcr-signal-failure-gradient-text {
  color: #0023c2;
  font-weight: "Bold";
}
/* ---------------------------------------------------------------------------------------------------- */
.subject-masters-gradient-background {
  background: rgb(20, 112, 232);
  background: linear-gradient(90deg, rgba(20, 112, 232, 1) 50%, rgb(225, 225, 225) 100%);
}
.subject-masters-content-border {
  border: 2px solid transparent;
  border-radius: 15px;
  border-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 50%, rgba(20, 112, 232, 1) 100%) 1;
}
.subject-masters-gradient-tagline {
  color: #000000;
  font-weight: bolder;
  margin: 0px;
}
.subject-masters-gradient-text {
  color: #000000;
  font-weight: "Bold";
}
/* ---------------------------------------------------------------------------------------------------- */
.my-exams-prep-gradient-background {
  background: rgba(0, 0, 0);
  background: linear-gradient(90deg, rgba(200, 200, 200, 1) -20%, rgba(0, 0, 0, 1) 100%);
}
.my-exams-prep-content-border {
  border: 2px solid transparent;
  border-radius: 15px;
  border-image: linear-gradient(90deg, rgba(255, 236, 0, 1) 50%, rgba(11, 11, 11, 1) 100%) 1;
}
.my-exams-prep-gradient-tagline {
  color: #ffec00;
  font-weight: bolder;
  margin: 0px;
}
.my-exams-prep-gradient-text {
  color: #ffec00;
  font-weight: "Bold";
}
/* ---------------------------------------------------------------------------------------------------- */

/* ╔════════════════════════════════════╗
   ║          'Explore' button          ║
   ╚════════════════════════════════════╝ */
.btn-primary {
  background: linear-gradient(45deg, #0d6efd, #6610f2); /* gradient background */
  color: white;
  font-family: "Regular", Arial, sans-serif; /* fonts */
  font-weight: 600;
  padding: 5px 30px;
  border-radius: 30px; /* rounded corners */
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* slight shadow for depth */
}
.btn-primary:hover {
  background: linear-gradient(45deg, #6610f2, #0d6efd); /* reversed gradient on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* increased shadow on hover */
  transform: translateY(-2px); /* slight lift effect */
}
/* Glowing Effect */
.btn-primary:focus,
.btn-primary:hover {
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.8); /* glowing effect on hover */
  outline: none; /* remove default focus outline */
}
/* Icon Style */
.btn-primary i {
  margin-left: 10px; /* space between text and icon */
}