/* * why choose us section  css */
*/ .site-heading h2 {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.site-heading h2 span {
  color: #2676bb;
}

.site-heading h4 {
  display: inline-block;
  padding-bottom: 20px;
  position: relative;
  text-transform: capitalize;
  z-index: 1;
}

.site-heading h4::before {
  background: #2676bb none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 2px;
  left: 50%;
  margin-left: -25px;
  position: absolute;
  width: 50px;
}

.site-heading {
  margin-bottom: 60px;
  overflow: hidden;
  margin-top: -5px;
}

.carousel-shadow .owl-stage-outer {
  margin: -15px -15px 0;
  padding: 15px;
}

.we-offer-area .our-offer-carousel .owl-dots .owl-dot span {
  background: #ffffff none repeat scroll 0 0;
  border: 2px solid;
  height: 15px;
  margin: 0 5px;
  width: 15px;
}

.we-offer-area .our-offer-carousel .owl-dots .owl-dot.active span {
  background: #2676bb none repeat scroll 0 0;
  border-color: #2676bb;
}

.we-offer-area .item {
  background: #ffffff none repeat scroll 0 0;
  border-left: 2px solid #2676bb;
  -moz-box-shadow: 0 0 10px #cccccc;
  -webkit-box-shadow: 0 0 10px #cccccc;
  -o-box-shadow: 0 0 10px #cccccc;
  box-shadow: 0 0 10px #cccccc;
  overflow: hidden;
  padding: 30px;
  position: relative;
  z-index: 1;
}

.we-offer-area.text-center .item {
  background: #ffffff none repeat scroll 0 0;
  border: medium none;
  padding: 30px 20px;
  border-radius: 15px;
}

.we-offer-area.text-center .item i {
  background: #2676bb none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #ffffff;
  font-size: 40px;
  height: 80px;
  line-height: 80px;
  position: relative;
  text-align: center;
  width: 80px;
  z-index: 1;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  margin-bottom: 25px;
}

.we-offer-area.text-center .item i::after {
  border: 2px solid #2676bb;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 90px;
  left: -5px;
  position: absolute;
  top: -5px;
  width: 90px;
  z-index: -1;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.we-offer-area.item-border-less .item {
  border: medium none;
}

.we-offer-area .our-offer-items.less-carousel .equal-height {
  margin-bottom: 30px;
}

.we-offer-area.item-border-less .item .number {
  font-family: "Poppins", sans-serif;
  font-size: 50px;
  font-weight: 900;
  opacity: 0.1;
  position: absolute;
  right: 30px;
  top: 30px;
}

.our-offer-carousel.center-active .owl-item:nth-child(2n) .item,
.we-offer-area.center-active .single-item:nth-child(2n) .item {
  background: #2676bb none repeat scroll 0 0;
}

.our-offer-carousel.center-active .owl-item:nth-child(2n) .item i,
.our-offer-carousel.center-active .owl-item:nth-child(2n) .item h4,
.our-offer-carousel.center-active .owl-item:nth-child(2n) .item p,
.we-offer-area.center-active .single-item:nth-child(2n) .item i,
.we-offer-area.center-active .single-item:nth-child(2n) .item h4,
.we-offer-area.center-active .single-item:nth-child(2n) .item p {
  color: #ffffff;
}

.we-offer-area .item i {
  color: #2676bb;
  display: inline-block;
  font-size: 60px;
  margin-bottom: 20px;
}

.we-offer-area .item h4 {
  font-weight: 600;
  text-transform: capitalize;
  margin-top: 10px;
  margin-bottom: 10px;
}

.we-offer-area .item p {
  margin: 0;
}

.we-offer-area .item i,
.we-offer-area .item h4,
.we-offer-area .item p {
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
}

.we-offer-area .item::after {
  background: #2676bb none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transition: all 0.35s ease-in-out;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  width: 100%;
  z-index: -1;
}

.we-offer-area .item:hover::after {
  left: 0;
}

.we-offer-area .item:hover i,
.we-offer-area .item:hover h4,
.we-offer-area .item:hover p {
  color: #ffffff !important;
}

.we-offer-area.text-center .item:hover i::after {
  border-color: #ffffff !important;
}

.we-offer-area.text-center .item:hover i {
  background-color: #ffffff !important;
  color: #2676bb !important;
}

.we-offer-area.text-left .item i {
  background: #2676bb none repeat scroll 0 0;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  font-size: 60px;
  height: 100px;
  line-height: 100px;
  margin-bottom: 30px;
  position: relative;
  width: 100px;
  z-index: 1;
  text-align: center;
}

.we-offer-area.text-left .item i::after {
  border: 2px solid #2676bb;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  height: 120px;
  left: -10px;
  position: absolute;
  top: -10px;
  width: 120px;
}

/* location section csss */

a,
a:active,
a:focus {
  color: #6f6f6f;
  text-decoration: none;
  transition-timing-function: ease-in-out;
  -ms-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -webkit-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  -ms-transition-duration: 0.2s;
  -moz-transition-duration: 0.2s;
  -webkit-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
}
.fancy-title-view1 {
  float: left;
  width: 100%;
  margin-bottom: 70px;
  text-align: center;
}
.fancy-title-view1 h2 {
  margin-bottom: 8px;
  font-size: 40px;
  font-weight: 700;
  display: block;
}
.fancy-title-view1 p {
  margin-bottom: 0px;
  display: inline-block;
  width: 65%;
}
.fancy-title-view1 i {
  font-size: 22px;
}
.fancy-title-view1-color h2,
.fancy-title-view1-color p {
  color: #ffffff;
}

.light-transparent {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0.65;
  background-color: #000;
}
.categories-view1-full {
  padding: 80px 0px 80px 0px;
  margin-top: 0;
  margin-bottom: 0;
  background: url(https://i.ibb.co/r4xf3sK/newslater.jpg);
  background-attachment: fixed;
  position: relative;
  min-height: 100vh;
}
.categories,
.categories-view1-wrap {
  float: left;
  width: 100%;
}
.categories ul li {
  list-style: none;
}
.categories > ul > li {
  float: none;
  display: inline-block;
  margin: 0px 0px 30px 0px;
  vertical-align: top;
}
.categories-view1-wrap {
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.08);
  padding: 30px 50px 30px 95px;
  border-radius: 10px;
  position: relative;
  background-color: #ffffff;
}
.categories-view1 i {
  position: absolute;
  left: 0px;
  top: 50%;
  font-size: 30px;
  color: #317cbc;
  width: 70px;
  height: 70px;
  border-radius: 0 100% 100% 0;
  text-align: center;
  padding-top: 18px;
  margin-top: -36px;
  background-color: #ffffff;
  border: 1px solid #eee;
  border-left: none;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.categories-view1 li:hover i {
  color: #ffffff;
  background-color: #274160;
}
.categories-view1 a {
  display: block;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0px;
}
.categories-view1 small {
  font-size: 13px;
  color: #666;
}
.categories-view1 span {
  position: absolute;
  right: 5px;
  top: 8px;
  font-size: 90px;
  font-weight: 500;
  color: #999;
  opacity: 0.07;
  line-height: 1;
}
.main-load-btn {
  float: left;
  width: 100%;
  text-align: center;
  margin: 30px 0px;
}
.main-load-btn a {
  display: inline-block;
  line-height: 1;
  padding: 18px 45px;
  color: #ffffff;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 600;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  background-color: #fb236a;
}
.main-load-btn a:hover {
  background-color: #274160;
}
.more-spacer {
  float: left;
  width: 100%;
  margin: 10px 0px;
}



/* location css */


:root {
	--dark: #252A2E;
	--light: #F5F5F5;
	--background: var(--light);
	--text: var(--dark);
	--border: var(--dark);
}
@media (prefers-color-scheme: dark) {
	:root {
		--background: var(--dark);
		--text: var(--light);
		--border: var(--light);
	}
}


/*	CURRENT MAX WIDTH IS JUST FOR DEMO PURPOSES */
.tag-scrollers {
	width: 100%;
	max-width: 1200px;
	overflow: hidden;
}

/*	POSSIBLY UPDATE COLORS IN THE GRADIENT
		TO MATCH THE PROJECTS DESIGN SYSTEM
*/
.tag-scroller {
	display: grid;
	gap: 1.5rem;
	mask: linear-gradient(90deg, #0000, var(--background) 15%, var(--background) 85%, #0000);
}

.tag-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	/*	IF THE GAP IS CHANGED, DON'T FORGET TO CHANGE 
			THE TRANSFORM VALUE IN THE SCROLL ANIMATION
			AT THE END OF THE STYLING
	*/
	gap: 1.5rem;
}

/*	IF THE USERS PREFERS REDUCED MOTION
		PRESENT THEM WITH A HOROZONTAL LIST
		OF ALL ELEMENTS AND GIVE THEM THE
		OPTION TO MANUALLY SCROLL BY SWIPING
*/
@media (prefers-reduced-motion) {
	.tag-list {
		flex-flow: row nowrap;
		overflow: auto;
		scrollbar-width: none;
		scrollbar-color: transparent transparent;
	}
	.tag-list::-webkit-scrollbar-track {
		background: transparent;
	}
	.tag-list::-webkit-scrollbar-thumb {
		background: transparent;
	}
	.tag-list::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}
}

/*	BASIC STYLING OF THE LIST ITEMS
		FOR DEMO PURPOSES. MOST PROPERTIES
		SHOULD BE KEPT AS IS BUT PROBABLY
		UPDATE THE VALUE FOR font-family
		AND border
*/
.tag-list li {
  font-size: 1.125rem;
  line-height: 1;
  padding: 0.625rem 1.375rem;
  border: 2px solid var(--border);
  border-radius: 10ch;
  white-space: nowrap;
  background: #ffffff;
  /* box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); */
  backdrop-filter: blur( 4px );
  -webkit-backdrop-filter: blur( 4px );
  border-radius: 10px;
  border: 1px solid rgba( 255, 255, 255, 0.18 );
  font-weight: 600;
  /* background: white; */

}

/*	THE DURATION IS SET FROM A CUSTOM PROPERTY
		CALCULATED IN THE SCRIPT AS IT'S ONLY NEEDED
		IF THE ANIMATION SHOULD RUN, WHICH IS ALSO
		CHECKED BY THE SCRIPT

		THE DIRECTION IS SET TO normal AS DEFULT
		AND THEN SET TO reverse	FOR EVERY OTHER SCROLLER
*/
.tag-scroller.scrolling .tag-list {
	width: max-content;
	flex-wrap: nowrap;
	animation: horizontal-scroll var(--duration) var(--direction, normal) linear infinite;
}

.tag-scroller.scrolling .tag-list:nth-child(even) {
	--direction: reverse;
}

/* PAUSING THE ANIMATION ON HOVER */
.tag-scroller:hover .tag-list {
	animation-play-state: paused;
}

@keyframes horizontal-scroll {
	to {
		/*	0.75rem FOR HALF THE GAP
				OF THE .tag-scroller
		*/
		transform: translateX(calc(-50% - .75rem));
	}
}