@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300..700&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


:root {
	--font-family-1: Montserrat;
	--font-family-2: Comfortaa;
}

/* header section START */
.header-container {
	padding: 0px 100px;
}

.header-li-cus {
	margin-left: 20px;
}

.header_txt_plus {
	color: #333;
	font-family: var(--font-family-2);
	font-size: 45px;
	font-weight: 700;
}

.header_logo {
	width: 75px;
	height: 56px;
}

.dna_logo {
    width: 330px;
    height: 75px;
}

.brand-container {
    border-radius: 50px;
    background: #FFF;
    box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.07);
    display: flex;
    justify-content: start;
    padding: 0px;
    gap: 40px;
}

@media (min-width: 992px) and (max-width: 1120px) {
	.header-container {
		padding: 0px 50px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.header-container {
		padding: 5px 0px 0px 20px;
	}
}

@media (min-width: 460px) and (max-width: 767px) {
	.header_logo {
		width: 60px;
		height: 45.026px;
	}

	.dna_logo {
		width: 170px;
		height: 55.026px;
	}
}

@media (min-width: 250.98px) and (max-width: 767px) {
	.header-container {
		padding: 5px 0px 0px 20px;
	}

	.header-li-cus {
		margin-left: 10px;
	}

	.header_txt_plus {
		font-size: 25px;
	}
}

@media (min-width: 250.98px) and (max-width: 460px) {
	.header_logo {
		width: 50px;
		height: 35.026px;
	}

	.dna_logo {
        width: 110px;
        height: 50.026px;
    }
}

/* header section END */

/* Footer section START */
.footer-container {
	padding: 80px 100px;
}

.footer_store_icons img {
	width: 229px;
	height: 74px;
}

.social_bg {
	width: 33px;
	height: 33px;
	border-radius: 100px;
	font-size: 20px;
	color: #EF4627 !important;
}

.f_head_txt {
	color: #F8FAFC;
	font-family: var(--font-family-1);
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
	text-transform: uppercase;
	margin-bottom: 20px;
	cursor: pointer;
}

.f_body_txt {
	margin-bottom: 12px;
	cursor: pointer;
}

.f_body_txt a {
	color: rgba(248, 250, 252, 0.80);
	font-family: var(--font-family-1);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	text-decoration: none;
}

.f-copy-right {
	color: rgba(248, 250, 252, 0.80);
	font-family: var(--font-family-1);
	font-size: 13.778px;
	font-weight: 400;
}

@media (min-width: 992px) and (max-width: 1120px) {
	.footer-container {
		padding: 80px 50px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.footer_div_contain:not(:first-child):not(:nth-child(2)) {
		margin-top: 40px;
	}
}

@media (min-width: 250.98px) and (max-width: 767px) {
	.footer-container {
		padding: 60px 20px;
	}

	.footer_div_contain:not(:first-child) {
		margin-top: 40px;
	}

	.footer_store_icons img {
		width: 181px;
		height: 60px;
	}

	.social_bg {
		width: 35px;
		height: 35px;
	}
}

/* Footer section END */


* {
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Montserrat' !important;
	background-color: #FFFFFF;
	width: 100%;
	height: 100% !important;
}

#home {
	min-width: 100% !important;
	min-height: 100% !important;
}

#about {
	min-width: 100% !important;
	min-height: 100% !important;
}

.top {
	padding: 0px 0px;

}

.sign-on {
	width: 430px;
	height: 226px;
	border: 5px solid #000000;
	margin-right: 0px;

	position: absolute;
	border-radius: 50px;
	transform: rotate(-25deg);
	margin-top: 80px;
	left: 25%;
	z-index: 10;
	background-color: #fff;

}

.sign-on-text1 {
	position: absolute;
	background-color: #fff;
	width: 100%;
	height: auto;
}

.sign-on-text2 {

	position: absolute;
	background-color: #000;
	width: 100%;
	height: auto;


}

.row .bottom-btn-container button:first-child {
	background: #fff;
	color: #EF4627;
	border: 1px solid #EF4627;
	font-size: 16px;
	margin-bottom: 5%;
}

.row .bottom-btn-container button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 12px;
	gap: 10px;
	border-radius: 50px;
	flex: none;
	order: 0;
	flex-grow: 0;
}

.home-content-left-text1 {
	font-size: 63px;
	font-family: "comfortaa";
	font-optical-sizing: auto;
	font-weight: 700;
	line-height: 70.25px;
	-webkit-text-stroke: 1px #333333;
}

.home-content-left-text2 {
	font-size: 24px;
	font-family: "Montserrat";
	font-weight: 500;
	line-height: 29.26px;
	margin-top: 44px;
}


.navbar-container {
	padding-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
}

.nav-options {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	flex-wrap: wrap;
	list-style-type: none;
}


