@import '~bootstrap/dist/css/bootstrap.min.css';
@import 'en-fonts.scss';
@import 'ar-fonts.scss';
@import 'icons.scss';
@import 'variables.scss';
@import 'style-ar.scss';
@import "./base.scss";
@import "./ldc-lib-style";


*,
h1,
h2,
h3,
h4,
.h5,
h6,
p,
ul,
li {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	list-style: none;
}

body {
	color: #475569;
	font-size: 1em;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
}



h1 {
	color: $MainColor;
	font-weight: 600 !important;
	font-size: 3rem;
}

h2 {
	font-size: 2.25rem;
	color: #222b55 !important;
}

h3,
.h2 {
	font-size: 1.875rem;
	color: #222b55 !important;
}

h4 {
	font-size: 1.5rem;
}

h5 {
	font-size: 1.25rem;
}

.h5,
h5,
h4,
.h4,
.h6 {
	color: #222b55;
	font-weight: 600;
}

h6 {
	color: #475569
}

p {
	color: #222B55;
}

a {
	text-decoration: none;
	//color: $black-color;

	&:hover {
		text-decoration: none;
	}

	&:active {
		color: $MainColor;
	}
}

.back-ground-froms {
	background-color: #F8FAFC;
}

/* ****************** Buttons *********************** */
button {
	outline: none;
	background: none;
	border: none;
	border-radius: 8px;
	transition: all 0.5s;
	line-height: 1em;
	font-weight: 500;
}

.btn:disabled,
.btn-light-custom:disabled {
	color: #94A3B8 !important;
	border: 1px solid #F1F5F9 !important;
	background: #F1F5F9 !important
}

.btn-default-custom {
	color: white !important;
	width: fit-content;
	background-color: $MainColor;
	border: $border-size solid $MainColor;
	border-radius: 8px;

	&:hover {
		color: white !important;
		background-color: $MainColor;
		border: $border-size solid $MainColor;
		border-radius: 8px;
	}
}

.btn-outline {
	transition: all 0.5s;
	color: $MainColor !important;
	background: white;
}

.btn {
	font-weight: 500;
	padding: 14px 28px;
	font-size: 1rem;
}

.btn-outline-custom {
	border: 1px solid $MainColor;
	background: white;
	color: $MainColor !important;
}

.btn-green,
.btn-primary-custom {
	background: $green-color;
	color: white;
	border-color: $green-color;
	width: fit-content;

	&:hover {
		background: #fff;
		color: $green-color;
		border-color: $green-color;
	}
}

.btn-light-custom {
	background-color: $blue-light;
	color: white;
	border: $border-size solid $blue-light;
	width: fit-content;

	&:hover {
		background: #fff;
		color: $black-color;
		border: $border-size solid $blue-light;
	}


}

.link-more {
	color: $green-color;
}

/*****Cards****/
.card-custom {
	border: 2px solid white;
	font-size: 18px;

	&:hover {
		border: 2px solid $second-color;
	}
}


.FeatureServices {
	background: #F1F5F9
}

.PointIcon {
	background: $second-color;
	padding: 15px;
	border-radius: 10px;
	color: white;
	text-align: center;
	margin-right: 15px;
}

.nav-custom {
	li {
		border: 1px solid $gray-light;

		&:first-child {
			border-top-left-radius: 5px;
			border-bottom-left-radius: 5px;
		}

		&:last-child {
			border-top-right-radius: 5px;
			border-bottom-right-radius: 5px;
		}
	}

	li.nav-item {
		a.active {
			background: $gray-light;
			border-color: $second-color;
			color: $MainColor;
		}

		a {
			color: $MainColor;
		}
	}
}





.data-list li {
	padding: 8px 0;
}

.section-heading {
	font-style: normal;
	font-weight: 500;
	color: #222B55;
	margin-bottom: 24px;
}

.hero-heading {
	font-weight: 600;
	color: #222B55;
	margin-bottom: 24px;
	font-size: 3rem;
}

.section-paragraph {
	color: #334155;
	margin-bottom: 24px;
	font-size: 1rem;
}

.section {
	padding-bottom: 2.25rem
}

.text-container {
	text-align: justify;

}

.fixPadding .section {
	padding-bottom: 0 !important;
}

.section-padding {
	padding: 3rem 0
}

.fullBleed-padding {
	padding: 6rem 0
}

.fullBleed-margin {
	margin: 3rem 0
}

