* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

html {
	width: 100%;
	height: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scrollbar-color: $primary;
}

body {
	-webkit-overflow-scrolling: touch;
	text-size-adjust: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-tap-highlight-color: transparent;
	font-weight: $normal;
	font-family: var(--sourceSans);
	font-size: size(16);
	touch-action: manipulation;
	line-height: 1.2;
	counter-reset: my-sec-counter;
	touch-action: manipulation;

	@media only screen and (max-width: 1512px) {
		font-size: size(14);
	}

	@media only screen and (max-width: 768px) {
		font-size: size(13);
		h1{line-height: 1;}
	}

	&.block {
		overflow: hidden;
	}
}

:focus {
	outline: none;
}

a,
button {
	text-decoration: none;
	cursor: pointer;
	color: currentColor;
	background: transparent;
	border: none;
	outline: none;
	cursor: pointer;
}

:before,
:after {
	font-family: var(--lt-font);
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

p {
	line-height: 1.4;
}

::placeholder {
	font-weight: $normal;
	font-size: size(16);
	color: $grey;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	// border: 1px solid transparent;
	-webkit-text-fill-color: $black;
	-webkit-box-shadow: 0 0 0px 1000px $primary inset;
	background-color: transparent;
	transition: background-color 5000s ease-in-out 0s;
}

select {
	cursor: pointer;
	-webkit-appearance: none;
}

input:-webkit-autofill {
	-webkit-animation-delay: 1s;
	/* Safari support - any positive time runs instantly */
	-webkit-animation-name: autofill;
	-webkit-animation-fill-mode: both;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
}

::-webkit-scrollbar-track {
	border-radius: 5px;
	background-color: $lightGrey;
}

::-webkit-scrollbar {
	width: 2px;
	height: 0;
	background-color: $lightGrey;
}

::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: $primary;
}

.container {
	&--fluid {
		width: 100%;
		padding: 0 4%;

		@include max(1024) {
			padding: 0 15px;
		}
	}
	&--left{
		padding-left: 4%;
		@include max(1024) {
			padding-left:15px;
		}
	}

	&--responsive {
		width: 100%;
		max-width: 1200px;
		margin: 0 auto;

		@include max(991) {
			padding: 0 20px;
		}
	}

}

.cursor {
	&--pointer {
		cursor: pointer;
	}

	&--default {
		cursor: default;
	}
}

.btn {
	outline: 0;
	padding: 18px 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-family: var(--sourceSans);
	font-weight: $semiBold;
	font-size: size(18);
	text-transform: capitalize;
	vertical-align: middle;
	text-align: center;
	line-height: normal;
	border-radius: 5px;

	@include maxOrientation(1024, portrait) {
		padding: 15px 20px;
		white-space: nowrap;
	}

	&::after {
		content: $lt--right-arrow;
		margin-left: 6px;
		font-size: 20px;
		font-weight: $normal;
		transition: all 0.3s ease;
		display: inline-block;
		transform: rotate(-45deg);

		@include maxOrientation(1024, portrait) {
			transform: none;
		}
	  }
	  &:hover {
		&::after {
			transform: none;
		}
	}

	&--underline{
		&:hover {
			text-decoration: underline;
			text-underline-offset: 2px;
		}

		@include maxOrientation(1024, portrait) {
			text-decoration: underline;
			text-underline-offset: 2px;
		}
	}

	&--outline {
		border: 1px solid $primary;

		&:disabled {
			color: rgba($grey, 0.3);
			border: 1px solid rgba($grey, 0.3);
			pointer-events: none;
		}
	}

	&--background {
		border: 1px solid $blackPrimary;
		background-color: $blackPrimary;
		color: $white;

		@include min(1025) {
			&:hover {
				background-color: $white;
				color: $blackPrimary;
			}
		}

		&-secondary {
			background: $white;
			color: $blackPrimary;
		}

		// &:disabled {
		// 	background: $lightGrey;
		// 	border: 1px solid $lightGrey;
		// 	color: $lightGrey;
		// 	pointer-events: none;
		// }
	}

	&:disabled {
		background:rgba($grey, 0.3);
		border: none;
		color: $white;
		pointer-events: none;
		i {
			color: $white;
		}
	}
}

