/* ==== --------- (1.1) mixins start --------- ==== */
/* ==== --------- (1.1) mixins end --------- ==== */
/* ==== --------- (1.2) variables start --------- ==== */
/* ==== --------- (1.2) variables end --------- ==== */
/* ==== --------- (4.2) hero section styles start --------- ==== */
 .hero {
	 padding-top: 272px;
	 padding-bottom: 270px;
	 background-color: #f4f6ff;
	 background-size: contain;
	 background-position: left top 60px;
}
 @media only screen and (max-width: 1199px) {
	 .hero {
		 padding-top: 170px;
		 padding-bottom: 100px;
	}
}
 @media only screen and (max-width: 991px) {
	 .hero {
		 padding-top: 150px;
		 padding-bottom: 80px;
	}
}
 @media only screen and (max-width: 767px) {
	 .hero {
		 padding-top: 150px;
		 padding-bottom: 80px;
	}
}
 @media only screen and (max-width: 575px) {
	 .hero {
		 padding-top: 140px;
	}
}
 .home__bg {
	 background-image: url("../../../public/images/hero/hero-two-bg.png");
}
 .hero__bg {
	 background-image: url("../../../public/images/hero/light-bg.png");
}
 .hero__content h1 {
	 margin-top: 10px;
	 margin-bottom: 20px;
}
 @media only screen and (max-width: 767px) {
	 .hero__content h1 {
		 margin: 15px 0px;
	}
}
 .hero__content span {
	 color: #1657B6;
}
 .hero__cta__group {
	 display: flex;
	 align-items: center;
	 flex-wrap: wrap;
	 gap: 20px;
	 margin-top: 40px;
}
 @media only screen and (max-width: 767px) {
	 .hero__cta__group {
		 margin-top: 32px;
	}
}
 .hero__cta__group a {
	 min-width: 195px;
}
 .hero__illustration {
	 position: absolute;
	 right: 0px;
	 bottom: 135px;
}
 @media only screen and (max-width: 1399px) {
	 .hero__illustration {
		 bottom: unset;
		 top: 65%;
		 transform: translateY(-65%);
	}
}
 .hero__illustration img {
	 max-width: 59vw;
	 height: auto;
}
 @media only screen and (max-width: 1399px) {
	 .hero__illustration img {
		 max-width: 49vw;
	}
}
 .hero--two {
	 background-size: cover;
	 background-position: left top;
}
 @media (min-width: 1200px) {
	 .hero--two {
		 padding-top: 275px;
		 padding-bottom: 270px;
	}
}
 .hero--two .hero__content h1 {
	 max-width: 586px;
}
 @media only screen and (max-width: 991px) {
	 .hero--two .hero__content h1 {
		 max-width: 100%;
	}
}
 .hero--two .hero__illustration {
	 bottom: 100px;
}
 @media only screen and (max-width: 1399px) {
	 .hero--two .hero__illustration {
		 top: 50%;
		 transform: translateY(-50%);
	}
}
 .hero--two .hero__illustration img {
	 max-width: 50vw;
}
 @media only screen and (max-width: 1399px) {
	 .hero--two .hero__illustration img {
		 max-width: 40vw;
	}
}
 .hero--two__bg {
	 background-image: url("../../../public/images/hero/list-bg.png");
}
 .hero--three {
	 padding: 296px 0px;
	 background-color: #5529b7;
	 background-position: left bottom;
}
 @media only screen and (max-width: 1199px) {
	 .hero--three {
		 padding-top: 100px;
		 padding-bottom: 100px;
		 background-size: contain;
		 background-position: left bottom;
	}
}
 @media only screen and (max-width: 991px) {
	 .hero--three {
		 padding-top: 80px;
		 padding-bottom: 80px;
	}
}
 .hero--three .hero__content h5 {
	 color: #26dd77;
}
 .hero--three .hero__content h1 {
	 color: #fff;
	 max-width: 100%;
	 margin-bottom: 0px;
}
 @media only screen and (max-width: 767px) {
	 .hero--three .hero__content h1 {
		 margin: 10px 0px 8px;
	}
}
 .hero--three .hero__content p {
	 color: #fff;
}
 @media only screen and (max-width: 991px) {
	 .hero--three .hero__content p {
		 max-width: 85%;
	}
}
 @media only screen and (max-width: 424px) {
	 .hero--three .hero__content p {
		 max-width: 100%;
	}
}
 .hero--three .hero__content .button::before {
	 background-color: #1657B6;
}
 .hero--three .hero__content .button::after {
	 background-color: #1657B6;
}
 .hero--three .hero__content .button:hover {
	 color: #13216e;
	 background-color: #fff;
}
 .hero--three__bg {
	 background-image: url("../../../public/images/hero/hero-three-bg.png");
}
 .hero__list {
	 padding: 180px 0px 320px;
}
 @media only screen and (max-width: 1199px) {
	 .hero__list {
		 padding: 100px 0px 240px;
	}
}
 @media only screen and (max-width: 991px) {
	 .hero__list {
		 padding: 80px 0px 220px;
	}
}
 @media only screen and (max-width: 767px) {
	 .hero__list h5 {
		 margin-bottom: 8px;
	}
}
 @media only screen and (max-width: 767px) {
	 .hero__list .hero__content h1 {
		 font-size: 32px;
		 line-height: 42px;
		 margin: 18px 0px 10px;
	}
}
 .hero__list .hero__content .hero__cta__group {
	 margin-top: 35px;
}
/* ==== --------- (4.2) hero section styles end --------- ==== */