.benefits {
	li {
		&:before {
			display: inline-block;
			content: "";
			background: url(/assets/images/check.svg) center;
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: #16A34A;
			margin-inline-end: 12px;
			background-size: 15px;
			margin-top: 5px;
		}

		margin-bottom: 8px;
		display: flex;
		position: relative;
	}

}

.form-control-custom:focus {
	color: #000;
	background-color: #fff;
	border-color: #4661A8;
	outline: 0;
	box-shadow: 0 0 0 0.25rem #AAB6DC
}

#card .card-box .get-started {
	margin: 36px 0px 36px 0px
}

#card .card-box .get-started a:hover {
	background-color: #57c1db;
	color: #fff;
	border-color: #57c1db
}

#card .card-box .get-started .btn-custom {
	// padding: 10px 73px 10px 73px;
	background-color: #fff;
	color: #222B55;
	border: 1px solid #222B55;
	display: grid;
}

.sections-title {
	color: #222B55;
	font-style: normal;
	font-weight: 500;
	padding-bottom: 3rem;
}

.coupon {
	color: #E11D48;
	font-weight: 600;
}

.saved-amount {
	color: #D97706;
	font-weight: 600;
}

.total {
	font-weight: 600;
	color: #000;
}

// modal
.modal-content-custom {
	padding: 32px;

	.modal-header-custom {
		border-bottom-width: 2px;
		padding: 0;
		padding-bottom: 14px;
	}

	.modal-body-custom {
		padding: 1rem 0;
	}
}

.cancel-btn {
	margin-inline-end: 12px;
}

.modal-header {
	.btn-close {
		margin-inline-start: auto;
		margin-inline-end: -0.5rem;
	}
}

.ltr {
	direction: ltr;
}