.nav-options li a {
	color: #333333;
	line-height: 40px;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.nav-button {
	width: 200px;
	height: 56px;
	border: none;
	background-color: #EF4627;
	color: #FFFFFF;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.wrapper-container {
	display: flex;
	position: relative;
	margin-top: 5rem;
}


.top,
.bottom {
	flex: 1;
	position: relative;
	background-color: white;
	flex-direction: column;

}

.top {
	padding: 88px 0px;
	gap: 40px;
}

.top:nth-child(1 * n) {
	padding-bottom: 5rem !important;
}

.top h4 {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-size: 42px;
	line-height: 51px;
	text-transform: uppercase;
	color: #333333;
}

.top span {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 29px;
	color: #686868;
}

.bottom {
	clip-path: circle(90% at 50% -80%);
	height: 70vh !important;
	width: 100%;
	position: relative;
	border-bottom: solid transparent;
}




.top .bottom-btn-container button {
	/* Frame 29 */

	/* Auto layout */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 8px 12px;
	gap: 10px;



	border-radius: 50px;


	/* Inside auto layout */
	flex: none;
	order: 0;
	flex-grow: 0;

}

.tabs>input[type="radio"]+label {
	font-style: "Comfortaa";
	border: 1px solid #EF4627;
	color: #EF4627;
	font-size: 16px;
	padding: 8px 12px;
	border-radius: 50px;
	line-height: 40px;
	font-weight: 500 !important;
	min-width: 210px;
}

.tabs>input[type="radio"]:checked+label {
	background: #EF4627;
	color: #fff;
}

.tabs>input[type="radio"]+label:hover {
	background-color: #EF4627;
	color: #fff;
}

.tabs-content {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.feature-action-btn {
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}

.feature-action-btn a {
	margin-left: 20px;
	border-radius: 40px;
}

.discount-adversting {
	text-align: left;
}

.discount-adversting a {
	border-radius: 40px;
	margin: 10rem 0 0 0;
}

.discount-adversting {
	display: none;
}

#tab-btn-1:checked~#content-1,
#tab-btn-2:checked~#content-2,
#tab-btn-3:checked~#content-3,
#tab-btn-4:checked~#content-4,
#tab-btn-5:checked~#content-5 {
	display: block !important;
}

.top .bottom-btn-container button:first-child {
	background: #fff;
	color: #EF4627;
	border: 1px solid #EF4627;
	font-size: 20px;
}

.top .bottom-btn-container button:nth-child(2) {
	background-color: white;
	color: #EF4627;
	border: 1px solid #EF4627;
}

.bottom {
	background-color: #EF4627;
}

.right {
	z-index: 2;

}

.right .mobile {
	position: absolute;
	right: -10%;
	top: 5rem;
	transform: scale(1);
	z-index: 10;

}

.right .mobile .img-align {
	position: relative;
}

.right .mobile .mobile-offer-append {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.right .mobile .mobile-offer-append>img {
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translate(-165px, 52px);
}

.right .mobile .mobile-offer-append div {
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translate(-21rem, -19rem);
	z-index: -9;
}

.right .mobile .mobile-offer-append>img:nth-child(1) {
	position: relative;
	width: 50%;
	z-index: -10;
	transform: translate(-100px, 130px);
}

.right .mobile .mobile-offer-append>div>img:nth-child(1) {
	position: relative;
	width: 100%;
	height: 100%;
}

.right .mobile .mobile-offer-append>div>img:nth-child(2) {
	position: absolute;
	top: 0%;
	left: 0%;
	transform: translate(-52%, -48%);
}

.right .mobile .mobile-offer-append>div>img:nth-child(3) {
	position: absolute;
	top: 58%;
	left: 48%;
	transform: translate(-52%, -48%);
}

.right .mobile-shadow {
	position: absolute;
	top: 8%;
	right: 7%;
	transform: scale(1);
	opacity: 0.7;
}

.right img {
	transform: scale(1);
}

.button-container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 40px;
}

.app-container {

	gap: 12px;
	margin-top: 2rem;
	padding: 10rem 0;

}

.app-footer-container {
	gap: 12px;
	margin-top: 2rem;
	padding: 0;
}

.app-footer-container .apple-container {
	background: #FFFFFF;
	border-radius: 110px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 230px;
	padding: 1rem 1.2rem;
}

.apple-wrapper {

	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 50px;
}

.app-container .apple-container {
	background: #FFFFFF;
	border-radius: 110px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 260px;
	padding: 8px 20px 8px 20px;
}

.apple-container img {
	height: 30px;
	width: 30px;
}

.rated-text {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-size: 25px;
	line-height: 39px;
	text-transform: capitalize;
	color: #FFFFFF;
	flex: none;
	order: 0;
	flex-grow: 0;

}

.app-text span:first-child {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-size: 14px;
	color: #333333;
}

.app-text span:nth-child(2) {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-size: 22px;
	color: #333333;
}

.text-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1rem;
	gap: 12px;
	width: 205px;
	height: 90px;

}

.text-container span:first-child {

	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-size: 35px;
	line-height: 51px;
	text-transform: uppercase;
	color: #FFFFFF;

}

