/* ================= General ================= */
:root {
  --header-height: 3rem;
  --nav-width: 68px;
  --color-1: #e00d11;
  --color-2: #fecb00;
  --color-3: #314a7e;
  --color-4: #040203;
  --body-font: 'Nunito', sans-serif;
  --normal-font-size: 1rem;
  --z-fixed: 100
}

body {
  font-family: "poppins", sans-serif;
  color: #272829;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: #374785;
  text-decoration: none;
}

/* img { max-width: 100%; } */

h1, h2, h3, h4, h5, h6 {
  font-family: "Raleway", "poppins";
}
/* ================= General end ================= */


/* ================= Custom template start ================= */
.btn { display: flex; align-items: center; justify-content: center; }
.flex-start { display: flex; align-items: center; justify-content: start; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-end { display: flex; align-items: center; justify-content: end; }

.col-20 { width: 20%; }
.col-30 { width: 30%; }
.col-40 { width: 40%; }
.col-50 { width: 50%; }
.col-60 { width: 60%; }
.col-70 { width: 70%; }
.col-80 { width: 80%; }
.col-90 { width: 90%; }
.col-100 { width: 100%; }

@media (max-width: 1200px) { 
  .hide-lg { display: hide; }
  .remove-lg { display: none; }
}
@media (max-width: 992px) { 
  .hide-md { display: hide; }
  .remove-md { display: none; }
}
@media (max-width: 768px) {
  .hide-sm { display: hide; }
  .remove-sm { display: none; }
  .col-20, .col-40 { width: 50%; }
}

.fs-6 { font-size: 6pt; }
.fs-7 { font-size: 7pt; }
.fs-8 { font-size: 8pt; }
.fs-9 { font-size: 9pt; }
.fs-10 { font-size: 10pt; }
.fs-11 { font-size: 11pt; }
.fs-12 { font-size: 12pt; }
.fs-14 { font-size: 14pt; }
.fs-16 { font-size: 16pt; }
.fs-18 { font-size: 18pt; }
.fs-20 { font-size: 20pt; }
.fs-22 { font-size: 22pt; }
.fs-24 { font-size: 24pt; }
.fs-28 { font-size: 28pt; }
.fs-32 { font-size: 32pt; }
.fs-36 { font-size: 36pt; }
.fs-38 { font-size: 38pt; }
.fs-42 { font-size: 42pt; }
.fs-48 { font-size: 48pt; }
.fs-54 { font-size: 54pt; }

.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }
.ls-3 { letter-spacing: 3px; }
.ls-4 { letter-spacing: 4px; }
.ls-5 { letter-spacing: 5px; }

.hover-primary:hover { color: var(--bs-primary); }
.hover-shadow:hover { box-shadow: 2px 2px 10px #333; transition: .2s ease-in-out; }
.hover-pointer:hover { cursor: pointer; }
.hover-underline {
  display: inline-block;
  position: relative;
} .hover-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #374785;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
} .hover-underline:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.vertical-center {
    display: flex;
    align-items: center;
}
.loader { position: relative; width: 120px; display: none; }

.page-title {
  position: relative; 
  padding-bottom: 20px;
}
.page-title h1 {
  color: #202020;
  letter-spacing: 1px;
  font-size: 32pt; 
  margin-bottom: 4px;
}
.page-title p { color: var(--bs-secondary); letter-spacing: 1px; font-size: 11pt; margin: 0; }
.page-title::after {
  content: "";
  position: absolute;
  display: block;
  width: 70px;
  height: 3px;
  background: #e95344;
  bottom: 0;
  left: 0;
}
@media (max-width:1199px) {
    .page-title h1 { font-size: 24pt; }
}

/* ================= Custom template end ================= */


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--first-color);
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}
.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}
.back-to-top:hover {
  background: #2eafec;
  color: #fff;
}
.back-to-top.active {
  visibility: visible;
  opacity: 1;
}


/* ========================== Navigation start ========================== */

/* ============================ Spinner =================================== */
.spinner {
  left: 50%;
  top: 50%;
  height:60px;
  width:60px;
  margin:0px auto;
  -webkit-animation: rotation .6s infinite linear;
  -moz-animation: rotation .6s infinite linear;
  -o-animation: rotation .6s infinite linear;
  animation: rotation .6s infinite linear;
  border-left:6px solid rgba(0,174,239,.15);
  border-right:6px solid rgba(0,174,239,.15);
  border-bottom:6px solid rgba(0,174,239,.15);
  border-top:6px solid rgba(0,174,239,.8);
  border-radius:100%;
}
.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

@-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
  from {-moz-transform: rotate(0deg);}
  to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
  from {-o-transform: rotate(0deg);}
  to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}

/* Shine */
.hover-shine {
	margin: 0;
	padding: 0;
	background: #fff;
	overflow: hidden;
	position: relative;
}
.hover-shine:hover+span {
	bottom: -36px;
	opacity: 1;
}
.hover-shine::before {
	position: absolute;
	top: 0;
	left: -85%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.hover-shine:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}