/***ErrorPopupComponent***/
.mat-mdc-dialog-container .mdc-dialog__content.mat-mdc-dialog-content,
.mat-mdc-dialog-container .mdc-dialog__title.mat-mdc-dialog-title {font-family: inherit}
.mat-mdc-dialog-actions.mdc-dialog__actions {justify-content: end}
// .mat-mdc-button.mat-mdc-button:not(:disabled) ,.mat-mdc-button{border: 1px solid #222;background:#F8F8F8 !important;padding: 14px 28px !important;font-size: 14px;}
.mat-mdc-dialog-container .mdc-dialog__surface {box-shadow: none !important;padding: 32px; background-color: #F8F8F8 !important}
.mat-mdc-dialog-container .mdc-dialog__surface * {padding: 0 !important}
.mat-mdc-dialog-container .mdc-dialog__content {padding: 16px 0 !important}
.mat-mdc-dialog-container .mdc-dialog__title.mat-mdc-dialog-title {padding-bottom: 20px !important;font-size: 18px; color: #000; font-weight: 600;color:#E11D48}
.mat-header {border-bottom: 2px solid #D5D5D5; display: flex;justify-content: space-between}
.mat-mdc-dialog-container .mdc-dialog__content {font-size: 14px !important;color: #222 !important}
.mat-error i{ color: #E11D48}
.cdk-overlay-pane {width: none !important}
.mdc-dialog__title::before { display: none !important;height: 0 !important}

/***ErrorPopupEnd***/

@media only screen and (max-width:768px) {
	.nav-custom li {
		width: 100%;
		border-radius: 0 !important
	}

	.container-custom {
		width: 93%;
	}



	h4 {
		font-size: 1.25rem;
	}
	.cdk-overlay-pane{ width: inherit !important}
}

.learn-more-link {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0em;
	text-align: left;

	a {
		color: #16A34A;

	}

	.icon-arrow_next {
		color: #16A34A;
		font-weight: 600
	}
}

/*****images***/
.hero-section img {
	border-radius: $HiroImageRaduis
}

.full-bleed {
	box-shadow: 0 0 0 100vmax #F1F5F9;
	clip-path: inset(0 -100vmax);
	background-color: #F1F5F9;
}

.hyperLink {
	color: #16a34a;
	text-decoration: none;
	//font-weight: bold;
	cursor: pointer;

	&:hover {
		text-decoration: underline;
	}
}


/*Flibbing card*/
.flip-card-front .link,
.flip-card-back .link {
	color: #16A34A;
	font-size: 16px;
	font-style: normal;
	font-weight: 600;
}

// Styles Inputs
::ng-deep {
	.ldc-label {
		color: #879ea4;
	}

	.ldc-input {
		margin-top: 3px !important;

		.mdc-text-field--filled {
			border-radius: 0px;
		}

		.mat-mdc-form-field-subscript-wrapper {
			display: none;
		}

		.mdc-line-ripple {
			display: none;
		}

		.mdc-text-field--filled {
			border-radius: 0px;
		}

		.mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
			opacity: 0 !important;
		}

		.mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
			opacity: 0 !important;
		}

		.mat-mdc-form-field-focus-overlay {
			background-color: #ffff !important;
		}

		.mat-mdc-form-field-infix {
			min-height: 14px !important;
			padding-top: 8px !important;
			padding-bottom: 8px !important;
		}
	}

	.ldc-textarea {
		@extend .ldc-input;

		.mat-mdc-form-field-infix {
			padding-bottom: 7px !important;
		}
	}

	.ldc-dropdown {
		@extend .ldc-input;

		.mat-mdc-select-value {
			width: 98% !important;
		}

		.mat-mdc-select-arrow {
			width: 10px;
			height: 10px;
			border: 3px solid #4f008c;
			transform: rotate(45deg);
			border-radius: 3px;
			border-top: 0;
			border-left: 0;
			margin: 0 8px 4px 0;

			svg {
				display: none;
			}
		}
	}

	mat-label {
		font-size: 15px;
		color: #1d252d;
		opacity: 1;
	}
}

//Loader Style
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	// background: rgba(255, 255, 255, 0.8); /* Semi-transparent white background */
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	/* Adjust z-index as needed to make sure it overlays other content */
}

//titled-Hero-section-margins
// .hero-section {
// 	h4 {
// 		margin-bottom: 1rem;
// 	}

// 	p {
// 		margin-bottom: 1rem;
// 		font-size: 24px;
// 		font-weight: 600;


// 	}
// }

// .hero-section-margin {
// 	margin-top: 99px;
// 	margin-bottom: 19px;
// }

//Blogs Styles
.blogs-hyper-links {
	color: #0d6efd;
	text-decoration: underline;

	&:hover {
		color: #0a58ca;
	}

}

section .card {
	border: 0;
	box-shadow: 0 0 40px rgb(51 51 51 / 10%);
	transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

	&:hover {
		transform: translateY(-10px);
	}
}

.posts {
	padding-bottom: 100px;

	.row>div {
		margin-bottom: 25px;
	}

	.card-body .post-date {
		font-size: 14px;
		padding-top: 10px;
		padding-bottom: 15px;
	}

	.card-body .card-title {
		font-size: 24px !important;
		color: #333333;
		font-weight: bold;
		padding-bottom: 15px !important;
		cursor: pointer;

	}

	.card-body .card-text {
		color: #696969;
		font-family: inherit;
		font-size: 15px;
		letter-spacing: 0em;
		line-height: 1.74;
		padding-bottom: 15px;
		text-align: center;
	}

	.card img {
		cursor: pointer;
		width: 21.749rem;
		height: 12.396rem;
	}

	.readmore {
		color: #1d2355;
		height: 56px;
		line-height: 39px;
		text-align: center;
		font-size: 14px;
		font-weight: 500;
		border-top: 1px solid #eee;
		display: block;
		border-radius: 0;
		box-shadow: inset 0px 0px 0px #1d2355;
		transition: all 0.5s !important;

		&:hover {
			box-shadow: inset 0px -80px 0px #1d2355;
			color: #fff;
		}
	}
}

.details h1 {
	font-weight: 700;
	font-size: 40px;
	line-height: 1.4;
	margin: 0 0 16px;
	word-wrap: break-word;

	.refer-link {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 1px;
	}

	.icons span {
		font-size: 14px;
		color: #696969;
		line-height: 1.74;
	}
}

.w-60 {
	width: 60% !important;
}

.content>p {
	color: #222b53;
}

.mat-mdc-select-value {
	text-align: left;
}

.loader {
	display: flex;
	height: 70vh;
	align-items: center;
	justify-content: center;
}

.label {
	display: block;
}

.en-dir {
	direction: ltr;
}

.ar-dir {
	direction: rtl;
}

.w-600 {
	font-weight: 600;
}

.toast-container .ngx-toastr {
	width: 350px;
  }
  .microsoft-azure-hyperlink{
    color: #16a34a !important;
    &:hover{
        text-decoration: underline !important;
    }
}