.text-container span:nth-child(2) {

	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 27px;
	text-transform: capitalize;
	color: #FFFFFF;

}

#info-card {
	width: 100%;
	position: relative;
	bottom: 12rem;
}

.card-section {
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
	gap: 1rem;
}

.card-img-section {
	display: flex;
	gap: 5rem;
	justify-content: center;
}

.cardContainer {
	box-sizing: border-box;
	padding: 20px;
	gap: 20px;
	width: 301px;
	height: 253px;
	background: #FFFFFF;
	-webkit-box-shadow: 0px 0px 10px rgba(239, 70, 39, 0.15);
	box-shadow: 0px 0px 10px rgba(239, 70, 39, 0.15);
	border-radius: 20px;
	text-align: center;
	align-content: center;
}



.cardContainer h5 label {
	font-size: 25px;
	line-height: 50px;
	font-family: "Montserrat";
	font-weight: 600;
	color: #333333;
}

.cardContainer h5 span:nth-child(2) {
	font-size: 35px;
	line-height: 50px;
	font-family: "Montserrat";
	font-weight: 600;
	color: #333333;
}

.cardContainer-span {
	font-size: 50px;
	line-height: 60px;
	font-family: "Comfortaa";
	font-weight: 600;
	color: #333333;
	text-align: center;
	-webkit-text-stroke: 1.5px #000;
}

.imgcard h5 {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	line-height: 29px;
	color: #222222;

}

.imgcard span {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-size: 15px;
	line-height: 18px;
	color: #222222;
}

.imgcard h5 span {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-size: 15px;
	line-height: 18px;
	color: #222222;
}

.imgcard div.blue-radius {
	background-color: #EF4627;
	width: 44.24px;
	height: 44.24px;
	border-radius: 50%;
	margin: 10% 0px 20px 40%;
}

.imgcard div.blue-radius span {
	font-size: 44.24px;
	line-height: 53.93px;
	color: #fff;
	text-align: center;
}

.simple-banner {
	margin-top: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 4rem;
}

.simple-banner h5 {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-size: 50px;
	line-height: 56px;
	color: #333333;
}

.simple-banner-content span {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 29px;
	color: #222222;
}

.banner-card {
	margin-top: 3rem;
	width: 78%;
	height: 529px;
	background: #FFFFFF;
	box-shadow: 0px 0px 60px 20px rgba(0, 0, 0, 0.07);
	padding: 6rem;
}

.banner-card span {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-size: 20px;
	line-height: 29px;
	text-align: center;
	color: #222222;
}

.brand-card {
	padding-top: 80px;
	padding-bottom: 80px;
	height: auto;
	background: #FFFFFF;
	box-shadow: 0px 0px 70px rgba(51, 183, 188, 0.2);
	border-radius: 60px;
	margin: 0px 100px;
}




.brand-desc {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 29px;
	text-align: center;
	color: #222222;

}

.child-banner {
	width: 100%;
	background: #EF4627;
	position: relative;
	margin-top: -138px;
	z-index: -1;
	padding-top: 20rem;
}

.brand-icons-container {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}


.b-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
}

.white-box-cards {
	background-color: #fff;
	padding: 20px 40px;
	border-radius: 100px;
}

.white-box-cards>div {
	display: flex;
	justify-content: end;
	gap: 25px;
}


.white-box-cards-icon {
	display: grid;
}

.feature-action {
	margin: 13rem 0 5rem;
}

.feature-action-user {
	margin-top: 4rem;
	margin-bottom: 8rem;
}

.b-container div h5 {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 600;
	font-size: 40px;
	line-height: 50px;
	color: #FFFFFF;
	-webkit-text-stroke: 1px #fff;
}

.comfortaa-font-just {
	font-family: 'Comfortaa';
	font-weight: 600;
	font-size: 40px;
	line-height: 44.6px;
	-webkit-text-stroke: 1px #000;
}

.comfortaa-font {
	font-family: 'Comfortaa';
	font-weight: 400;
	font-size: 32px;
	line-height: 35.68px;
	-webkit-text-stroke: 1px #000;
}

.montserrat-font-just {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	line-height: 29.26px;
	font-size: 24px;
}

.montserrat-font-pr {
	padding-right: 15%;
}

.montserrat-font {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	line-height: 29px;
}

.montserrat-font--d {
	font-family: 'Montserrat';
	font-weight: 500;
	font-size: 24px;
	line-height: 38px;
}

@media only screen and (min-width: 600px) {
	.formContainer {
		right: 10% !important;
		top: -62%;
	}
}

@media only screen and (min-width: 600px) {
	.mon-font {
		width: 65%;
		margin: 0px auto;
	}

	.mob-dis-add {
		padding: 70px;
	}

	.formContainer button {
		width: 60%;
	}
}

.imgcard p {
	font-family: 'Montserrat';
	font-size: 30.97px;
	font-weight: 600;
	line-height: 37.75px;
}