.bg {
	&--blue {
		&-primary {
			background-color: $primary;

		}

		&-secondary {
			background-color: $blueSecondary;
		}

		&-gradient {
			background: $blueGradient;
		}
	}

	&--grey {
		background-color: $grey;
		&-light {
			background-color: $lightGrey;
		}
		&-lighter{
			background-color: rgba($lightGrey, 0.3);
		}
	}

	&--yellow {
		background-color: $yellow;
	}

	&--red {
		background-color: rgba($error, 0.1);
	}

	&--error {
		background-color: $error;
	}

	&--white {
		background-color: $whiteSecondary;
		&-light{

			background-color: $white;
		}
	}


	&--black {
		background-color: $blackPrimary;

		&-secondary {
			background-color: $blackSecondary;
		}
	}

	&--radius {
		&-5{
			border-radius: 5px;
		}
		&-10{
			border-radius: 10px;
		}

		&-circle {
			border-radius: 50%;
		}
		&-top {
			border-radius: 10px 10px 0 0;
		}
		&-bottom {
			border-radius: 0 0 10px 10px;
		}
	}

	&--border {
		&-bottom {
			border-bottom: 1px solid $lightGrey;
			&-blue{
				border-bottom: 1px solid $blueSecondary;
			}
		}
		&-right {
			border-right: 1px solid $grey;
		}
	}


	&--shadow {
		box-shadow: $boxShadow;
	}

	&--network{
		&-top{
			&-right{
				// position: relative;
				&::after{
					content: '';
					position: absolute;
					top: 0;
					right: 0;
					width: 250px;
					height: 250px;
					background-image: url('/../assets/images/network-bg-black.webp');
					background-size: cover;
					background-repeat: no-repeat;
					pointer-events: none;

					@include maxOrientation(1024, portrait) {
						width: 140px;
						height: 160px;

					 }

				}
			}
		}
		&-bottom{
			&-right{
				// position: relative;
				&::after{
					content: '';
					position: absolute;
					bottom: 17px;
					right: 10px;
					width: 250px;
					height: 250px;
					background-image: url('/../assets/images/network-bg-black.webp');
					background-size: cover;
					background-repeat: no-repeat;
					transform: rotate(90deg);
					pointer-events: none;
					@include maxOrientation(1024, portrait) {
						width: 140px;
						height: 160px;

					 }

				}

			}
			&-left {
				&::after{
					content: '';
					position: absolute;
					bottom: 0px;
					left: 0;
					width: 250px;
					height: 250px;
					background-image: url('/../assets/images/network-bg-black.webp');
					background-size: cover;
					background-repeat: no-repeat;
					transform: rotate(180deg);
					pointer-events: none;
					@include maxOrientation(1024, portrait) {
						width: 140px;
						height: 160px;

					 }

				}
			}
		}

	}


}

.color {
	&--error {
		color: $error;
	}

	&--success {
		color: $success;
	}

	&--white {
		color: $white;

		&-secondary {
			color: $whiteSecondary;
		}
	}

	&--black {
		color: $black;
		&-primary {
			color: $blackPrimary;
		}
	}

	&--default{
		color: #C6C6C6;
	}
	&--blue{
		&-primary{
			color: $primary;
		}
		&-secondary{
			color: $blueSecondary;
		}
	}

	&--primary {
		&-blue {
			color: $primary;
		}

		&-light {
			color: rgba($white, 0.5);
		}
	}

	&--grey {
		color: $grey;

		&-light {
			color: $lightGrey;
		}
	}
}

// For Font Size
@for $i from 1 through 100 {
	.fs {
		&--#{$i} {
			font-size: size($i);
		}
	}
}

// For Padding And Margin
.no {
	&--padding {
		padding: 0 !important;
	}

	&--margin {
		margin: 0 !important;
	}
}

.margin {
	&--auto {
		margin: 0 auto;
		&-left {
			margin-left: auto;
		}
	}
}

@for $i from 0 through 20 {

	// Padding Overall
	.pd {
		&--#{$i * 5} {
			padding: #{$i * 5}px;
		}
	}

	// Padding Directional
	.pt {
		&--#{$i * 5} {
			padding-top: #{$i * 5}px;
		}
	}

	.pr {
		&--#{$i * 5} {
			padding-right: #{$i * 5}px;
		}
	}

	.pb {
		&--#{$i * 5} {
			padding-bottom: #{$i * 5}px;
		}
	}

	.pl {
		&--#{$i * 5} {
			padding-left: #{$i * 5}px;
		}
	}

	// Margin Overall
	.md {
		&--#{$i * 5} {
			margin: #{$i * 5}px;
		}
	}

	// Margin Directional
	.mt {
		&--#{$i * 5} {
			margin-top: #{$i * 5}px;
		}
	}

	.mr {
		&--#{$i * 5} {
			margin-right: #{$i * 5}px;
		}
	}

	.mb {
		&--#{$i * 5} {
			margin-bottom: #{$i * 5}px;
		}
	}

	.ml {
		&--#{$i * 5} {
			margin-left: #{$i * 5}px;
		}
	}
}

