/* ========== Default Variables and Uses ========== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

@font-face{
	font-family: 'alternate-font';
	src: url(Futura-CondensedLight.otf);
}

:root {

  /* Font & Background Colors */
  --basic: #ffffff;           /* White */
  --dark: #1e1f26;            /* Deep gray-black */
  --info: #3da9fc;            /* Soft but vibrant blue */
  --lighter: #f5f7fa;         /* Light gray-blue */
  --light: #e4e7eb;           /* Light neutral gray */
  --shadow: #d0d4da;          /* Subtle gray shadow */
  --bordered: #5362a3;         /* Medium gray border */
  --highlight: #5f6c96;       /* Muted indigo highlight */
  --warning: #f5c542;         /* Warm yellow-orange */
  --danger: #e04f5f;          /* Coral red */
  --success: #3ecf8e;         /* Mint green */
  --primary: #5a67d8;         /* Soft indigo (main brand color) */
  --secondary: #7186f0;       /* Lighter indigo */
  --alternate: #6c7edc;       /* Pale lavender-blue */
  --default: #4a5568;         /* Neutral dark gray */

  /* Font Size Variables */
  --heading: 46px;
  --sub-heading: 36px;
  --title-heading: 28px;
  --largest-size: 22px;
  --larger-size: 19px;
  --caption-size: 17px;
  --large-size: 15px;
  --default-size: 14px;
  --small-size: 12px;
  --smaller-size: 11px;

}

*{
	font-family: 'Open Sans', sans-serif;
	margin:0;
}

/* ========== General Pages Styles & Settings ========== */
.margin-top-10 { margin-top:10px; }
.margin-top-20 { margin-top:20px; }
.margin-top-30 { margin-top:30px; }
.margin-top-40 { margin-top:40px; }
.margin-top-50 { margin-top:50px; }
.margin-top-70 { margin-top:70px; }
.margin-top-80 { margin-top:80px; }
.margin-top-90 { margin-top:90px; }
.margin-top-100 { margin-top:100px; }
.margin-top-120 { margin-top:120px; }
.margin-top-150 { margin-top:150px; }
.margin-top-180 { margin-top:180px; }
.margin-top-200 { margin-top:200px; }

.margin-bottom-10 { margin-bottom:10px; }
.margin-bottom-20 { margin-bottom:20px; }
.margin-bottom-30 { margin-bottom:30px; }
.margin-bottom-50 { margin-bottom:50px; }
.margin-bottom-60 { margin-bottom:60px; }
.margin-bottom-80 { margin-bottom:80px; }
.margin-bottom-100 { margin-bottom:100px; }

/* ===== Defalut Buttons Settings ===== */
.btn{
	transition:all .3s ease-in-out;
	border-radius:7px;
}

.btn-primary{
	background-color:var(--primary);
	color:var(--basic);
	outline:none;
	border:none;
	height:32px;
	width:96px;
}
.btn-primary:hover{
	background-color:var(--primary);
	opacity:.85;
}

.btn-secondary{
	background-color:var(--secondary);
	color:var(--basic);
	outline:none;
	border:none;
	height:32px;
	width:125px;
}
.btn-secondary:hover{
	background-color:var(--secondary);
	opacity:.85;
}

.btn-alternate{
	background-color:var(--alternate);
	color:var(--basic);
	border-radius:3px;
	padding:2px 10px;
	outline:none;
	border:none;
	height:32px;
	width:125px;
}
.btn-alternate:hover{
	background-color:var(--alternate);
	text-decoration:none;
	color:var(--basic);
	opacity:.85;
}

.btn-default{
	background-color:var(--default);
	color:var(--basic);
	outline:none;
	border:none;
	height:32px;
	width:125px;
}
.btn-default:hover{
	background-color:var(--default);
	text-decoration:none;
	color:var(--basic);
	opacity:.85;
}

.btn-transparent{
	background-color:transparent;
	border:1px solid var(--basic);
	text-transform:uppercase;
	color:var(--basic);
	padding:10px 16px;
	font-weight:600;
	outline:none;
}
.btn-transparent:hover{
	background-color:var(--basic);
	color:var(--primary);
}

/* ===== Flex Box Settings ===== */
.flex-box{
	display:flex;
}

.flex-1{
	flex:1;
}

.flex-2{
	flex:2;
}

.flex-3{
	flex:3;
}

.flex-4{
	flex:4;
}

.flex-5{
	flex:5;
}

.flex-6{
	flex:6;
}

/* ===== Other General Settings ===== */
.show-on-tab{
	display:none;
}



@media screen and (min-width:1900px) {
	
	:root{
		
		/* Font Size Responsiveness */
		--heading:54px;
		--sub-heading: 46px;
		--title-heading: 42px;
		--largest-size: 32px;
		--larger-size: 26px;
		--caption-size: 24px;
		--large-size: 22px;
		--default-size: 20px;
		--small-size: 16px;
		--smaller-size:15px;
	}
	
	h6{
		font-size:15px;
	}
	
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		padding:12px 20px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:var(--small-size);
		padding:5px 15px;
	}

}

@media screen and (max-width: 1899px) and (min-width: 1649px){
	
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 50px;
		--sub-heading: 42px;
		--title-heading: 36px;
		--largest-size: 28px;
		--larger-size: 24px;
		--caption-size: 21px;
		--large-size: 20px;
		--default-size: 18px;
		--small-size: 14px;
		--smaller-size: 13px;
	}
	
	h6{
		font-size:14px;
	}
	
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		padding:10px 18px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:var(--small-size);
		padding:4px 12px;
	}
}

@media screen and (max-width: 1699px) and (min-width: 1401px){
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 44px;
		--sub-heading: 36px;
		--title-heading: 30px;
		--largest-size: 24px;
		--default-size: 14px;
		--small-size: 12px;
		--smaller-size:11px;
	}
	
	h6{
		font-size:11px;
	}
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-weight:400;
	}
	
}

@media screen and (max-width:1400px) {
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 38px;
		--sub-heading: 30px;
		--title-heading: 26px;
		--largest-size: 22px;
		--larger-size: 18px;
		--caption-size: 16px;
		--large-size: 14px;
		--default-size: 13px;
		--small-size: 11px;
		--smaller-size: 10px;
	}
	
	h6{
		font-size:10px;
	}
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		border-radius:4px;
		padding:6px 10px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:12px;
		padding:2px 8px;
		height:24px;
		width:150px;
		
	}

}

@media screen and (max-width:1400px) {
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 36px;
		--sub-heading: 28px;
		--title-heading: 22px;
		--largest-size: 18px;
		--larger-size: 16px;
		--caption-size: 14px;
		--large-size: 13px;
		--default-size: 12px;
		--small-size: 10px;
		--smaller-size: 9px;
	}
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		border-radius:4px;
		padding:6px 10px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:11px;
		padding:2px 8px;
		height:24px;
		width:150px;
	}
}

@media screen and (max-width:1400px) {
	
	:root{
		
		/* Font Size Responsiveness */
		--heading: 30px;
		--sub-heading: 24px;
		--title-heading: 16px;
	}
	
	/* Default Buttons Responsiveness */
	.btn-transparent{
		font-size:var(--default-size);
		border-radius:4px;
		padding:6px 10px;
		font-weight:400;
	}
	
	.btn-alternate{
		font-size:11px;
		padding:2px 8px;
		height:24px;
		width:150px;
	}
}

@media screen and (max-width:767px) {
	
	/* Other General Settings Responsiveness */
	.show-on-tab{
		display:block;
	}
	
	.hide-on-tab{
		display:none !important;
	}
	
}