.b-container div span {

	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	line-height: 38px;
	color: #FFFFFF;
}

.review {
	margin-top: 65rem;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.reviewContent {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	width: 964px;
	height: 191px;
}

.reviewContent h5 {

	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-size: 32px;
	line-height: 39px;
	text-align: center;
	text-transform: uppercase;

	color: #333333;

}

.reviewContent div span {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 29px;
	text-align: center;
	color: #686868;

}


.reviewCardContainer {
	width: 1240px;
	height: 527px;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	margin-top: 6rem;
}

.reviewCard {

	box-sizing: border-box;
	padding: 12px;
	gap: 20px;
	width: 406px;
	height: 526px;
	filter: drop-shadow(0px 0px 30px rgba(239, 70, 39, 0.15));
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;

}

.reviewCard h5 {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 600;
	font-size: 30px;
	line-height: 37px;
	color: #333333;
}

.reviewCard span {

	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #686868;
}

.reviewCard button {
	padding: 12px;
	width: 123px;
	height: 41px;
	background: #EF4627;
	border-radius: 10px;
	border: none;
	color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 17px;
	/* identical to box height */
	text-align: center;

}


.formBanner {
	margin-top: 50rem;
	height: 688px;
	background-color: #EF4627;
	display: flex;
	justify-content: space-around;
	width: 100%;
	position: relative;
}

.formBannerImage {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	top: -20%;
}

.formBannerImage img {
	width: 100%;
	height: 103%;
}

.formContainer {
	display: flex;
	flex-direction: column;
	width: 45%;
	gap: 30px;
	padding: 5%;
	background-color: #fff;
	top: -50%;
	position: absolute;
	right: 0;
	border-radius: 50px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07), 0 32px 64px rgba(0, 0, 0, 0.07);
}


.formContainer h5 {
	font-family: 'Comfortaa';
	font-style: normal;
	font-weight: 600;
	font-size: 40px;
	line-height: 50px;
	color: #000;
	-webkit-text-stroke: 1px #000;
}

.formContainer input {
	box-sizing: border-box;
	padding: 18px;
	gap: 10px;

	background: #F4F4F4;
	border: 1px solid #FFFFFF;
	border-radius: 100px;
	color: #333333;
}


.formContainer button {
	box-sizing: border-box;
	padding: 12px;
	gap: 10px;
	background: #FFFFFF;
	border: 1px solid #FFFFFF;
	border-radius: 100px;
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 21.94px;
	text-align: center;
	color: #EF4627;
}

.formChildInput {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.formChildInput input {
	width: 50%;
}

.footer {

	padding: 20px 0px;
	gap: 20px;
	width: 100%;
	height: auto;
	background: #000000;
	color: #fff !important;

}

.footer-text {
	color: #F8FAFC;
}

.formContainer button {

	background-color: #EF4627;
	color: #fff;
}

.formContainer button:hover {

	background-color: #EF4627;
}

@media only screen and (max-width: 600px) {
	body {
		width: fit-content;
	}

	.review {
		margin-top: 0px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.right .mobile {
		position: relative;
		inset: unset;
		padding: 0px 20px;
		translate: unset;
	}

	.right .mobile img {
		width: 100%;
	}

	#about.bottom {
		clip-path: unset;
	}

	#about>div>div>div {
		display: flex;
		justify-content: center;
	}

	.simple-banner {
		text-align: center;
	}

	.feature-action-btn .btn-container-b,
	.feature-action-btn .btn-container-w {
		width: 100%;
	}


	.formBanner .formBannerImage {
		width: 100%;
		top: unset;
	}

	.formBanner .formBannerImage img {
		width: 100%;
	}



	.right .mobile .mobile-offer-append>img {
		transform: translate(0, 52px);
	}

	.right .mobile .mobile-offer-append div {
		transform: translate(4px, -40rem) rotate(333deg);
		width: 50%;
	}

	.discount_Ad_img,
	.Oiyaa2banner_img {
		width: 100%;
		margin-top: 2rem;
	}

	.right .mobile .mobile-offer-append>img:nth-child(1) {
		transform: translate(-27px, 83px) rotate(329deg);
	}

	.child-banner h5 {
		display: inline;
		text-align: center;
	}

	.child-banner .banner-heading {
		text-align: center;
	}

	.child-banner .banner-text {
		white-space: normal !important;
		word-break: break-word;
	}

	#info-card .card-section {
		gap: 4rem;
	}

	.white-box-cards {
		width: 100%;
	}

	.white-box-cards>div {
		justify-content: space-between;
		gap: 0;
	}
}

.child-banner .banner-text {
	white-space: pre-line;
}


.tabs>input[type="radio"] {
	display: none;
}


/* header section START */
.header-container {
	padding: 0px 100px;
}

.header-li-cus {
	margin-left: 20px;
}

.header_txt_plus {
	color: #333;
	font-family: var(--font-family-2);
	font-size: 45px;
	font-weight: 700;
}

