/* Massive WebTeam Framework 2.0 */
/* ----------------------------- */
/* Google Fonts */ /* Do not add too many, as this will slow the page loading speed */ /* Poppins */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
/* ----------------------------- */
/* Global Styling */
/* -----------------*/
/* Full Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none !important;
} /* Hide Content */
@media (min-width: 1921px) {
}
@media (max-width: 1199px) {
  .hidden-lg {
    display: none;
  }
}
@media (max-width: 991px) {
  .hidden-md {
    display: none;
  }
}
@media (max-width: 768px) {
  .hidden-sm {
    display: none;
  }
}
@media (max-width: 500px) {
  .hidden-xs {
    display: none !important;
  }
}
html {
  font-size: 14px;
}
@media (min-width: 2300px) {
  body {
    margin: auto 18rem !important;
    background-color: rgb(64, 64, 64);
    background-image: url("https://www.transparenttextures.com/patterns/60-lines.png"); /* background-size: contain; */
  }
}
@media (min-width: 1921px) {
  body {
    margin: auto 4rem;
    background-color: rgb(64, 64, 64);
    background-image: url("https://www.transparenttextures.com/patterns/60-lines.png"); /* background-size: contain; */
  }
}
@media (min-width: 1919px) {
  html {
    font-size: 17px;
  }
}
@media (max-width: 1199px) {
  html {
    font-size: 13px;
  }
}
@media (max-width: 991px) {
  html {
    font-size: 12px;
  }
}
@media (max-width: 768px) {
  html {
    font-size: 11px;
  }
}
@media (max-width: 500px) {
  html {
    font-size: 10px;
  }
} /* -----------------*/ /* Text Selection */
::selection {
  background: rgba(55, 194, 240, 0.682); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: rgba(55, 194, 240, 0.682); /* WebKit/Blink Browsers */
} /* -----------------*/ /* Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--primary);
}
::-webkit-scrollbar-thumb {
  background: rgb(73, 72, 72);
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(61, 61, 61);
} /* -----------------*/ /* Fade Animations */
/* .fade-in {
  animation: fade-in 2s ease backwards;
  animation-delay: 2s;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} */