// Font Style
.font {
	// Weights
	&--bolder {
		font-weight: $bolder;
	}

	&--bold {
		font-weight: $bold;
	}

	&--normal {
		font-weight: $normal;
	}

	&--semibold {
		font-weight: $semiBold;
	}

	&--light {
		font-weight: $light;
	}

	// Alignment
	&--center {
		text-align: center;
	}

	&--right {
		text-align: right;
	}

	&--left {
		text-align: left;
	}

	// Decoration
	&--underline {
		text-decoration: underline;
		text-underline-offset: 2px;
	}

	&--capitalize {
		text-transform: capitalize;
	}

	&--uppercase {
		text-transform: uppercase;
	}

	&--strike-through {
		text-decoration: line-through;
	}

	&--family {
		font-family: var(--sourceSans);
	}

}

// Text Wrap
.white {
	&--space {
		&-nowrap {
			white-space: nowrap;
		}

		&-prewrap {
			white-space: pre-wrap;
		}

		&-preline {
			white-space: pre-line;
		}
	}
}

// Width
.width {
	&--column {
		&-one {
			width: 100%;
		}
	}
	&--40{
		width: 40%;
	}
	&--30{
		width: 30%;
	}
	&--60{
		width: 60%;
	}
}

@for $i from 0 through 20 {
	.width {
		&--column {
			&-two {
				&-#{$i * 5} {
					width:calc(100% / 2 - #{$i * 5}px);
				}
			}

			&-three {
				&-#{$i * 5} {
					width:calc(100% / 3 - #{$i * 5}px);
				}
			}

			&-four {
				&-#{$i * 5} {
					width:calc(100% / 4 - #{$i * 5}px);
				}
			}

			&-five {
				&-#{$i * 5} {
					width:calc(100% / 5 - #{$i * 5}px);
				}
			}
			&-six {
				&-#{$i * 5} {
					width:calc(100% / 6 - #{$i * 5}px);
				}
			}
		}
	}
}

.position {
	&--relative {
		position: relative;
	}

	&--absolute {
		position: absolute;
	}

	&--fixed {
		position: fixed;
	}
}

.list{
	&--square{
		list-style: square;
		li{
			&::marker{
				color: $white;
				font-size: 20px;
			}

		}
	}
}

// Display

.display {
	&--block {
		display: block;
		&-inline {
			display: inline-block;
		}
	}
}

.word {
	&--break {
		word-break: break-word;
	}
}
// Show Hide
.show {
	display: block;
}

.hide {
	display: none;
}

.overflow {
	overflow: hidden;
}
.last-li li:last-child {margin-bottom: 0;}
// Landscape Mode
// .landscape_mobile {
// 	position: fixed;
// 	width: 100%;
// 	height: 100%;
// 	top: 0;
// 	left: 0;
// 	background-color: $white;
// 	z-index: 99999;
// 	display: none;

// 	@media screen and (min-width: 280px) and (max-width: 991px) and (orientation: landscape) and (min-height: 274px) {
// 		display: block;
// 	}

// 	.landscape_view {
// 		padding: 30px;
// 		height: 100%;
// 		width: 100%;
// 		display: flex;
// 		flex-direction: column;
// 		align-items: center;
// 		justify-content: center;

// 		.rotating_image {
// 			text-align: center;
// 			margin-bottom: 20px;

// 			img {
// 				width: 150px;
// 				margin: 0 auto;
// 			}
// 		}

// 		.landscape_text {
// 			text-align: center;

// 			h3 {
// 				font-size: size(24);
// 				font-weight: 600;
// 				position: relative;
// 			}

// 			p {
// 				font-size: size(18);
// 				font-weight: 600;
// 				line-height: 1.5;
// 				color: $grey;
// 			}
// 		}
// 	}
// }

// @media only screen and (min-width: 580px) and (max-width: 600px) and (max-height: 740px) and (orientation: portrait) {
// 	.landscape_mobile {
// 		display: none !important;
// 	}
// }

.height{
	&--one{
		height: 100%;
	}
}