.header_logo {
	width: 75px;
	height: 56px;
}


@media (min-width: 992px) and (max-width: 1120px) {
	.header-container {
		padding: 0px 50px;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	.header-container {
		padding: 5px 0px 0px 20px;
	}
}

@media (min-width: 460px) and (max-width: 767px) {
	.header_logo {
		width: 60px;
		height: 45.026px;
	}

	.dna_logo {
		width: 170px;
		height: 55.026px;
	}
}

@media (min-width: 250.98px) and (max-width: 767px) {
	.header-container {
		padding: 5px 0px 0px 20px;
	}

	.header-li-cus {
		margin-left: 10px;
	}

	.header_txt_plus {
		font-size: 25px;
	}
}

@media (min-width: 250.98px) and (max-width: 460px) {
	.header_logo {
		width: 50px;
		height: 35.026px;
	}

	.dna_logo {
        width: 110px;
        height: 50.026px;
    }
}

/* header section END */

/* Reset some basic styles */
body,
ul,
li {
	margin: 0;
	padding: 0;
}

/* Ensure the header container uses flexbox */
.header-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
}

/* Style the unordered list as a flex container */
.navbar ul {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0;
	align-items: center;
	justify-content: flex-start;
}

/* Style the list items to align their content centrally and add spacing */
.navbar li {
	display: flex;
	align-items: center;
	margin: 0 15px;
	/* Add spacing between items */
}

/* Responsive images */
.header_logo {
	max-width: 100%;
	height: auto;
}


/* Optional: Adjust padding and spacing for different screen sizes */
@media (max-width: 768px) {
	.navbar {
		padding: 1rem 0;
	}

	.navbar li {
		margin: 0 10px;
		/* Adjust spacing for smaller screens */
	}

	/* Reset the margin-left for smaller screens */
	.navbar ul {
		margin-left: 0 !important;
	}
}

.sc-4-brand-img {
	vertical-align: middle;
	width: 584px;
	height: 125px;
	flex-shrink: 0;
}


/* Optional: Adjust spacing */
.brand-icons-container {
	margin-top: 20px;
}

/* Ensure images within the brand-icons-container are responsive */
.brand-icons-container img {
	max-width: 100%;
	height: auto;
}

.hiw-cols-first {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

@media (max-width: 768px) {
	/* CSS for screens smaller than 768px (tablets and smartphones) */
}

@media (max-width: 576px) {
	/* CSS for screens smaller than 576px (smartphones) */
}

.linked {
	width: 1201px;
	height: 400px;
	flex-shrink: 0;
	border-radius: 50px;
	background: #FFF;
	box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.07);
}

.hiw-cols-first {
	display: flex;
}

.hiw-tab-imagesli {
	height: 400px;
	width: 400px;
	margin-right: 54px;
	/* Adjust the margin as needed */
}

.hiw-tab-imagesli_Casle {
    height: 400px;
    width: 400px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
}

.content {
	flex-grow: 1;
	margin-top: 3rem;
	/* This allows the content to expand and fill the remaining space */
}

/* Add this CSS to adjust the spacing between columns on small screens */
@media (max-width: 768px) {
	.apple-wrapper {
		margin-bottom: 20px;
		/* Add some margin between each app container */
	}
}

/* Add this CSS to ensure proper alignment and spacing */
@media (max-width: 767px) {

	.hiw-cols-first {
		margin-top: 20px;
		/* Add some top margin to create space between image and text */
	}
}


.banner-heading {
	margin-top: 20px;
	color: white;
}

.white-box-cards {
	margin-top: 20px;
}

.white-box-cards .card {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 10px;
}

.white-box-cards .card img {
	max-width: 100%;
	height: auto;
}

/* CSS for responsiveness */
.formContainer {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 20px;
}

@media (max-width: 768px) {

	.formContainer input[type="text"],
	.formContainer input[type="email"],
	.formContainer input[type="number"] {
		width: 100%;
		margin-bottom: 15px;
	}

	.formContainer button {
		width: 100%;
	}
}

.signup {
	display: flex;
	width: 273px;
	height: 54px;
	padding: 12px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: 100px;
}



/* CUSTOM START */

.section_1 {
	padding: 50px 100px;
}

.s1_image {
	width: 115%;
	max-width: 135%;
}

.s1-h-text-container {
	margin-left: 50px;
}

.s1_header {
	color: #333;
	font-family: var(--font-family-2);
	font-size: 80px;
	font-weight: bold;
	margin-bottom: 48px;
}

.s1_para {
	color: #222;
	font-family: var(--font-family-1);
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 90px;
}

.mbl_img-position {
	position: absolute;
	top: 4rem;
	right: 35px;
	transform: scale(1);
	z-index: 10;
}

.sc-4-par-txt {
	width: 100%;
	height: 100%;
	color: #222222;
	font-size: 24px;
	font-family: Montserrat;
	font-weight: 500;
	line-height: 38px;
	word-wrap: break-word;
	text-align: left;
}