.fade-up {
  animation: fade-up 2s ease backwards;
  animation-delay: 1s;
}
@keyframes fade-up {
  0% {
    transform: translate(0px, 100px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0);
    opacity: 1;
  }
}
.fade-left {
  animation: fade-left 2s ease backwards;
  animation-delay: 1s;
}
@keyframes fade-left {
  0% {
    transform: translate(-200px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0);
    opacity: 1;
  }
}
.fade-right {
  animation: fade-right 1s ease backwards;
  animation: 1s;
}
@keyframes fade-right {
  0% {
    transform: translate(200px, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0);
    opacity: 1;
  }
}
.fade-down {
  animation: fade-down 1s ease backwards;
}
@keyframes fade-down {
  0% {
    transform: translate(0, -100px);
    opacity: 0;
  }
  100% {
    transform: translate(0px, 0);
    opacity: 1;
  }
} /* -----------------*/ /* Colours */
:root {
  --primary: rgba(248, 176, 20, 0.934);
  --primary: rgba(245, 170, 9, 0.934);
  --secondary: rgb(112, 0, 210);
  --tertiary: rgb(0, 208, 255);
  --accent: rgb(122, 227, 78);
  --white: #fafafa;
  --offwhite: rgb(224, 224, 224);
  --offwhite: rgb(239, 239, 239);
  --black: #000000;
  --darkgray: #282828;
  --gray: #333333;
}
.bg-primary {
  background-color: var(--primary) !important;
  padding: 0.1rem;
  margin: 0.1rem;
}
.bg-secondary {
  background-color: var(--secondary) !important;
}
.bg-tertiary {
  background-color: var(--tertiary) !important;
}
.bg-accent {
  background-color: var(--accent) !important;
}
.bg-darkgray {
  padding: 0.3rem;
  background-color: var(--darkgray) !important;
}
.bg-gray {
  padding: 0.3rem;
  background-color: var(--gray) !important;
}
.bg-offwhite {
  background-color: var(--offwhite) !important;
}
.bg-white {
  background-color: var(--white) !important;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.bg-gradient {
  background: linear-gradient(
    -45deg,
    #f38435,
    #e73c7e,
    #8e23d5,
    #18ebba
  ) !important;
  background-size: 400% 400%;
  animation: gradient 5s ease infinite;
} /* -----------------*/ /* Margin */
.m-1 {
  margin: 1rem;
}
.m-2 {
  margin: 2rem;
}
.m-3 {
  margin: 3rem;
}
.m-4 {
  margin: 4rem;
}
mt-1 {
  margin-top: 1rem;
}
.mt-2 {
  margin-top: 2rem;
}
.mt-3 {
  margin-top: 3rem;
}
.mt-4 {
  margin-top: 4rem;
}
mb-1 {
  margin-bottom: 1rem;
}
.mb-2 {
  margin-bottom: 2rem;
}
.mb-3 {
  margin-bottom: 3rem;
}
.mb-4 {
  margin-bottom: 4rem;
}
mr-1 {
  margin-right: 1rem;
}
.mr-2 {
  margin-right: 2rem;
}
.mr-3 {
  margin-right: 3rem;
}
.mr-4 {
  margin-right: 4rem;
}
ml-1 {
  margin-left: 1rem;
}
.ml-2 {
  margin-left: 2rem;
}
.ml-3 {
  margin-left: 3rem;
}
.ml-4 {
  margin-left: 4rem;
} /* -----------------*/ /* Padding */
.p-1 {
  padding: 1rem;
}
.p-2 {
  padding: 2rem;
}
.p-3 {
  padding: 3rem;
}
.p-4 {
  padding: 4rem;
}
.pt-1 {
  padding-top: 1rem;
}
.pt-2 {
  padding-top: 2rem;
}
.pt-3 {
  padding-top: 3rem;
}
.pt-4 {
  padding-top: 4rem;
}
.pb-1 {
  padding-bottom: 1rem;
}
.pb-2 {
  padding-bottom: 2rem;
}
.pb-3 {
  padding-bottom: 3rem;
}
.pb-4 {
  padding-bottom: 4rem;
}
.pl-1 {
  padding-left: 1rem;
}
.pl-2 {
  padding-left: 2rem;
}
.pl-3 {
  padding-left: 3rem;
}
.pl-4 {
  padding-left: 4rem;
}
.pr-1 {
  padding-right: 1rem;
}
.pr-2 {
  padding-right: 2rem;
}
.pr-3 {
  padding-right: 3rem;
}
.pr-4 {
  padding-right: 4rem;
} /* -----------------*/ /* Container */
.container-max {
  max-width: 100%;
  margin: auto;
  padding: 0.5rem;
}
.container-xl {
  margin: auto;
  max-width: 90%;
  padding: 0.5rem;
}
.container-lg {
  margin: auto;
  max-width: 80%;
  padding: 0.5rem;
}
.container-md {
  margin: auto;
  max-width: 70%;
  padding: 0.5rem;
}
.container-sm {
  margin: auto;
  max-width: 55%;
  padding: 0.5rem;
}
.container-xs {
  margin: auto;
  max-width: 45%;
  padding: 0.5rem;
}
@media (min-width: 1920px) {
  .container-max {
    max-width: 100%;
  }
  .container-xl {
    max-width: 80%;
  }
  .container-lg {
    max-width: 70%;
  }
  .container-md {
    max-width: 60%;
  }
  .container-sm {
    max-width: 45%;
  }
  .container-xs {
    max-width: 40%;
  }
}
@media (max-width: 1199px) {
  .container-max {
    max-width: 100%;
  }
  .container-xl {
    max-width: 90%;
  }
  .container-lg {
    max-width: 90%;
  }
  .container-md {
    max-width: 90%;
  }
  .container-sm {
    max-width: 70%;
  }
  .container-xs {
    max-width: 70%;
  }
}
@media (max-width: 768px) {
  .container-max {
    max-width: 100%;
  }
  .container-xl {
    max-width: 100%;
  }
  .container-lg {
    max-width: 100%;
  }
  .container-md {
    max-width: 100%;
  }
  .container-sm {
    max-width: 80%;
  }
  .container-xs {
    max-width: 80%;
  }
}
@media (max-width: 500px) {
  .container-max {
    max-width: 100%;
    padding: 0;
  }
  .container-xl {
    max-width: 100%;
    padding: 0;
  }
  .container-lg {
    max-width: 100%;
    padding: 0;
  }
  .container-md {
    max-width: 100%;
    padding: 0;
    /* padding: 1rem; */
  }
  .container-sm {
    max-width: 100%;
    padding: 0;
  }
  .container-xs {
    padding: 0;
    max-width: 100%;
  }
} /* -----------------*/
/* Grid */
.grid-1 {
  display: grid;
  grid-template-columns: auto;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.grid-2-1 {
  display: grid;
  grid-template-columns: 1.2fr 1fr !important;
}
.grid-1-2 {
  display: grid;
  grid-template-columns: 1fr 1.3fr !important;
}
.grid-2-1-1 {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
}
.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid-5 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
@media (max-width: 1399px) {
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .grid-2-1 {
    display: grid;
    grid-template-columns: 1fr 1.7fr !important;
  }
  .grid-1-2 {
    display: grid;
    grid-template-columns: 1.7fr 1fr !important;
  }
  .grid-2-1-1 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 1199px) {
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .grid-2-1 {
    display: grid;
    grid-template-columns: 1fr 1.5fr !important;
  }
  .grid-1-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .grid-2-1-1 {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
  }
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 991px) {
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    /* margin: auto 1rem; */
  }
  .grid-2-1 {
    display: grid;
    grid-template-columns: 1fr 1.7fr !important;
  }
  .grid-1-2 {
    display: grid;
    grid-template-columns: 1.7fr 1fr !important;
  }
  .grid-2-1-1 {
    display: grid;
    grid-template-columns: 2fr auto auto;
  }
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    /* margin: auto 1rem; */
  }
  .grid-2-1 {
    display: grid;
    grid-template-columns: 1fr !important;
  }
  .grid-1-2 {
    display: grid;
    grid-template-columns: 1fr !important;
  }
  .grid-2-1-1 {
    display: grid;
    grid-template-columns: 2fr auto auto;
  }
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .grid-5 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}
@media (max-width: 500px) {
  .grid-2 {
    display: grid;
    grid-template-columns: 1fr;
  }
  .grid-2-1 {
    display: grid;
    grid-template-columns: 1fr;
  }
  .grid-1-2 {
    display: grid;
    grid-template-columns: 1fr;
  }
  .grid-2-1-1 {
    display: grid;
    grid-template-columns: 1fr;
  }
  .grid-3 {
    display: grid;
    grid-template-columns: 1fr;
  }
  .grid-4 {
    display: grid;
    grid-template-columns: 1fr;
  }
  .grid-5 {
    display: grid;
    grid-template-columns: 1fr;
  }
} /* -----------------*/ /* Section */
section {
  padding: 0.5rem;
}
@media (min-width: 1920px) {
  section {
    padding: 1rem;
  }
}
@media (max-width: 1199px) {
  section {
    padding: 0.5rem;
  }
}
@media (max-width: 991px) {
  section {
    padding: 0.5rem;
  }
}
@media (max-width: 768px) {
  section {
    padding: 0.4rem;
  }
}
@media (max-width: 500px) {
  section {
    padding: 0.2rem;
  }
} /* -----------------*/ /* Cosmetics */
.c-line {
  padding: 0.2rem !important;
  margin: 1.5rem auto;
  max-width: 100px;
  text-align: center;
  background-image: linear-gradient(62deg, #ff8f4e 0%, #fec024 100%);
}
.left-c-line {
  padding: 0.2rem !important;
  margin: 1.5rem 0;
  max-width: 100px;
  text-align: left;
  background-image: linear-gradient(62deg, #ff8f4e 0%, #fec024 100%);
}
.right-c-line {
  padding: 0.2rem !important;
  margin: 1rem auto;
  max-width: 100px;
  text-align: right;
  background-color: var(--primary);
} /* -----------------*/ /* Buttons */
.primary-btn {
  color: var(--white) !important;
  background-color: var(--primary);
  border: 2px var(--primary) solid;
  outline: none;
  padding: 1rem 3rem;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  margin: auto 0.2rem;
  font-family: Poppins;
  /* background-image: url("https://www.transparenttextures.com/patterns/60-lines.png"); */
}
.primary-btn:hover {
  transition: 0.2s ease-in-out;
  background-color: rgb(251, 187, 50);
  color: var(--white);
}
.line-btn {
  background-color: transparent;
  color: var(--white) !important;
  border: 2px var(--primary) solid;
  outline: none;
  padding: 1rem 3rem;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  margin: auto 0.2rem;
  font-family: Poppins;
  /* background-image: url("https://www.transparenttextures.com/patterns/60-lines.png"); */
}
.line-btn:hover {
  transition: 0.2s ease-in-out;
  background-color: var(--primary);
  color: var(--white);
}
.secondary-btn {
  background: linear-gradient(62deg, #ff8f4e 0%, #fec024 100%);
  color: var(--white);
  border: none;
  outline: none;
  padding: 0.6rem 1.3rem;
  font-size: 1.2rem;
  border-radius: 2px;
  font-weight: 600;
  margin: auto 0.2rem;
  font-family: Poppins;
}
.secondary-btn:hover {
  background: var(--primary);
  background: linear-gradient(62deg, #ffb702 0%, #ffb702 100%);
  color: var(--darkgray);
  transition: 0.2s ease-in-out;
  box-shadow: 1px 1px 10px 1px rgb(98, 98, 98);
}
.switch-btn {
  background-color: var(--primary);
  color: var(--white);
  border: none;
  outline: none;
  padding: 0.4rem 1.2rem;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: Poppins;
}
.switch-btn:hover {
  background-color: var(--darkgray);
  color: var(--white);
  transition: 0.4s ease-in-out;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.233);
  border-left: 14px solid var(--primary);
} /* -----------------*/ /* Text Styling */
.text-primary {
  color: var(--primary) !important;
}
.text-secondary {
  color: var(--secondary) !important;
}
.text-tertiary {
  color: var(--tertiary) !important;
}
.text-accent {
  color: var(--accent) !important;
}
.text-darkgray {
  color: var(--darkgray) !important;
}
.text-white {
  color: var(--white) !important;
}
.text-black {
  color: var(--black) !important;
}
text-offwhite {
  color: var(--offwhite) !important;
}
.underline {
  text-decoration: underline !important;
}
h1 {
  font-family: Poppins;
}
h2 {
  font-family: Poppins;
  font-weight: 400;
  text-transform: uppercase;
}
h3 {
  font-family: Poppins;
}
h4 {
  font-family: Poppins;
}
p {
  font-size: 0.97rem;
  line-height: 1.5rem;
  margin: 0.5rem 0;
  font-family: Montserrat;
}
li {
  font-family: Inter;
}
a {
  text-decoration: none !important;
  font-family: Poppins;
}
.title {
  font-size: 3rem;
  font-family: Poppins;
  line-height: 4rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 400;
}
.subtitle {
  font-size: 3rem;
  font-family: Poppins;
  line-height: 3.5rem;
  font-weight: 400;
  text-transform: uppercase;
}
.heading {
  font-size: 3rem;
  text-transform: uppercase;
  font-family: Poppins;
  font-weight: 400;
}
.subheading {
  font-size: 2.5rem;
  line-height: 3rem;
  text-transform: uppercase;
  /* letter-spacing: 3px; */
  font-family: Poppins;
  font-weight: 400;
}
.caption {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 1px;
  font-family: Poppins;
  text-transform: uppercase;
}
.uppercase {
  text-transform: uppercase !important;
}
.capitalise {
  text-transform: capitalize !important;
}
.lowercase {
  text-transform: lowercase !important;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.fw-100 {
  font-weight: 100;
}
.fw-200 {
  font-weight: 200;
}
.fw-300 {
  font-weight: 300;
}
.fw-400 {
  font-weight: 400;
}
.fw-500 {
  font-weight: 500;
}
.fw-600 {
  font-weight: 600;
}
.fw-700 {
  font-weight: 700;
}
.fw-800 {
  font-weight: 800;
}
.fw-900 {
  font-weight: 900;
}
.ls-1 {
  letter-spacing: 1px !important;
}
.ls-2 {
  letter-spacing: 2px !important;
}
.ls-3 {
  letter-spacing: 3px !important;
}
.ls-4 {
  letter-spacing: 4px !important;
} /* -----------------*/ /* Images */
.img-responsive {
  width: 100%;
  height: auto;
} /* -----------------*/ /* Opacity */
.op-9 {
  opacity: 0.9;
}
.op-8 {
  opacity: 0.8;
}
.op-7 {
  opacity: 0.7;
}
.op-6 {
  opacity: 0.6;
} /* -----------------*/ /* Social Media Backgrounds*/
.bg-facebook {
  background-color: #3b5998;
}
.bg-google {
  background-color: #ea4335;
}
.bg-twitter {
  background-color: #00acee;
}
.bg-instagram {
  background-color: rgb(254, 18, 100);
}
.bg-youtube {
  background-color: rgb(220, 44, 44);
}
.bg-whatsapp {
  background-color: #128c7e;
} /* Social Media */
.google {
  background-color: #ea4335;
}
.facebook {
  background-color: #3b5998;
  color: var(--white);
}
.facebook:hover {
  background-color: #2158d0;
  transition: 0.2s ease-in-out;
}
.instagram {
  color: var(--white);
  background-color: rgb(254, 18, 100);
}
.instagram:hover {
  background-color: rgb(228, 42, 107);
  transition: 0.2s ease-in-out;
}
.whatsapp {
  background-color: #128c7e;
  color: var(--white);
}
.whatsapp:hover {
  background-color: #0fbba7;
  transition: 0.2s ease-in-out;
}
.youtube {
  background-color: rgb(220, 44, 44);
  color: var(--white);
}
.youtube:hover {
  background-color: rgb(255, 0, 0);
  transition: 0.2s ease-in-out;
}
.twitter {
  background-color: #00acee;
  color: var(--white);
}
.twitter:hover {
  background-color: #0797d0;
  transition: 0.2s ease-in-out;
}
.pinterest {
  background-color: #e60023;
  color: --white;
}
.linkedin {
  background-color: #0072b1;
  color: var(--white);
}
.linkedin:hover {
  background-color: #1890d0;
  transition: 0.2s ease-in-out;
}
.github {
  background-color: #171515;
  color: var(--white);
}
.github:hover {
  background-color: rgb(84, 83, 83);
  color: var(--white);
  transition: 0.2s ease-in-out;
} /* ----------------------------- */
@media (min-width: 1921px) {
}
@media (max-width: 1199px) {
}
@media (max-width: 991px) {
}
@media (max-width: 768px) {
}
@media (max-width: 500px) {
} /* ----------------------------- */ /* TO COMPLETE */
.h1 {
}
.h2 {
}
.h3 {
}
.h4 {
}
.h5 {
}