/* ================= 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; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }

.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: .6em; }
.fs-7 { font-size: .7em; }
.fs-8 { font-size: .8em; }
.fs-9 { font-size: .9em; }
.fs-10 { font-size: 1em; }
.fs-11 { font-size: 1.1em; }
.fs-12 { font-size: 1.2em; }
.fs-14 { font-size: 1.4em; }
.fs-16 { font-size: 1.6em; }
.fs-18 { font-size: 1.8em; }
.fs-20 { font-size: 2em; }
.fs-22 { font-size: 2.2em; }
.fs-24 { font-size: 2.4em; }
.fs-32 { font-size: 3.2em; }

.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

.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); transition: .4s ease-in-out; }
.hover-success:hover { color: var(--bs-success); transition: .4s ease-in-out; }
.hover-danger:hover { color: var(--bs-danger); transition: .4s ease-in-out; }
.hover-shadow:hover { box-shadow: 2px 2px 10px #333; transition: .2s ease-in-out; }
.hover-grow:hover { transform: scale(1.2); 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;
}

.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;
}

.img-grayscale { filter: grayscale(100%); }

.mh-60 { max-height: 60px; }
.mh-80 { max-height: 80px; }
.mh-100 { max-height: 100px; }
.mh-120 { max-height: 120px; }
.mh-160 { max-height: 160px; }
.mh-180 { max-height: 180px; }
.mh-240 { max-height: 240px; }
.mh-320 { max-height: 320px; }

/* ================= 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%;
	}
}