.sc-4-brand-img-eclipe {
	width: 100%;
}

.section_2_store_icons img {
	width: 230px;
	height: 75px;
}

.s2-app-container {
	padding: 35px 0px;
}

.brand-content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 0px 150px;
	gap: 40px;
	height: auto;
}


.brand-content-castle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 0px 10px;
    gap: 40px;
    height: auto;
}


/* .sc-5-img-content {
	display: flex;
	align-items: flex-start;
} */
.sc-5-img-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.sc-4-brand-img-cont {
	display: flex;
	justify-content: space-around;
}

.sc-4-brand-img {
    vertical-align: middle;
	/* width: 225px;
    height: 50px; */
    width: 480px;
    height: 120px;
    flex-shrink: 0;
    margin-bottom: 25px;
}

.brand-content h5 {

	font-family: 'Comfortaa';
	font-style: normal;
	text-align: center;
	font-weight: 600;
	font-size: 40px;
	line-height: 42.67px;
	color: #333333;
	-webkit-text-stroke: 1px #000;
}

.dnafrmlnk {
    white-space: pre-line;
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 24px;
    line-height: 38px;
    color: #222;
}

.child-b-container {
	padding: 0px 100px;
}

.Oiyaa2banner_img {
	width: 75%;
	height: auto;
}

.white-box-cards {
	margin-top: 30px !important;
}

.white-box-cards {
	background-color: #fff;
	padding: 30px 35px !important;
	border-radius: 100px;
}

.white-box-cards-post {
	bottom: 0;
	margin-bottom: 50px;
}

.white-box-cards>div>div {
	border-radius: 5.49px;
	width: 100.39px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
}

.sc-6-subpara {
	width: 100%;
	height: 100%;
	color: white;
	font-size: 24px;
	font-family: Montserrat;
	font-weight: 500;
	line-height: 38px;
	word-wrap: break-word;
	text-align: left;
}

.sec-7-container {
	padding: 0px 100px;
}

.sec7-subpara {
	width: 100%;
	height: 100%;
	color: #222222;
	font-size: 24px;
	font-family: Montserrat;
	font-weight: 500;
	line-height: 38px;
	word-wrap: break-word;
	text-align: left;
}

.discount_Ad_img {
	width: 450px;
	height: 280px;
	object-fit: cover;
	border-radius: 20px;
}

.sec-7-para-h-cont {
	padding: 5px 15px 5px 50px;
}


.sec7-headpara {
	margin-bottom: 15px;
}


.card-img-section .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.img-sec-7-cont {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20px;
}

.imgcard {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background: #FFFFFF;
	box-shadow: 0px 0px 10px rgba(239, 70, 39, 0.15);
	border-radius: 3rem;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
}

.imgcard p {
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 10px;
}

.imgcard h5 {
	margin-top: 10px;
}

.red_dot_img_sec8 {
	width: 50px;
	height: 60px;
}

.sec8-form-cont {
	padding: 55px;
}

.sec8-formBannerImage {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	top: -50%;
}


.s3-brand-card {
	padding-top: 80px;
	padding-bottom: 80px;
	height: auto;
	background: #FFFFFF;
	box-shadow: 0px 0px 70px rgba(51, 183, 188, 0.2);
	border-radius: 60px;
	margin: auto;
}

.s3-brand-content h5 {
	font-family: 'Comfortaa';
	font-style: normal;
	text-align: center;
	font-weight: 600;
	font-size: 40px;
	line-height: 42.67px;
	color: #333333;
	-webkit-text-stroke: 1px #000;
}


.s3-brand-icons-container {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}

.s3-brand-content {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 0px;
	gap: 40px;
	height: auto;
}

::placeholder {
	color: black;
	font-size: 15px;
}

.sec9-cus-img1-cont{
	margin-bottom: 5rem;
}

.sec9-cus-img1{
	width: 275px;
	height: auto;
}
.sec9-cus-img2{
	width: 749px;
	height: auto;
}




