:root {
  /* typography weights & sizes */
  --extra-bold: 900;
  --bold: 800;
  --semi-bold: 700;
  --light-bold: 600;
  --extra-light-bold: 500;
  --super-extra-font: 90px;
  --super-medium-extra-font: 60px;
  --extra-large-font: 45px;
  --medium-extra-large-font: 30px;
  --semi-extra-large-font: 27px;
  --large-font: 22px;
  --semi-large-font: 20px;
  --medium-font: 18px;
  --small-font: 15px;
  --extra-small-font: 14px;
  --tiny-font: 13px;
  --extra-tiny-font: 11px;

  --primary-color: #ef6603;
  --primary-dark-color: #ff6a00;
  --white-color: #ffffff;
  --dull-color: #4C4C4C;
  --grey-color: #F6F6F6;
  --dark-grey-color: #bababa;
  --red-color: #ef4444;
  --prime-black: #151515;
  --secondary-black: #212121;
  --text-black: #2d2d2d;
  --secondary-text-black: #4C4C4C;
}

/**************************** COMMON STYLE ***************************/
a {
  text-decoration: none;
  color: inherit;
}

body {
  font-family: 'Rubik', sans-serif;
  color: var(--secondary-text-black);
}

/* p{
  text-align: justify;
} */

input, textarea, select {
  border-radius: 0px !important;
}

.global-cursor-pointer {
  cursor: pointer;
}

.global-background-grey {
  background-color: var(--grey-color);
}

.global-background-transparent {
  background-color: transparent;
}

.global-background-primary {
  background-color: var(--primary-color);
}

.global-parallax-banner {
  position: relative;
  overflow: hidden;
}

.global-parallax-bg{
  position: absolute;
  inset: 0;
  background-position: center;
  transform: translateY(0);
  will-change: transform;
  z-index: 0;
  object-fit: cover;
  height: 100vh;
}

.global-parallax-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 0;
  pointer-events: none;
}

.global-parallax-bg * {
  position: relative;
  z-index: 1;
}

/**************************** GLOBAL TEXT STYLE ************************/
.global-text-rubik {
  font-family: 'Rubik', sans-serif;
}

.global-text-rajhdani {
  font-family: 'Rajdhani', sans-serif;
}

.global-text-coda {
  font-family: 'Coda', sans-serif;
}

.global-text-color-white {
  color: var(--white-color);
}

.global-text-color-primary {
  color: var(--primary-color);
}

.global-text-color-black {
  color: var(--text-black);
}

.global-text-color-secondary-black {
  color: var(--secondary-text-black);
}

.global-bnr-heading {
  font-weight: var(--extra-bold);
  font-size: var(--extra-large-font);
  text-transform: uppercase;
}

.global-main-heading {
  font-size: var(--medium-extra-large-font);
  font-weight: var(--extra-bold);
  text-transform: uppercase;
}

.global-secondary-sub-heading {
  font-weight: var(--extra-light-bold);
  font-size: var(--medium-font);
}

.global-sub-heading {
  font-weight: var(--light-bold);
  font-size: var(--medium-font);
}

.global-extra-large-content-text {
  font-size: var(--extra-large-font);
  line-height: 1.8;
}

.global-large-content-text {
  font-size: var(--medium-font);
  line-height: 1.8;
}

.global-medium-content-text {
  font-size: var(--small-font);
  line-height: 1.8;
}

.global-small-content-text {
  font-size: var(--extra-small-font);
  line-height: 1.6;
}

.global-tiny-content-text {
  font-size: var(--tiny-font);
  line-height: 1.6;
}

.global-extra-tiny-content-text {
  font-size: var(--extra-tiny-font);
  line-height: 1.6;
}

.global-ul {
  padding-left: 0;
}

.global-ul li{
  list-style: none;
  padding: 3px 0;
}

.global-ul li::before {
  content: "\21F0";
  padding-right: 15px;
  font-weight: var(--extra-bold);
  color: var(--primary-color);
}

/********************* GLOBAL-BUTTON  ************************/

.global-btn-primary,
.global-btn-secondary {
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-family: 'Rajdhani', sans-serif;
  border-radius: 0;
  cursor: pointer;
}

.global-btn-primary::before,
.global-btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  transition: 0.8s ease;
  z-index: -1;
}

/* PRIMARY */
.global-btn-primary {
  background: var(--primary-color);
  color: var(--white-color);
}

.global-btn-primary::before {
  background: var(--white-color);
}

.global-btn-primary:hover::before {
  transform: translateX(0);
}

.global-btn-primary:hover {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

/* SECONDARY */
.global-btn-secondary {
  background: var(--white-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.global-btn-secondary::before {
  background: var(--primary-color);
}

.global-btn-secondary:hover::before {
  transform: translateX(0);
}

.global-btn-secondary:hover {
  color: var(--white-color);
}

.global-circle-btn-primary,
.global-circle-btn-secondary {
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-family: 'Rajdhani', sans-serif;

  /* circle */
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* hover layer */
.global-circle-btn-primary::before,
.global-circle-btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  transition: 0.8s ease;
  z-index: -1;
  border-radius: 50%;
}

/* ===== PRIMARY CIRCLE ===== */
.global-circle-btn-primary {
  background: var(--primary-color);
  color: var(--white-color);
  border: 1px solid var(--primary-color);
  cursor: pointer;
}

.global-circle-btn-primary::before {
  background: var(--white-color);
}

.global-circle-btn-primary:hover::before {
  transform: translateX(0);
}

.global-circle-btn-primary:hover {
  color: var(--primary-color);
}

/* ===== SECONDARY CIRCLE ===== */
.global-circle-btn-secondary {
  background: var(--white-color);
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
  cursor: pointer;
}

.global-circle-btn-secondary::before {
  background: var(--primary-color);
}

.global-circle-btn-secondary:hover::before {
  transform: translateX(0);
}

.global-circle-btn-secondary:hover {
  color: var(--white-color);
}

/* ======= GLOBAL CARD ====== */

.global-card{
  /* border: 1px solid var(--dark-grey-color); */
  border-radius: 0;
  box-shadow: 2px 2px 2px var(--dull-color);
}