/* ==== --------- (1.1) mixins start --------- ==== */
/* ==== --------- (1.1) mixins end --------- ==== */
/* ==== --------- (1.2) variables start --------- ==== */
/* ==== --------- (1.2) variables end --------- ==== */
/* ==== --------- (3.2) buttons styles start --------- ==== */
 .button {
	 padding: 11px 24px 13px;
	 background-color: #1657B6;
	 border-radius: 8px;
	 /* box-shadow: 0px 4px 24px 0px rgba(13, 87, 186, 0.25); */
	 text-align: center;
	 position: relative;
	 overflow: hidden;
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 gap: 2px;
}
 @media only screen and (max-width: 767px) {
	 .button {
		 padding: 8px 24px 10px;
	}
}
 .button i {
	 margin-left: 3px;
}
 @media only screen and (max-width: 575px) {
	 .button {
		 padding: 10px 20px 11px;
		 font-size: 11px;
	}
}
 .button::before {
	 background: #fff;
	 content: "";
	 height: 160px;
	 opacity: 0;
	 position: absolute;
	 top: -50%;
	 bottom: 0px;
	 transform: rotate(15deg);
	 width: 24px;
	 transition: all 2000ms cubic-bezier(0.19, 1, 0.22, 1);
}
 .button::after {
	 background: #fff;
	 content: "";
	 height: 160px;
	 opacity: 0;
	 position: absolute;
	 top: -50%;
	 transform: rotate(15deg);
	 transition: all 3000ms cubic-bezier(0.19, 1, 0.22, 1);
	 width: 24px;
}
 .button:hover {
	 color: #fff;
	 /* box-shadow: 0px 10px 24px 0px rgba(13, 87, 186, 0.8); */
}
 .button--secondary {
	 background-color: #fff;
	 color: #13216e;
}
 .button--secondary:hover {
	 background-color: #1657B6;
	 color: #fff;
}
 .button--effect::before {
	 left: -50%;
}
 .button--effect::after {
	 left: -100%;
}
 .button--effect:hover::before {
	 left: 120%;
	 opacity: 0;
}
 .button--effect:hover::after {
	 left: 200%;
	 opacity: 0.5;
}
 .scrollToTop {
	 position: fixed;
	 bottom: 0;
	 right: 24px;
	 width: 45px;
	 height: 45px;
	 background-color: #1657B6;
	 border-radius: 5px;
	 color: #fff;
	 line-height: 45px;
	 font-size: 20px;
	 text-align: center;
	 z-index: 999;
	 cursor: pointer;
	 box-shadow: 0px 4px 24px 0px rgba(19, 33, 110, 0.25);
	 transition: all 0.3s ease-out;
	 transform: translateY(100%);
}
 @media only screen and (max-width: 1199px) {
	 .scrollToTop {
		 right: 12px;
		 width: 30px;
		 height: 30px;
		 line-height: 30px;
		 font-size: 16px;
		 border-radius: 0px;
	}
}
 @media only screen and (max-width: 767px) {
	 .scrollToTop {
		 font-size: 14px;
	}
}
 .scrollToTop i {
	 color: #fff;
	 transition: all 0.3s ease-out;
}
 .scrollToTop:hover {
	 background-color: #1657B6;
	 box-shadow: 0px 10px 24px 0px rgba(13, 87, 186, 0.8);
}
 .scrollToTop:hover i {
	 color: #fff;
}
 .scrollToTop.active {
	 bottom: 30px;
	 transform: translateY(0%);
}
 @media only screen and (max-width: 767px) {
	 .scrollToTop.active {
		 bottom: 15px;
	}
}
/* ==== --------- (3.2) buttons styles end --------- ==== */