@media (min-width: 250.98px) and (max-width: 767px) {
	.card-img-section .imgcard {
		width: 85% !important;
	}

	.sec9-cus-img2{
		width: 550px;
		height: auto;
	}

	.s1-h-text-container {
		margin-left: 0px;
	}

	.formBanner .formContainer {
		width: 100%;
	}

	.formContainer {
		display: flex;
		flex-direction: column;
		padding: 5%;
		top: -100%;
		position: absolute;
		right: 0;
	}


	.formBanner {
		margin-top: 90rem;
	}

	.imgcard h5 {
		font-size: 20px;
	}

	.img-sec-7-cont {
		display: flex;
		justify-content: center;
		margin: 20px 10px;

	}

	.section_1 {
		padding: 20px 40px;
	}

	.s1_image {
		width: 100%;
	}

	.s1_header {
		font-size: 48px;
		margin-bottom: 40px;
	}

	.s1_para {
		font-size: 21px;
		margin-bottom: 65px;
	}

	.mbl_img-position {
		position: relative;
		top: -5rem;
		right: 0px;
		transform: scale(1);
		z-index: 10;
	}

	.section_2_store_icons img {
		width: 190px;
		height: 60px;
	}

	.s2-app-container {
		padding: 55px 0px;
	}

	.bottom {
		clip-path: unset;
		height: 80vh !important;
		width: 100%;
		position: relative;
		border-bottom: solid transparent;
		top: -250px;
	}

	.mst-app-s2-contanier {
		position: absolute;
		bottom: 0;
		display: flex;
		justify-content: space-between;
	}

	#info-card {
		width: 100%;
		position: relative;
		bottom: 28rem;
	}

	.cardContainer {
		width: 335px;
		height: 160px;
	}

    .sc-4-brand-img {
        vertical-align: middle;
        width: 170px;
        height: 85px;
        flex-shrink: 0;
    }

	.brand-card {
		padding-top: 50px;
		padding-bottom: 65px;
		margin: 0px 10px;
	}

	.sc-4-par-txt {
		font-size: 19px !important;
		line-height: 25px !important;
	}

	.brand-content {
		padding: 0px 15px;

	}

	.white-box-cards {
		padding: 20px 30px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 35px;
	}

	.white-box-cards {
		width: 85% !important;
	}

	.Oiyaa2banner_img {
		width: 65% !important;
		height: auto;
	}

	.b-container {
		display: flex;
		flex-direction: column;
		align-items: center !important;
	}

	.child-b-container {
		padding: 0px 25px;
	}

	.banner-heading h5 {
		font-size: 40px !important;
	}

	.sc-6-subpara {
		font-size: 20px;
		line-height: 30px;
	}

	.sec-7-para-h-cont {
		padding: 5px 15px 5px 15px;
		text-align: center;
		margin-bottom: 40px;
	}

	.sec7-subpara {
		width: 100%;
		height: 100%;
		color: #222222;
		font-size: 20px;
		font-family: Montserrat;
		font-weight: 500;
		line-height: 30px;
		word-wrap: break-word;
		text-align: center;
		margin: 25px 0px;
	}

	.sec-7-img-cont {
		display: flex;
		justify-content: center;
	}
}

@media (min-width: 768px) and (max-width: 839px) {

	.sec9-cus-img2 {
		width: 650px;
		height: auto;
	}

	.s1-h-text-container {
		margin-left: 0px;
	}

	.imgcard h5 {
		font-size: 20px;
	}

	.section_1 {
		padding: 20px 40px;
	}

	.child-b-container {
		padding: 0px 50px;
	}

	.Oiyaa2banner_img {
		width: 65% !important;
		height: auto;
	}


	.s1_header {
		font-size: 40px;
		margin-bottom: 40px;
	}

	.s1_para {
		font-size: 19px;
		margin-bottom: 90px;
	}

	.s1_image {
		width: 115%;
		max-width: 135%;
	}

	.mbl_img-position {
		position: absolute;
		top: 1rem;
		right: 25px;
		transform: scale(1);
		z-index: 10;
	}

	.section_2_store_icons img {
		width: 155px;
		height: 50px;
	}

	.bottom {
		clip-path: circle(90% at 50% -80%);
		height: 50vh !important;
		width: 100%;
		position: relative;
		border-bottom: solid transparent;
		top: -100px;
	}

	.white-box-cards {
		padding: 30px 50px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}

	.b-container {
		display: flex;
		flex-direction: column;
		align-items: center !important;
	}

	.sec-7-para-h-cont {
		padding: 5px 15px 5px 15px;
		text-align: center;
		margin-bottom: 40px;
	}

	.sec7-subpara {
		width: 100%;
		height: 100%;
		color: #222222;
		font-size: 20px;
		font-family: Montserrat;
		font-weight: 500;
		line-height: 30px;
		word-wrap: break-word;
		text-align: center;
		margin: 25px 0px;
	}

	.sec-7-img-cont {
		display: flex;
		justify-content: center;
	}
}

@media (min-width: 839px) and (max-width: 999px) {

	.sec9-cus-img2 {
		width: 650px;
		height: auto;
	}
	
	.s1-h-text-container {
		margin-left: 0px;
	}

	.imgcard h5 {
		font-size: 20px;
	}

	.s1_header {
		font-size: 40px;
		margin-bottom: 40px;
	}

	.Oiyaa2banner_img {
		width: 65% !important;
		height: auto;
	}

	.s1_para {
		font-size: 19px;
		margin-bottom: 90px;
	}

	.s1_image {
		width: 135%;
		max-width: 135%;
	}

	.mbl_img-position {
		position: absolute;
		top: 1rem;
		right: 40px;
		transform: scale(1);
		z-index: 10;
	}

	.section_2_store_icons img {
		width: 180px;
		height: 55px;
	}

	.bottom {
		clip-path: circle(90% at 50% -80%);
		height: 50vh !important;
		width: 100%;
		position: relative;
		border-bottom: solid transparent;
		top: -100px;
	}

	.white-box-cards {
		padding: 30px 50px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}

	.b-container {
		display: flex;
		flex-direction: column;
		align-items: center !important;
	}

	.sec-7-para-h-cont {
		padding: 5px 15px 5px 15px;
		text-align: center;
		margin-bottom: 30px;
	}

	.sec7-subpara {
		width: 100%;
		height: 100%;
		color: #222222;
		font-size: 20px;
		font-family: Montserrat;
		font-weight: 500;
		line-height: 30px;
		word-wrap: break-word;
		text-align: center;
		margin: 25px 0px;
	}

	.sec-7-img-cont {
		display: flex;
		justify-content: center;
	}

}

