/* Custom styles for LocalLoop landing page */

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background: #053974 !important;
}

.swiper-pagination .swiper-pagination-bullet {
	border: 2px solid #053974 !important;
}

.back-to-top {
	background: #053974 !important;
}

.header-hero-content .header-title span {
	display: contents;
	color: #000 !important;
}


.navbar-nav .nav-item.active>a,
.navbar-nav .nav-item:hover>a {
	color: #fff !important;
}

.navbar-nav .nav-item a {
	font-size: 16px;
	font-weight: 600;
	color: #fff !important;
}

nav.navbar.navbar-expand-lg h4 {
	color: black important;
}

.navbar-area.sticky {
	position: fixed;
	z-index: 99;
	background-color: #002e64 important;
}

#footer {
	text-align: center;
	background: #e9e9e9;
	padding: 40px 10px;
}

.footer-widget .container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 30px;
	max-width: 1200px;
	margin: 0 auto;
}

.footer-widget .container > div {
	flex: 1 1 250px;
	text-align: left;
}

.footer-title {
	margin-top: 30px;
	text-align: center;
}

.pb-120 {
	padding-bottom: 60px !important;
}

.pt-110 {
	padding-top: 60px !important;
}

@media (max-width: 767px) {
	.navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: #053974 !important;
		z-index: 9;
		-webkit-box-shadow: 0px 15px 20px 0px rgba(56, 66, 77, 0.1);
		-moz-box-shadow: 0px 15px 20px 0px rgba(56, 66, 77, 0.1);
		box-shadow: 0px 15px 20px 0px rgba(56, 66, 77, 0.1);
		padding: 8px 17px !important;
	}
}

.navbar-toggler .toggler-icon {
	width: 30px;
	height: 2px;
	background-color: #fff !important;
	display: block;
	margin: 5px 0;
	position: relative;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
}

.section-title .title {
	font-size: 25px !important;
	font-weight: 600;
}

/* Outer section */
.accordion-slider{
	padding:80px 0;
	background:#f7f8fa;
}

.accordion-track{
	display:flex;
	gap:20px;
	max-width:1200px;
	margin:auto;
}

.accordion-card{
	flex:1;
	background:white;
	border-radius:16px;
	padding:40px 25px;
	transition:all .45s ease;
	cursor:pointer;
	position:relative;
	overflow:hidden;
	box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.accordion-card h4{
	font-size:22px;
	margin-bottom:15px;
}

.accordion-card p,
.accordion-card li{
	font-size:15px;
	color:#555;
}

.accordion-card ul{
	padding-left:18px;
}

.accordion-card strong{
	display:block;
	margin-top:15px;
}

.accordion-card.active{
	flex:2;
	background:#00499e;
	color:white;
}

.accordion-card.active p,
.accordion-card.active li{
	color:#e7edf7;
}

.accordion-card:hover{
	flex:2;
}

@media(max-width:768px){

	.accordion-container{
		flex-direction:column;
	}

	.accordion-card{
		flex:unset;
	}

}

/* Section background spacing */
.ingredient-area {
	position: relative;
	overflow: hidden;
}

/* Center circle container */
.ingredients-img {
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: linear-gradient(135deg, #053974, #2563EB);
	display: flex;
	align-items: center;
	justify-content: center;
}

/*.ingredients-img:hover{*/
/*	transform: translateY(-10px);*/
/*}*/

.ingredients-img img {
	width: 40%;
	height: 40%;
	object-fit: contain;
}

.how-steps{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:40px;
	position:relative;
	margin-top:40px;
}

/* connection line */
.how-steps::before{
	content:'';
	position:absolute;
	top:40px;
	left:10%;
	width:80%;
	height:2px;
	background:#d6d6d6;
	z-index:0;
}

.how-step{
	background:#fff;
	padding:30px 25px;
	border-radius:14px;
	text-align:center;
	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	position:relative;
	z-index:1;
	transition:all .3s ease;
}

.how-step:hover{
	transform:translateY(-8px);
}

/* icon circle */
.how-icon{
	width:70px;
	height:70px;
	background:#053974;
	border-radius:50%;
	color:white;
	font-size:28px;
	display:flex;
	align-items:center;
	justify-content:center;
	margin:0 auto 15px;
}

.how-step h5{
	font-weight:600;
	margin-bottom:10px;
}

.how-step p{
	font-size:14px;
	color:#555;
}

@media(max-width:768px){

	.how-steps{
		flex-direction:column;
	}

	.how-steps::before{
		display:none;
	}

}

.navbar-brand {
	display: flex;
	align-items: center;
}

.logo-circle {
	width: 80px;
	/* adjust based on your logo size */
	height: 80px;
	/* adjust based on your logo size */
	border-radius: 50%;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
	/* space between logo and text */
}

.logo-circle img {
	width: 80%;
	/* adjust image size inside the circle */
	height: 80%;
	/* adjust image size inside the circle */
}

@media (max-width: 767px) {
	.header-hero-content {
		padding-top: 180px !important;
	}

	.header-image {
		padding-top: 80px !important;
		position: relative !important;
		z-index: 5 !important;
		margin-bottom: 10px !important;
	}
}

.single-features {
	padding: 20px !important;
}

.features-image {
	position: relative;
	max-width: 70%;
	margin-left: auto;
	padding-right: 60px;
	margin-top: 23px;
	margin-bottom: 64px;
}

.single-features.features-color-1 .features-icon {
	background-color: #0898E7;
}

.single-features.features-color-2 .features-icon {
	background-color: #8950E4;
}

.single-features.features-color-3 .features-icon {
	background-color: #FDB11B;
}

.single-features.features-color-4 .features-icon {
	background-color: #e73a25;
}

.single-features.features-color-5 .features-icon {
	background-color: #1fe431;
}

.screenshot-frame img {
	border-radius: 10px !important;
	/*height: 716px !important;*/
	/*margin-top: 10px !important;*/
	/*border: 2px solid #053974 !important;*/
}

.screenshot-frame {
	position: absolute !important;
	top: 12px !important;
	left: 51% !important;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 380px !important;
	height: 100% !important;
	z-index: 5 !important;
}

.color-change {
	filter: invert(90%) sepia(100%) saturate(2000%) hue-rotate(195deg);
	/* Adjusted for #053974 */
}