@media (min-width: 1000px) and (max-width: 1240px) {

	.s1-h-text-container {
		margin-left: 0px;
	}

	.section_1 {
		padding: 20px 40px;
	}

	.s1_header {
		font-size: 40px;
		margin-bottom: 40px;
	}

	.s1_para {
		font-size: 19px;
		margin-bottom: 90px;
	}

	.s1_image {
		width: 115%;
		max-width: 135%;
	}

	.mbl_img-position {
		position: absolute;
		top: 1rem;
		right: 25px;
		transform: scale(1);
		z-index: 10;
	}

	.section_2_store_icons img {
		width: 190px !important;
		height: 60px !important;
	}

	.bottom {
		top: -20px;
	}
}

@media (min-width: 1240px) and (max-width: 1400px) {

	.s1_header {
		font-size: 40px;
		margin-bottom: 40px;
	}

	.s1_para {
		font-size: 19px;
		margin-bottom: 90px;
	}

	.s1_image {
		width: 115%;
		max-width: 135%;
	}

	.mbl_img-position {
		position: absolute;
		top: 1rem;
		right: 25px;
		transform: scale(1);
		z-index: 10;
	}

	.section_2_store_icons img {
		width: 190px !important;
		height: 60px !important;
	}

	.bottom {
		top: -20px;
	}
}

@media (max-width: 991px) {
	.Oiyaa2banner_img {
		content: url('assets/img/oiyaa-mobile-brand.png');
	}

	.img-sec-7-cont {
		width: 100%;
	}

	.imgcard {
		padding: 15px;
	}

	.imgcard h5 {
		font-size: 14px;
	}

	.imgcard p {
		font-size: 25px;
	}

	.red_dot_img_sec8 {
		width: 40px;
		height: 50px;
	}
}


@media (min-width: 150px) and (max-width: 760px)  {
	.sec-7-container {
		padding: 0px 0px;
	}
	.feature-action-btn {
		padding: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 10px;
	}
	.sc-6-subpara {
		font-size: 24px;
		line-height: 30px;
	}
	
	.bottom {
		clip-path: unset;
		height: 55vh !important;
		max-height: 80vh !important;
		width: 100%;
		position: relative;
		border-bottom: solid transparent;
		top: -250px;
	}
	
	.sec-7-para-h-cont {
		padding: 0px 0px 0px 0px;
		text-align: center;
		margin-bottom: 40px;
	}
	
	.feature-action-btn {
		padding: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: 2px;
	}
	
	.col-lg-5.col-md-12.col-sm-12.sec-7-img-cont {
		padding: 0px;
	}
	
	.discount_Ad_img {
		width: 370px;
		height: 250px;
		object-fit: cover;
		border-radius: 20px;
	}
	
	.white-box-cards {
		padding: 20px 0px !important;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 35px;
	}
	
	.Oiyaa2banner_img {
		content: url('../img/oiyaa-mobile-brand.png');
	}
	
	.sec7-subpara {
		width: 100%;
		height: 100%;
		color: #222222;
		font-size: 19px;
		font-family: Montserrat;
		font-weight: 500;
		line-height: 25px;
		word-wrap: break-word;
		text-align: center;
		margin: 25px 0px;
	}

	.brand-container {
		border-radius: 0px;
		background: #FFF;
		box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.07);
		display: flex;
		justify-content: start;
		padding: 0px;
		gap: 0px;
		flex-direction: column;
	}

    .hiw-tab-imagesli_Casle {
        height: 250px !important;
        width: 100% !important;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
    }

	.brand-content-castle {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		padding: 0px 0px;
		gap: 40px;
		height: auto;
	}

	.dnafrmlnk {
		white-space: pre-line;
		font-family: 'Montserrat';
		font-weight: 500;
		font-size: 19px;
		line-height: 35px;
		color: #222;
	}

	.sc-4-brand-img {
        vertical-align: middle;
        width: 260px;
        height: 70px !important;
        flex-shrink: 0;
    }

	.dna_logo {
		width: 140px;
        height: 45.026px !important;
    }

	.white-box-cards {
        width: 100% !important;
    }
	}