@media (min-width: 1024px) {

:root {
	--myFont:'Calibri';
	--myFontLight:'Calibri';
	--myFontBold:'CalibriBold';

	--padding:1rem 4rem;
	--footer-padding:0.5rem 4rem;
	--navbtn-padding:0.8rem 1.5rem 0.5rem 1.5rem;
	--herobtn-padding:1rem 1.5rem 0.8rem 1.5rem;

	--grid-gap:1rem;
	--hero-grid-gap:1rem 2rem;

	--logo-size:clamp(30px, 8vh, 90px);

	--page-title:clamp(40px, 3vh, 70px);

	--btn-text:clamp(1.8rem, 30px, 2.5vh);

	/* hero font size */
	--hero-text:clamp(1.45rem, 20px, 2.1vh);
	--garathorm-text:clamp(1.45rem, 20px, 2.1vh);
	--garathorm-title:clamp(1.45rem, 20px, 2.1vh);
	--tagline-text:clamp(1.45rem, 20px, 2.1vh);

	/* services font size  */
 	--s-title:clamp(1.45rem, 20px, 2.1vh);
 	--s-subtitle:clamp(1.2rem, 13px, 1.8vh);
 	--s-desc:clamp(1.1rem, 12px, 1.6vh);
 	--s-btn-text:clamp(1.1rem, 12px, 1.6vh);

 	/* floating page font-size  */
 	--f-tab-title:clamp(1.1rem, 12px, 1.6vh);
 	--f-link:clamp(1.1rem, 12px, 1.6vh);

 	--f-heading:clamp(1.45rem, 20px, 2.1vh);
 	--f-text:clamp(1.1rem, 12px, 1.6vh);

 	/* about font size */
 	--ab-heading:clamp(1.45rem, 20px, 2.1vh);
 	--ab-text:clamp(1.45rem, 20px, 2.1vh);

 	/* footer text  */

 	--footer-txt:clamp(14px, 2.2vh, 18px);


 	/**/

	/*Title Page*/
  --h2: clamp(1.8rem, 3vw, 3rem);
  /*navigation link and button*/
  --h3: clamp(1.8rem, 30px, 2.5vh);
  /*page paragraph*/1
  --h4: clamp(1.45rem, 20px, 2.1vh);
  --h4-garathorm: clamp(1.45rem, 20px, 2.1vh);
  --h4-services: clamp(1.45rem, 20px, 2.1vh);
  --h4-fm:clamp(20px, 2.5vh, 22px);
  /* footer link */
  --h5: clamp(1.2rem, 13px, 1.8vh);
  --h5-fm:clamp(16px, 2vh, 20px);
  /**/
  --h6: clamp(1.1rem, 12px, 1.6vh);

  --f-icon-size:110px;

  --primary-color:#007BA7;
  --secondary-color:#D5ECF6;

  --primary-text-color:#000;
  --secondary-text-color:#fff;

  --primary-bg-color:#D5ECF6;
  --secondary-bg-color:#fff;

  --floating-menu-bg-color:#E8F3F8;
}



/* Optional WebKit styling so the thumb/track are visible when present */
::-webkit-scrollbar { width: 6px; height:8px; }
::-webkit-scrollbar-track { background: var(--primary-bg-color); }
::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 6px; }

 #typed {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
    will-change: opacity;
  }

  #typed.show {
    opacity: 1;
  }

.info-wrap {
  position: relative;
  cursor: help;
  display: inline-block;
  color:var(--primary-color);
}

h1,h2,h3,h4,h5,h6{
	font-family:CalibriBold;
	font-weight: 600 !important;
}

p{
	margin-bottom:10px  !important;
	line-height:1.4em;
}

p:last-child{
	margin-bottom:0px  !important;
	
}

.tooltip {
  position: fixed; /* fixed for viewport detection */
  background: var(--primary-color);
  color: #fff;
  padding: 8px 12px;
  font-size:13px !important;
  border-radius: 6px;
  max-width: 300px;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  /*box-shadow:0 2px 5px rgba(0, 0, 0, 0.5);*/
  z-index: 9999;
}

.tooltip a{
	color:#fff;
	text-decoration: underline;
}


/* Arrow base */
.tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
}

/* Arrow when tooltip is ABOVE the element */
.tooltip.arrow-bottom::after {
  top: 100%;
  border-top-color: var(--primary-color);
}

/* Arrow when tooltip is BELOW the element */
.tooltip.arrow-top::after {
  bottom: 100%;
  border-bottom-color: var(--primary-color);
}

.textTooltip{
	display:inline;
}

.download-btn{
	position: absolute;
	background:#007BA7;
	color:#fff;
	font-size:14px !important;
	padding:5px 10px;
	border-radius:10px;
	margin-left:-12%;
	margin-top:-25px;
	opacity:0;
}

.download-btn:hover{
	background:#007BA7 !important;
	color:#fff !important;
}

.textTooltip:hover .download-btn{
	opacity:1;
}

/* ----------------------------------------------  */

.inception-main{
	position: fixed;
	top:0%;
	left:0%;
	width: 100%;
	max-width:100vw;
	height:100%;
	max-height:100vh;
	display: grid;
	grid-template-rows:auto 1fr auto;
	/*grid-gap:2vh;*/
	color:var(--primary-text-color);
	font-weight:300;
}

/* -------- header style */

.inception-header{
	position: relative;
	width:100%;
	height: auto;
	padding:var(--padding);
	background:var(--secondary-bg-color);
	display: grid;
	grid-template-columns:auto 49.5vw;
}

.inception-logo{
	position: relative;
	/*min-height:70px !important;*/
	height:var(--logo-size);
	object-fit: contain;
}

.inception-navwrapper{
	position: relative;
	display: flex;
	width:100%;
	height:100%;
	flex-direction: row;
	/*align-content: center;*/
	align-items: center;
	justify-content: space-between;
}

.inception-navlink{
	text-decoration: none;
	color:#000;
	font-size:var(--btn-text) !important;
	font-family: var(--myFont);
	font-weight:600;
	line-height:1.1em;
	text-transform: uppercase;
}

.inception-navlink:hover{
	text-decoration: none;
	color:var(--primary-color);
}

.inception-navlink.btn{
	padding:var(--navbtn-padding);
	background-color:var(--primary-color);
	color:var(--secondary-text-color);
	border-radius:5px;
}

.inception-navlink.btn:hover{
	color:var(--secondary-text-color);
}

/* -------- end header style */



/* Page content style */

.inception-pageContent{
	position:relative;
	width:100%;
	height:100%;
	background:var(--primary-bg-color);
	display: grid;
	grid-template-rows:auto 1fr auto;
	grid-gap:var(--grid-gap);
	padding:var(--padding);
	align-content: center;
	align-items: center;
	font-family: var(--myFontLight);
}

.inception-pageContent.hero{
	position:relative;
	width:100%;
	height:100%;
	background:var(--primary-bg-color);
	display: grid;
	grid-template-rows:auto 1fr;
	grid-gap:var(--grid-gap);
	padding:var(--padding);
}

.inception-contentWrapper{
	position: relative;
	width:100%;
	height:100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.inception-contentWrapper.hero{
	width:100%;
	display: grid;
/* 	grid-template-rows: auto auto; */
	grid-template-columns: auto 60vh;
	grid-gap:var(--hero-grid-gap);
	align-items:start;
}
	
	.inception-hero-item{
		position:relative;
		width:100%;
		height:100%;
		display:grid;
		grid-template-rows:1fr 0.25fr;
		grid-gap:var(--hero-grid-gap);
	}
	
	.inception-hero-item.grid-auto{
		width:100%;
		height:100%;
		display:flex !important;
		flex-direction:column !important;
		align-content:center;
		justify-content:space-between;
		gap:0rem;
/* 		grid-template-rows:auto auto;
		grid-gap:var(--hero-grid-gap); */
	}

.inception-pageTitle{
	margin:0px;
	font-size:var(--page-title) !important;
	font-family: var(--myFontBold);
	font-weight:600;
	z-index: 2;
}

.inception-pageTitle.light-text{
	margin:0px;
	/*font-size:var(--page-title) !important;*/
	z-index: 2;
	color: var(--secondary-text-color);
	text-shadow:0 1px 5px rgba(0, 0, 0, 0.6);
}

.inception-pageTitle.text-center{
	text-align: center;
}
	
	.inception-hero-image-wrapper{
		display:flex;
		width:100%;
		flex-direction:column;
/* 		height:100%; */
		gap:10px;
/* 		justify-content: space-between; */
        align-items: start;

	}

.inception-whitebox{
	position: relative;
	width:100%;
	height:100%;
	border-radius:20px;
	background-color:var(--secondary-bg-color);
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
}

.hero p{
	font-size: var(--hero-text) !important;
	line-height:1.06em
}

.about p{
	font-size: var(--ab-text) !important;
	margin-bottom:10px !important;
	line-height:1.3em;
}

.about h3{
	font-size: var(--ab-heading) !important;
}

.inception-whitebox.floatingMenu{
	width:90%;
}



.inception-floatingMenu-content p, .inception-floatingMenu-content ul, .inception-floatingMenu-content li{
	font-size: var(--f-text) !important;
	font-family: var(--myFontLight);
	margin-bottom:1.5rem;
}

.inception-floatingMenu-content h3{
	font-size: var(--f-heading) !important;
	margin-bottom:1.5rem;
}

.inception-whitebox p:last-child{
	margin-bottom:0px;
}

.inception-whitebox.floatingMenu{
	width:89% !important;
}
.inception-hero-img{
	width:100%;
	object-fit:contain;
/* 	height:80%; */
/* 	margin-top:-20px; */
}	

.hero-btn-wrapper{
	padding:1.25rem 0rem 1.25rem 0rem;
	height:100%;
	display:flex;
	flex-direction:row !important;
	align-items:center !important;
	align-content:center !important;
	justify-content: space-between !important;
}
	
	.inception-rsrw-wrapper{
		position:relative;
		width:100%;
		display:flex;
		flex-direction:column;
		align-content:start;
		justify-content:start;
	}	
	
	.inception-rsrw-alert{
		width:50vw;
		max-width;400px;
		max-height:400px;
		position:absolute;
		background:#fff;
		padding:1rem;
		right:0%;
		bottom:100%;
		z-index:4;
		box-shadow:0 2px 5px rgba(0,0,0,0.25);
		border-radius:10px;
		display:none;
	}
	
	.inception-rsrw-alert p{
		font-size:var(--s-subtitle) !important;
	}
	
	.inception-rsrw-alert::after {
	  content: "";
	  position: absolute;
	  left: 50%;
	  transform: translateX(-50%);
	  border: 6px solid transparent;
	bottom: 100%;
  border-bottom-color: var(--primary-color);
	}
	
.inception-rsrw{
		position:relative;
		height:70px;
		object-fit:contain;
/* 		margin-right:20%; */
		margin:1.8rem 0rem;
	}
	
	.inception-rsrw-wrapper:hover .inception-rsrw-alert{
		display:block !important;
	}

	
	
.inception-garathorm{
	position:relative;
	width:100%;
	height:100%;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: center;
	overflow:hidden;
}
	
	.inception-vflex{
		position:relative;
		width:100%;
		display:flex;
		flex-direction:column;
		gap:1rem;
	}
	
.inception-garathorm-title{
	width:100%;
	text-align:center;
	font-weight:500;
	font-size:var(--garathorm-title);
	color:#fff !important;
/* 	margin:0px !important; */
	margin-bottom:0.5rem;
}
	
.inception-garathorm h4{
	font-family: var(--myFont);
	font-weight:500;
	margin-top:0px;
}

.inception-garathorm{
	font-size:var(--garathorm-text) !important;
}
.inception-garathorm a{
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;  /* Limit to 3 lines */
	overflow: hidden;
	font-family: var(--myFont);
}

.inception-btn{
	padding:1.3% 2rem;
	background:var(--primary-color);
	color:var(--secondary-text-color);
	font-size:var(--btn-text) !important;
	line-height:1.2em;
	border-radius:5px;
	text-transform: uppercase;
	text-decoration: none;
	z-index:2;
}

.inception-btn.hero-btn{
	padding:var(--herobtn-padding) !important
}

.inception-btn.f-btn{
	padding:0.6rem 1.5rem;
	background:var(--primary-color);
	color:var(--secondary-text-color);
	font-size:var(--s-btn-text) !important;
	line-height:1.2em;
	border-radius:5px;
	text-transform: uppercase;
	text-decoration: none;
	z-index:2;
}

.inception-btn:hover{
	color:var(--secondary-text-color);
	text-decoration: none;

}

.inception-features{
	width:100%;
	height:100%;
	max-height:500px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap:2%;
}

.inception-features.trio{
	position:relative;
	width:86%;
	height:100%;
	max-height:500px;
	display: flex;
	flex-direction: row;
	/*grid-template-columns: 1fr 1fr 1fr;
	grid-gap:2%;*/
	justify-content: space-between;
	/*justify-items: center;*/
}

.inception-features.trio .inception-feature-item{
	max-width:370px;
	overflow:hidden !important;
}

.inception-feature-item{
	position: relative;
	width:100%;
	height:100%;
	background:var(--secondary-bg-color);
	border-radius:20px;
	padding:4rem 1.5rem;
	display: grid;
	grid-template-rows:auto 1fr auto;
	grid-gap:2rem;
	overflow-x:hidden;
	overflow-y:hidden;
	align-items: start;
	align-content: start;
	justify-content: center;
	justify-items: center;
	text-align: center;
	color:#000;

}
	.inception-feature-item:hover{
		text-decoration:none !important;
		color:#000;
	}
	
	.inception-feature-item:focus{
		text-decoration:none !important;
		color:#000;
	}
	
	.inception-feature-item:hover{
		text-decoration:none !important;
	}
	
	.inception-feature-item.static{
		position:static !important;
		overflow:hidden !important;
	}
	
.inception-feature-item.light-text{
	color:var(--secondary-text-color);
}
	
.inception-feature-item.text-shadow{
	text-shadow:0 1px 5px rgba(0, 0, 0, 0.6);
}
	
.inception-feature-item.light-text:focus{
	color:var(--secondary-text-color);
}
	
	.inception-feature-item.light-text:hover{
	color:var(--secondary-text-color);
}

.inception-feature-child-item{
	width:100%;
	display: grid;
	grid-template-rows:40px 40px 1fr;
	grid-gap:var(--grid-gap);
	z-index:2;
}

.inception-feature-icon{
	height:var(--f-icon-size);
	object-fit: contain;
	z-index:2;
}

.inception-features-item-title{
	margin:0px;
	font-size:var(--s-title) !important;
	font-family: var(--myFont);
	font-weight: 600 !important;
}

.inception-features-item-title.text-shadow{
	text-shadow:0 1px 5px rgba(0, 0, 0, 0.6);
}

.inception-features-item-sub-title{
	margin:0px;
	font-size:var(--s-subtitle) !important;
	font-family: var(--myFont);
	font-weight: 600 !important;
	font-style: italic !important; 
}

.inception-features-item-sub-title.text-shadow{
	text-shadow:0 1px 5px rgba(0, 0, 0, 0.6);
	font-style: italic !important; 
}

.inception-features-item-desc{
	margin:0px;
	font-size:var(--s-desc) !important;
	font-family: var(--myFont);
	font-weight:500;
}

.inception-features-item-desc.text-shadow{
	text-shadow:0 1px 5px rgba(0, 0, 0, 0.6);
}


.inception-floatingMenu-wrapper{
	position: relative;
	width:100%;
	height:100%;
	display:grid;
	grid-template-columns:300px 1fr;
	grid-gap:2rem;
	align-items: start;
}

.inception-floatingMenu-title{
	margin-top:0px;
	font-size:var(--f-tab-title) !important;
	font-family: var(--myFont);
	font-weight:600;
}

.inception-floatingMenu-navwrapper{
	width:100%;
	height: auto;
	padding:2rem;
	background:var(--floating-menu-bg-color);
}

.inception-table-content-navwrapper{
	width:100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-left:1rem;
	border-left: 1px solid #000;
}

.inception-table-content-navwrapper.no-border{
	border-style: none !important;
	padding:0px;
}

.inception-table-content-navwrapper a{
	font-size:var(--f-link) !important;
	font-family: var(--myFont);
	color:#000;
}

.inception-table-content-navwrapper a:hover{
	color: var(--primary-color);
}

.inception-floatingMenu-content{
	width:100%;
	position: relative;
	height:100%;
	max-height:62vh;
	display: flex;
	flex-direction: column;
	gap:4rem;
	overflow-y: auto;
	font-family: var(--myFont);
}

.inception-floatingMenu-item{
	position: relative;
	width: 100%;
	min-height:100%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: start;
}

.inception-bg-wrapper{
	position: absolute;
	inset:0;
	top:0px;
	left:0px;
	width:100%;
	height:100%;

}
	
.inception-bg-wrapper-absolute{
	position: absolute;
	top:0%;
	margin-left:-15%;
	width:85vw;
	height:85vh;

}
	
.inception-bg-wrapper-absolute.left{
	position: absolute;
	top:0%;
	left:-15%;
	margin-left:0%;

}
	
.inception-bg-wrapper-absolute.right{
	position: absolute;
	top:0%;
	right:0%;
	margin-right:-5%;

}
	
	.inception-bg-wrapper-absolute img{
		width:100%;
		height:100%;
		object-fit: cover;
		
		object-position: center top;
	}

.inception-bg-wrapper img{
	width:110%;
	height:115%;
	object-fit: cover;
	object-position: center top;
}


.inception-tagLine{
	min-height:var(--page-title);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 2;
	font-size:var(--tagline-text) !important;
	font-family: var(--myFont);
}

.inception-tagLine.light-text{
	color:var(--secondary-text-color);
	text-shadow:0 1px 5px rgba(0, 0, 0, 0.6);
}

.img-hover {
		position: relative;
		display: flex;
}

.img-hover img {
		display: flex;
}

.hover-text {
		  position: absolute;
		  right:10px;
		  background:#007BA7;
		  color:#fff;
		  width:130px;
		  height:30px;
		  font-size:14px !important;
		  border-radius:10px;
		  display: grid;
		  place-items: center;
		  opacity: 0;
		  transition: opacity 0.25s ease;
		  pointer-events: none;
		  text-wrap: nowrap;
		  flex-wrap:nowrap;
		  z-index:100;
		}

		.img-hover:hover .hover-text {
		  opacity: 1;
		}

/* end content style */


/* footer style  */

.inception-footer{
	position: relative;
	width:100%;
	height: auto;
	padding:var(--footer-padding);
	background:var(--secondary-bg-color);
	display: grid;
	grid-template-columns: 1fr 1fr 1fr ;
	grid-gap:2rem;

}

.inception-footer-text{
	width:100%;
	display: flex;
	flex-direction: rows;
	align-items: center;
	justify-content: center;
	gap:10px;
	color:var(--primary-color);
	font-size:var(--footer-txt) !important;
	font-family: var(--myFont);
	line-height:1em;
}

.inception-footer-text a{
	font-size:var(--footer-txt) !important;
	text-decoration: none;
	color:var(--primary-color);
	line-height:1em;
	font-family: var(--myFont);
}

.inception-footer-text.left{ justify-content:left; }
.inception-footer-text.right{justify-content:right;}
/* end footer style  */


.inception-vflex{
	display: flex;
	flex-direction: column;
	align-items: start;
	justify-content: center;
}

.h-flex{
	width:100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	align-content: center;
}


/* 1101 - 1200 */

@media only  screen and (min-width: 1024px) and (max-width: 1100px) {

 	@media only screen and (min-height: 600px) and (max-height: 700px){
			:root{
					--padding:1rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;


					--logo-size:clamp(30px, 10vh, 45px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(16px, 2.8vh, 18px);

					/* hero font size */
					--hero-text: clamp(12.5px, 2.15vh, 20px);
					--garathorm-text:clamp(13px, 2.3vh, 18px);

					/* services font size  */
				 	--s-title:clamp(12px, 2vh, 16px);
				 	--s-subtitle:clamp(10px, 1.6vh, 13.5px);
				 	--s-desc:clamp(9px, 1.6vh, 12px);
				 	--s-btn-text:clamp(10px, 2vh, 14px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(14px, 2.5vh, 16px );
				 	--ab-text:clamp(10px, 2.5vh, 12px);


 					--footer-txt:clamp(12px, 2.2vh, 14px);

				 --f-icon-size:70px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 45vh;
					
				}

				.inception-feature-item{
					padding:1.1rem 1rem;
					grid-gap: 1rem;
				}

				.inception-whitebox{
					padding:1rem !important;
				}

				.inception-whitebox.hero{
					height: auto !important;
				}

				.inception-feature-child-item{
					grid-template-rows: 6vh 6vh 1fr;
				}

				.inception-features{
					max-height: 400px !important;
				}

				.inception-floatingMenu-content{
					max-height:58vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

				.inception-floatingMenu-wrapper{
					grid-template-columns: 200px 1fr;
				}


		}

		@media only screen and (min-height: 701px) and (max-height: 800px){
			:root{
					--padding:1rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(45px, 10vh, 55px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 2.5vh, 18px);

					/* hero font size */
					--hero-text:clamp(13px, 2.1vh, 16px);
					--garathorm-text:clamp(13px, 2.5vh, 18px);

					/* services font size  */
				 	--s-title:clamp(12px, 2vh, 13px);
				 	--s-subtitle:clamp(10px, 1.7vh, 10.5px);
				 	--s-desc:clamp(9px, 1.6vh, 10px);
				 	--s-btn-text:clamp(10px, 2vh, 14px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(12px, 2.5vh, 14px);


 					--footer-txt:clamp(13px, 2.2vh, 15px);

				 --f-icon-size:70px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 14vh;
					grid-template-columns: auto 40vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-whitebox.hero{
					height: auto !important;
				}

				.inception-features{
					max-height: 400px !important;
				}

				.inception-feature-item{
					padding:1.5rem 1rem;
					grid-gap: 1rem;
				}

			

				.inception-whitebox{
					padding:1.2rem !important;
				}



				.inception-feature-child-item{
					grid-template-rows: 6vh 6vh 1fr;
				}

				.inception-floatingMenu-content{
					max-height:60vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

				.inception-floatingMenu-wrapper{
					grid-template-columns: 200px 1fr;
				}

		}

		@media only screen and (min-height: 801px) and (max-height: 900px){
			:root{
					--padding:1rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 2vh, 17px);

					/* hero font size */
					--hero-text:clamp(13px, 1.9vh, 16px);
					--garathorm-text:clamp(13px, 2.5vh, 19px);

					/* services font size  */
				 	--s-title:clamp(12px, 2vh, 13px);
				 	--s-subtitle:clamp(10px, 1.7vh, 10.5px);
				 	--s-desc:clamp(9px, 1.6vh, 10px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(12px, 2.5vh, 14px);


 					--footer-txt:clamp(13px, 2.2vh, 15px);

				 --f-icon-size:70px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 40vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-features{
					max-height: 50vh !important;
				}

				.inception-feature-item{
					padding:1.1rem 1rem;
					grid-gap: 1rem;
				}

				.inception-whitebox.hero{
					height: auto !important;
				}

				.inception-whitebox{
					padding:1.5rem !important;
				}

				.inception-feature-child-item{
					grid-template-rows: 30px 30px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

				.inception-floatingMenu-wrapper{
					grid-template-columns: 200px 1fr;
				}

		}

			@media only screen and (min-height: 901px) and (max-height: 1000px){
			:root{
					--padding:1rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 2vh, 17px);

					/* hero font size */
					--hero-text:clamp(13px, 1.9vh, 16px);
					--garathorm-text:clamp(13px, 2.5vh, 19px);

					/* services font size  */
				 	--s-title:clamp(12px, 2vh, 13px);
				 	--s-subtitle:clamp(10px, 1.7vh, 10.5px);
				 	--s-desc:clamp(9px, 1.6vh, 10px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(12px, 2.5vh, 14px);


 					--footer-txt:clamp(13px, 2.2vh, 15px);

				 --f-icon-size:70px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 40vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-features{
					max-height: 50vh !important;
				}

				.inception-feature-item{
					padding:1.1rem 1rem;
					grid-gap: 1rem;
				}

				.inception-whitebox.hero{
					height: auto !important;
				}

				.inception-whitebox{
					padding:1.5rem !important;
				}

				.inception-feature-child-item{
					grid-template-rows: 30px 30px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

				.inception-floatingMenu-wrapper{
					grid-template-columns: 200px 1fr;
				}

		}

}


/* 1101 - 1200 */

@media only  screen and (min-width: 1101px) and (max-width: 1200px) {
 	@media only screen and (min-height: 600px) and (max-height: 700px){
			:root{
					--padding:1rem 2rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(12px, 2.05vh, 14px);
					--garathorm-text:clamp(13px, 2.5vh, 18px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.3vh, 18px);
				 	--s-subtitle:clamp(14px, 2.1, 16px);
				 	--s-desc:clamp(13px, 2vh, 15px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(16px, 2.5, 20px);

				 --f-icon-size:90px;
			}

			.inception-whitebox{
				padding:1.2rem !important;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-floatingMenu-content{
					max-height:53vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

				.inception-btn.hero-btn{
					padding:1.1rem 1.3rem !important;
				}

		}

	@media only screen and (min-height: 701px) and (max-height: 800px){
			:root{
					--padding:1rem 2rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(45px, 2.5vh, 50px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(13px, 1.85vh, 15.2px);
					--garathorm-text:clamp(13px, 2.65vh, 19.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.6vh, 21px);
				 	--s-subtitle:clamp(14px, 2.5vh, 18.5px);
				 	--s-desc:clamp(13px, 1.9vh, 16px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.65vh, 20px );
				 	--ab-text:clamp(15px, 2.25vh, 19px);

				 --f-icon-size:100px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 801px) and (max-height: 900px){
			:root{
					--padding:1rem 2rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(45px, 2.8vh, 55px);

					--btn-text:clamp(14px, 3vh, 23px);

					/* hero font size */
					--hero-text:clamp(14.7px, 1.8vh, 16.2px);
					--garathorm-text:clamp(18px, 2.25vh, 21.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 21px);
				 	--s-subtitle:clamp(14px, 2.35vh, 19px);
				 	--s-desc:clamp(13px, 2.4vh, 16px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.65vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(22px, 2.5vh, 25px );
				 	--ab-text:clamp(16px, 2.3vh, 20px);

				 --f-icon-size:110px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto clamp(108px, 0.9vh, 121.5px);
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 50px 50px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 901px) and (max-height: 1000px){
			:root{
					--padding:1rem 2rem;

					--logo-size:clamp(40px, 10vh, 70px);

					--page-title:clamp(45px, 10vh, 55px);

					--btn-text:clamp(20px, 3vh, 25px);

					/* hero font size */
					--hero-text:clamp(16px, 1.75vh, 17.1px);
					--garathorm-text:clamp(23px, 2.55vh, 24.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 21px);
				 	--s-subtitle:clamp(14px, 2.35vh, 19px);
				 	--s-desc:clamp(13px, 2.4vh, 16px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 25px);
				 	--f-text:clamp(16px, 2.65vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(20px, 2.5vh, 25px );
				 	--ab-text:clamp(16px, 2.5vh, 20px);

				 	/* footer text  */

 					--footer-txt:clamp(16px, 2.2vh, 19px);


				 --f-icon-size:110px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 50px 50px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1001px) and (max-height: 1100px){
			:root{
					--padding:1rem 2rem;

					--logo-size:clamp(50px, 10vh, 80px);

					--page-title:clamp(55px, 10vh, 65px);

					--btn-text:clamp(24px, 3vh, 28px);

					/* hero font size */
					--hero-text:clamp(16px, 2.39vh, 18px);
					--garathorm-text:clamp(23px, 2.55vh, 26.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 23px);
				 	--s-subtitle:clamp(14px, 2.35vh, 20px);
				 	--s-desc:clamp(13px, 2.4vh,18px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 20px);
				 	--f-link:clamp(18px, 2.45vh, 20px);

				 	--f-heading:clamp(20px, 2.7vh, 24px);
				 	--f-text:clamp(18px, 2.65vh, 20px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 2.5vh, 24px );
				 	--ab-text:clamp(18px, 2.5vh, 20px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.35vh, 20px);


				 --f-icon-size:120px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 14vh;
					grid-template-columns: auto 45vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 55vh !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 60px 60px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}
}

/* 1201 - 1300 */

@media only  screen and (min-width: 1201px) and (max-width: 1300px) {
		@media only screen and (min-height: 500px) and (max-height: 600px){
			:root{
					--padding:0rem 4rem;
					--footer-padding:0.5rem 4rem;
					--navbtn-padding:0.5rem 1rem;
					--herobtn-padding:0.8rem 1.2rem;

					--grid-gap:0rem;
					--hero-grid-gap:0rem 1rem;

					--logo-size:clamp(55px, 10vh, 65px);

					--page-title:35px;

					--btn-text:25px;

					/* hero font size */
					--hero-text:19.6px;
					--garathorm-title:25px;
					--garathorm-text:12px;
					--tagline-text:19.6px;

					/* services font size  */
				 	--s-title:19.6px;
				 	--s-subtitle:15px;
				 	--s-desc:12px;
				 	--s-btn-text:15px;

				 	/* floating page font-size  */
				 	--f-tab-title:15px;
				 	--f-link:12px;

				 	--f-heading:25px;
				 	--f-text:19.6px;

				 	/* about font size */
				 	--ab-heading:19.6px;
				 	--ab-text:15px;

				 	/* footer text  */

 					--footer-txt:12px;


				 --f-icon-size:80px;
			}
			.inception-header{
				padding:0.5rem 4rem !important;
			}
			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto auto;
					grid-template-columns: auto 50vh;
					grid-gap:0rem 0.5rem;
				}

				.inception-whitebox {
					padding:0.5rem 1rem;
					height:auto;
				}

				.inception-features{
					max-height: 100% !important;
				}

				.inception-feature-item{
					padding:1rem 0.25rem;
					grid-gap: 1rem;
					max-width:250px !important;
				}

				.inception-feature-child-item{
					grid-template-rows: auto 8vh 1fr;
					grid-gap:1rem;
				}

				.inception-floatingMenu-content{
					max-height:65vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}
			
			.inception-floatingMenu-wrapper{
				display:grid;
				grid-template-columns:200px 1fr;
				grid-gap:2rem;
				align-items: start;
			}
			
			.about p{
				font-size: var(--ab-text) !important;
				margin-bottom:8px !important;
				line-height:1.1em;
			}

		}
	
	
 		@media only screen and (min-height: 600px) and (max-height: 700px){
			:root{
					--padding:0rem 4rem;
					--footer-padding:0.5rem 4rem;
					--navbtn-padding:0.5rem 1rem;
					--herobtn-padding:0.8rem 1.2rem;

					--grid-gap:0rem;
					--hero-grid-gap:0rem 1rem;

					--logo-size:clamp(55px, 10vh, 65px);

					--page-title:35px;

					--btn-text:25px;

					/* hero font size */
					--hero-text:19.2px;
					--garathorm-title:25px;
					--garathorm-text:12px;
					--tagline-text:19.2px;

					/* services font size  */
				 	--s-title:19.6px;
				 	--s-subtitle:15px;
				 	--s-desc:12px;
				 	--s-btn-text:15px;

				 	/* floating page font-size  */
				 	--f-tab-title:15px;
				 	--f-link:12px;

				 	--f-heading:25px;
				 	--f-text:19.6px;

				 	/* about font size */
				 	--ab-heading:19.6px;
				 	--ab-text:15px;

				 	/* footer text  */

 					--footer-txt:12px;


				 --f-icon-size:80px;
			}
			.inception-header{
				padding:0.5rem 4rem !important;
			}
			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto auto;
					grid-template-columns: auto 50vh;
					grid-gap:0rem 0.5rem;
				}

				.inception-whitebox {
					padding:0.5rem 1rem;
					height:auto;
				}

				.inception-features{
					max-height: 100% !important;
				}

				.inception-feature-item{
					padding:1rem 0.25rem;
					grid-gap: 1rem;
					max-width:250px !important;
				}

				.inception-feature-child-item{
					grid-template-rows: auto 8vh 1fr;
					grid-gap:1rem;
				}

				.inception-floatingMenu-content{
					max-height:65vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}
			
			.inception-floatingMenu-wrapper{
				display:grid;
				grid-template-columns:200px 1fr;
				grid-gap:2rem;
				align-items: start;
			}
			
			.about p{
				font-size: var(--ab-text) !important;
				margin-bottom:8px !important;
				line-height:1.1em;
			}

		}

	@media only screen and (min-height: 701px) and (max-height: 800px){
			:root{
					--padding:0.8rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(40px, 2.5vh, 45px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(13px, 1.85vh, 15.2px);
					--garathorm-text:clamp(13px, 2.65vh, 19.5px);

					/* services font size  */
				 	--s-title:clamp(15px, 2.6vh, 16px);
				 	--s-subtitle:clamp(12px, 2.5vh, 12.5px);
				 	--s-desc:clamp(10px, 1.9vh, 11.5px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.2vh, 18px );
				 	--ab-text:clamp(12px, 1.97vh, 15px);

				 --f-icon-size:clamp(80px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height:450px;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61.5vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 801px) and (max-height: 900px){
			:root{
					--padding:0.8rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(45px, 2.8vh, 55px);

					--btn-text:clamp(14px, 3vh, 23px);

					/* hero font size */
					--hero-text:clamp(14.7px, 1.92vh, 17.3px);
					--garathorm-text:clamp(18px, 2.25vh, 21.5px);

					/* services font size  */
				 	--s-title:clamp(12px, 2.4vh, 14.5px);
				 	--s-subtitle:clamp(11px, 2.35vh, 11.5px);
				 	--s-desc:clamp(10.5px, 2.4vh, 11px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.65vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(17px, 2.2vh, 19px );
				 	--ab-text:clamp(15.5px, 1.9vh, 17.5px);

				 --f-icon-size:clamp(90px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto clamp(108px, 0.9vh, 121.5px);
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 901px) and (max-height: 1000px){
			:root{
					--padding:0rem 4rem;
					--footer-padding:0.7rem 4rem;
					--navbtn-padding:1rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0rem;
					--hero-grid-gap:0rem 1rem;

					--logo-size:85px;

					--page-title:42px;

					--btn-text:30px;

					/* hero font size */
					--hero-text:23.52px;
					--garathorm-text:14.4px;
					--tagline-text:clamp(22px, 2.55vh, 28px);

					/* services font size  */
				 	--s-title:clamp(24px, 3.5vh, 36px);
				 	--s-subtitle:clamp(20px, 3.3vh, 28px);
				 	--s-desc:clamp(13px, 2.45vh, 22px);
				 	--s-btn-text:clamp(13px, 2.7vh,28px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.55vh, 28px);
				 	--f-link:clamp(18px, 2.45vh, 22px);

				 	--f-heading:clamp(20px, 3.8vh, 45px);
				 	--f-text:clamp(18px, 3.5vh, 36px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 3.35vh, 36px );
				 	--ab-text:clamp(18px, 2.7vh, 28px);

				 	/* footer text  */

 					--footer-txt:14.4px;


				 --f-icon-size:140px;
			}
			.inception-header{
				padding:0.5rem 4rem
			}
			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 100px;
					grid-template-columns: auto 55vh;
					grid-gap:0rem 1rem;
				}

				.inception-whitebox {
					padding:0.5rem 1rem;
					height:auto;
				}

				.inception-features{
					max-height: 100% !important;
				}

				.inception-feature-item{
					padding:1.5rem 0.25rem;
					grid-gap: 2rem;
				}

				.inception-feature-child-item{
					grid-template-rows: auto 8vh 1fr;
					grid-gap:2rem;
				}

				.inception-floatingMenu-content{
					max-height:70vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1001px) and (max-height: 1100px){
			:root{
					--padding:1rem 2rem;

					--logo-size:clamp(50px, 10vh, 80px);

					--page-title:clamp(55px, 10vh, 65px);

					--btn-text:clamp(24px, 3vh, 28px);

					/* hero font size */
					--hero-text:clamp(16px, 1.9vh, 20px);
					--garathorm-text:clamp(23px, 2.55vh, 26.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 23px);
				 	--s-subtitle:clamp(14px, 2.35vh, 20px);
				 	--s-desc:clamp(13px, 2.4vh,18px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 20px);
				 	--f-link:clamp(18px, 2.45vh, 20px);

				 	--f-heading:clamp(20px, 2.7vh, 24px);
				 	--f-text:clamp(18px, 2.65vh, 20px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 2.5vh, 24px );
				 	--ab-text:clamp(18px, 2.5vh, 20px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.35vh, 20px);


				 --f-icon-size:120px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 14vh;
					grid-template-columns: auto 45vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 55vh !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 60px 60px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}
}

/* 1301 - 1400 */

@media only  screen and (min-width: 1301px) and (max-width: 1400px) {
 		@media only screen and (min-height: 600px) and (max-height: 700px){
			:root{
					--padding:0.8rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(14.65px, 2.3vh, 16.2px);
					--garathorm-text:clamp(13px, 2.5vh, 18px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.3vh, 15px);
				 	--s-subtitle:clamp(12px, 2.1vh, 12.5px);
				 	--s-desc:clamp(10px, 2vh, 11px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(16px, 2.5, 20px);

				 --f-icon-size:clamp(70px, 12vh, 90px);
			}

			.inception-whitebox{
				padding:1.2rem !important;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 50vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-floatingMenu-content{
					max-height:56vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

				.inception-btn.hero-btn{
					padding:1.1rem 1.3rem !important;
				}

		}

		@media only screen and (min-height: 701px) and (max-height: 800px){
			:root{
					--padding:0.8rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(40px, 2.5vh, 45px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(13px, 2.25vh, 18px);
					--garathorm-text:clamp(13px, 2.65vh, 19.5px);

					/* services font size  */
				 	--s-title:clamp(15px, 2.6vh, 16px);
				 	--s-subtitle:clamp(12px, 2.5vh, 12.5px);
				 	--s-desc:clamp(10px, 1.9vh, 11.5px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.2vh, 18px );
				 	--ab-text:clamp(12px, 1.97vh, 15px);

				 --f-icon-size:clamp(80px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height:450px;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61.5vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 801px) and (max-height: 900px){
			:root{
					--padding:0.8rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(45px, 2.8vh, 55px);

					--btn-text:clamp(14px, 3vh, 23px);

					/* hero font size */
					--hero-text:clamp(14.7px, 1.92vh, 17.3px);
					--garathorm-text:clamp(18px, 2.25vh, 21.5px);

					/* services font size  */
				 	--s-title:clamp(12px, 2.4vh, 14.5px);
				 	--s-subtitle:clamp(11px, 2.35vh, 11.5px);
				 	--s-desc:clamp(10.5px, 2.4vh, 11px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.65vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(17px, 2.2vh, 19px );
				 	--ab-text:clamp(15.5px, 1.9vh, 17.5px);

				 --f-icon-size:clamp(90px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto clamp(108px, 0.9vh, 121.5px);
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 901px) and (max-height: 1000px){
			:root{
					--padding:0.8rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(40px, 10vh, 70px);

					--page-title:clamp(45px, 10vh, 55px);

					--btn-text:clamp(20px, 3vh, 25px);

					/* hero font size */
					--hero-text:clamp(16px, 2vh, 20px);
					--garathorm-text:clamp(22px, 2.4vh, 24.5px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.2vh, 14.5px);
				 	--s-subtitle:clamp(10px, 2.15vh, 11.5px);
				 	--s-desc:clamp(10px, 2.4vh, 11px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 25px);
				 	--f-text:clamp(16px, 2.65vh, 17px);

				 	/* about font size */
				 	--ab-heading:clamp(20px, 2.3vh, 23px );
				 	--ab-text:clamp(16px, 2vh, 19px);

				 	/* footer text  */

 					--footer-txt:clamp(16px, 2.2vh, 19px);


				 --f-icon-size:clamp(90px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 40px 40px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:65vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1001px) and (max-height: 1100px){
			:root{
					--padding:0.8rem 2rem;
					--footer-padding:0.5rem 2rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(70px, 10vh, 90px);

					--page-title:clamp(55px, 10vh, 60px);

					--btn-text:clamp(24px, 3vh, 28px);

					/* hero font size */
					--hero-text:clamp(16px, 2vh, 21.5px);
					--garathorm-text:clamp(23px, 2.55vh, 23px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.2vh, 16px);
				 	--s-subtitle:clamp(12px, 2vh, 13px);
				 	--s-desc:clamp(11px, 2.4vh,12px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 20px);
				 	--f-link:clamp(18px, 2.45vh, 20px);

				 	--f-heading:clamp(20px, 2.7vh, 24px);
				 	--f-text:clamp(18px, 2.65vh, 20px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 2.5vh, 24px );
				 	--ab-text:clamp(19px, 1.9vh, 21px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.35vh, 20px);


				 --f-icon-size:clamp(90px, 12vh, 110px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 14vh;
					grid-template-columns: auto 45vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 500px !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 50px 50px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}
}

/* 1401 - 1500 */

@media only  screen and (min-width: 1401px) and (max-width: 1500px) {
		@media only screen and (min-height: 600px) and (max-height: 700px){
			:root{
					--padding:1rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(15px, 2.35vh, 17.2px);
					--garathorm-text:clamp(13px, 2.5vh, 18px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.4vh, 16px);
				 	--s-subtitle:clamp(12px, 2.1vh, 13.5px);
				 	--s-desc:clamp(10px, 2vh, 12.5px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(14.5px, 2vh, 15px);

				 --f-icon-size:clamp(70px, 12vh, 90px);
			}

			.inception-whitebox{
				padding:1.2rem !important;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 50vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-floatingMenu-content{
					max-height:52vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-feature-child-item{
					grid-template-rows: 6vh 6vh 1fr;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

				.inception-btn.hero-btn{
					padding:1.1rem 1.3rem !important;
				}

		}

		@media only screen and (min-height: 701px) and (max-height: 800px){
			:root{
					--padding:0.8rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(40px, 2.5vh, 45px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(13px, 2.25vh, 18.5px);
					--garathorm-text:clamp(13px, 2.65vh, 19.5px);

					/* services font size  */
				 	--s-title:clamp(15px, 2.6vh, 17.5px);
				 	--s-subtitle:clamp(12px, 2.5vh, 13.5px);
				 	--s-desc:clamp(10px, 1.9vh, 12.5px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.4vh, 19px );
				 	--ab-text:clamp(12px, 2vh, 17px);

				 --f-icon-size:clamp(80px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height:450px;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61.5vh;
				}

				.inception-features.trio{
					width:89% !important;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 801px) and (max-height: 900px){
			:root{
					--padding:0.8rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(45px, 2.8vh, 55px);

					--btn-text:clamp(14px, 3vh, 23px);

					/* hero font size */
					--hero-text:clamp(14.7px, 2.25vh, 18.5px);
					--garathorm-text:clamp(18px, 2.25vh, 21.5px);

					/* services font size  */
				 	--s-title:clamp(15px, 2.6vh, 16px);
				 	--s-subtitle:clamp(12px, 2.5vh, 13px);
				 	--s-desc:clamp(10px, 1.9vh, 12.5px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.3vh, 21px );
				 	--ab-text:clamp(12px, 2vh, 18px);

				 --f-icon-size:clamp(90px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto clamp(108px, 0.9vh, 121.5px);
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-features.trio{
					width:89% !important;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 901px) and (max-height: 1000px){
			:root{
					--padding:0.8rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:1rem;
					--hero-grid-gap:1rem 1.5rem;

					--logo-size:clamp(40px, 10vh, 70px);

					--page-title:clamp(45px, 10vh, 55px);

					--btn-text:clamp(20px, 3vh, 25px);

					/* hero font size */
					--hero-text:clamp(18.7px, 1.9vh, 19.5px);
					--garathorm-text:clamp(22px, 2.4vh, 24.5px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.2vh, 16px);
				 	--s-subtitle:clamp(10px, 2.15vh, 13px);
				 	--s-desc:clamp(10px, 2.4vh, 12px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 25px);
				 	--f-text:clamp(16px, 2.65vh, 17px);

				 	/* about font size */
				 	--ab-heading:clamp(20px, 2.4vh, 24px );
				 	--ab-text:clamp(16px, 1.95vh, 20px);

				 	/* footer text  */

 					--footer-txt:clamp(16px, 2.2vh, 19px);


				 --f-icon-size:clamp(90px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 40px 40px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:60vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1001px) and (max-height: 1100px){
			:root{
					--padding:0.8rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(70px, 10vh, 90px);

					--page-title:clamp(55px, 10vh, 60px);

					--btn-text:clamp(24px, 3vh, 28px);

					/* hero font size */
					--hero-text:clamp(16px, 2vh, 22px);
					--garathorm-text:clamp(23px, 2.55vh, 23px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.2vh, 16px);
				 	--s-subtitle:clamp(12px, 2vh, 13px);
				 	--s-desc:clamp(11px, 2.4vh,12px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 20px);
				 	--f-link:clamp(18px, 2.45vh, 20px);

				 	--f-heading:clamp(20px, 2.7vh, 24px);
				 	--f-text:clamp(18px, 2.65vh, 20px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 2.5vh, 24px );
				 	--ab-text:clamp(19px, 1.95vh, 21.5px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.35vh, 20px);


				 --f-icon-size:clamp(90px, 12vh, 110px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 14vh;
					grid-template-columns: auto 45vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 550px !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 50px 50px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}
}


/* 1501 - 1600 */

@media only  screen and (min-width: 1501px) and (max-width: 1600px) {
		@media only screen and (min-height: 600px) and (max-height: 700px){
			:root{
					--padding:1rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(35px, 10vh, 60px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(15.5px, 2.7vh, 17.5px);
					--garathorm-text:clamp(13px, 2.5vh, 18px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.45vh, 17px);
				 	--s-subtitle:clamp(12px, 2.15vh, 14.5px);
				 	--s-desc:clamp(10px, 2vh, 14.5px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(14.5px, 2vh, 15px);

				 --f-icon-size:clamp(70px, 12vh, 90px);
			}

			.inception-whitebox{
				padding:1.2rem !important;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 50vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-floatingMenu-content{
					max-height:52vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-feature-child-item{
					grid-template-rows: 6vh 6vh 1fr;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

				.inception-btn.hero-btn{
					padding:1.1rem 1.3rem !important;
				}

		}

		@media only screen and (min-height: 701px) and (max-height: 800px){
			:root{
					--padding:0.8rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(40px, 10vh, 60px);

					--page-title:clamp(40px, 2.5vh, 45px);

					--btn-text:clamp(14px, 3vh, 20px);

					/* hero font size */
					--hero-text:clamp(17.2px, 2.39vh, 19px);
					--garathorm-text:clamp(13px, 2.65vh, 19.5px);

					/* services font size  */
				 	--s-title:clamp(15px, 2.6vh, 17.5px);
				 	--s-subtitle:clamp(12px, 2.5vh, 13.5px);
				 	--s-desc:clamp(10px, 1.9vh, 12.5px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.4vh, 19px );
				 	--ab-text:clamp(12px, 2.1vh, 17px);

				 --f-icon-size:clamp(80px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					/*grid-gap:1rem 2rem;*/
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height:450px;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61.5vh;
				}

				.inception-features.trio{
					width:89% !important;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 801px) and (max-height: 900px){
			:root{
					--padding:0.8rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(45px, 10vh, 65px);

					--page-title:clamp(45px, 2.8vh, 55px);

					--btn-text:clamp(14px, 3vh, 23px);

					/* hero font size */
					--hero-text:clamp(14.7px, 2.36vh, 21px);
					--garathorm-text:clamp(18px, 2.25vh, 21.5px);

					/* services font size  */
				 	--s-title:clamp(15px, 2.6vh, 16px);
				 	--s-subtitle:clamp(12px, 2.5vh, 13px);
				 	--s-desc:clamp(10px, 1.9vh, 12.5px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.3vh, 21px );
				 	--ab-text:clamp(17.8px, 2.1vh, 19px);

				 --f-icon-size:clamp(90px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto clamp(108px, 0.9vh, 121.5px);
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-features.trio{
					width:89% !important;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 901px) and (max-height: 1000px){
			:root{
					--padding:0.8rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:1rem;
					--hero-grid-gap:1rem 1.5rem;

					--logo-size:clamp(50px, 10vh, 70px);

					--page-title:clamp(45px, 10vh, 55px);

					--btn-text:clamp(20px, 3vh, 25px);

					/* hero font size */
					--hero-text:clamp(18.7px, 1.9vh, 19.5px);
					--garathorm-text:clamp(22px, 2.4vh, 24.5px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.2vh, 16px);
				 	--s-subtitle:clamp(10px, 2.15vh, 13px);
				 	--s-desc:clamp(10px, 2.4vh, 12px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 25px);
				 	--f-text:clamp(16px, 2.65vh, 17px);

				 	/* about font size */
				 	--ab-heading:clamp(20px, 2.4vh, 24px );
				 	--ab-text:clamp(16px, 1.95vh, 20px);

				 	/* footer text  */

 					--footer-txt:clamp(16px, 2.2vh, 19px);


				 --f-icon-size:clamp(90px, 13vh, 100px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 40px 40px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:60vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1001px) and (max-height: 1100px){
			:root{
					--padding:0.8rem 3rem;
					--footer-padding:0.5rem 3rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(80px, 10vh, 100px);

					--page-title:clamp(55px, 10vh, 60px);

					--btn-text:clamp(24px, 3vh, 28px);

					/* hero font size */
					--hero-text:clamp(16px, 2vh, 22px);
					--garathorm-text:clamp(23px, 2.55vh, 23px);

					/* services font size  */
				 	--s-title:clamp(14px, 2.2vh, 16px);
				 	--s-subtitle:clamp(12px, 2vh, 13px);
				 	--s-desc:clamp(11px, 2.4vh,12px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 20px);
				 	--f-link:clamp(18px, 2.45vh, 20px);

				 	--f-heading:clamp(20px, 2.7vh, 24px);
				 	--f-text:clamp(18px, 2.65vh, 20px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 2.5vh, 24px );
				 	--ab-text:clamp(19px, 1.95vh, 21.5px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.35vh, 20px);


				 --f-icon-size:clamp(90px, 12vh, 110px);
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 14vh;
					grid-template-columns: auto 45vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 550px !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 50px 50px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:61vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}
}

/* 1601 - 1700 */

@media only  screen and (min-width: 1601px) and (max-width: 1700px) {

}


/* 1701 - 1800 */

@media only  screen and (min-width: 1701px) and (max-width: 1800px) {
	@media only screen and (min-height: 600px) and (max-height: 700px){
			:root{
					--padding:1rem 4rem;
					--footer-padding:0.5rem 4rem;
					--navbtn-padding:0.8rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0.5rem;
					--hero-grid-gap:0.5rem 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 3vh, 22px);

					/* hero font size */
					--hero-text:clamp(13px, 2.55vh, 19px);
					--garathorm-text:clamp(13px, 2.5vh, 18px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.3vh, 18px);
				 	--s-subtitle:clamp(14px, 2vh, 16px);
				 	--s-desc:clamp(13px, 2vh, 15px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(16px, 2.5, 20px);

				 --f-icon-size:90px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 45vh;
				}
			.inception-whitebox.hero{
				padding:1.5rem !important;
		}
				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-floatingMenu-content{
					max-height:53vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

	@media only screen and (min-height: 701px) and (max-height: 800px){
			:root{
					--padding:1rem 4rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(40px, 2.5vh, 50px);

					--btn-text:clamp(14px, 3vh, 22px);

					/* hero font size */
					--hero-text:clamp(13px, 2.65vh, 20.5px);
					--garathorm-text:clamp(13px, 2.65vh, 20.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.6vh, 21px);
				 	--s-subtitle:clamp(14px, 2.5vh, 18.5px);
				 	--s-desc:clamp(13px, 1.9vh, 16px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.65vh, 20px );
				 	--ab-text:clamp(15px, 2.25vh, 19px);

				 --f-icon-size:100px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 801px) and (max-height: 900px){
			:root{
					--padding:1rem 4rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(45px, 2.8vh, 55px);

					--btn-text:clamp(14px, 3vh, 23px);

					/* hero font size */
					--hero-text:clamp(20.5px, 2.55vh, 22.8px);
					--garathorm-text:clamp(18px, 2.25vh, 21.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 21px);
				 	--s-subtitle:clamp(14px, 2.35vh, 19px);
				 	--s-desc:clamp(13px, 2.4vh, 16px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.65vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(22px, 2.5vh, 25px );
				 	--ab-text:clamp(16px, 2.3vh, 20px);

				 --f-icon-size:110px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto clamp(108px, 0.9vh, 121.5px);
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 50px 50px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 901px) and (max-height: 1000px){
			:root{
					--padding:0rem 4rem;

					--logo-size:clamp(40px, 10vh, 70px);

					--page-title:clamp(50px, 10vh, 60px);

					--btn-text:clamp(20px, 3.5vh, 35px);

					/* hero font size */
					--hero-text:clamp(21.5px, 2.3vh, 25px);
					--garathorm-text:clamp(23px, 2.5vh, 24px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 21px);
				 	--s-subtitle:clamp(14px, 2.35vh, 17.5px);
				 	--s-desc:clamp(13px, 2.4vh, 14px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 25px);
				 	--f-text:clamp(16px, 2.65vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(20px, 2.5vh, 25px );
				 	--ab-text:clamp(16px, 2.5vh, 20px);

				 	/* footer text  */

 					--footer-txt:clamp(16px, 2.2vh, 19px);


				 --f-icon-size:110px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-feature-item{
					padding:2rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 50px 50px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1001px) and (max-height: 1100px){
			:root{
					--padding:0rem 4rem;

					--logo-size:clamp(50px, 10vh, 80px);

					--page-title:clamp(55px, 10vh, 65px);

					--btn-text:clamp(24px, 3.5vh, 35px);

					/* hero font size */
					--hero-text:clamp(22.2px, 2.3vh, 26px);
					--garathorm-text:clamp(23px, 2.55vh, 26.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 23px);
				 	--s-subtitle:clamp(14px, 2.35vh, 20px);
				 	--s-desc:clamp(13px, 2.4vh,18px);
				 	--s-btn-text:clamp(13px, 2.4vh,18px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 20px);
				 	--f-link:clamp(18px, 2.45vh, 20px);

				 	--f-heading:clamp(20px, 2.7vh, 24px);
				 	--f-text:clamp(18px, 2.65vh, 20px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 2.5vh, 24px );
				 	--ab-text:clamp(18px, 2.5vh, 20px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.35vh, 20px);


				 --f-icon-size:120px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 14vh;
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 55vh !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 60px 60px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1101px) and (max-height: 1200px){
			:root{
					--padding:1rem 4rem;

					--logo-size:clamp(60px, 10vh, 90px);

					--page-title:clamp(55px, 10vh, 65px);

					--btn-text:clamp(24px, 3vh, 30px);

					/* hero font size */
					--hero-text:clamp(25.5px, 2.29vh, 26px);
					--garathorm-text:clamp(23px, 2.25vh, 26.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 23px);
				 	--s-subtitle:clamp(14px, 2.35vh, 20px);
				 	--s-desc:clamp(13px, 2.4vh,18px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 20px);
				 	--f-link:clamp(18px, 2.45vh, 20px);

				 	--f-heading:clamp(20px, 2.7vh, 24px);
				 	--f-text:clamp(18px, 2.65vh, 20px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 2.5vh, 30px );
				 	--ab-text:clamp(20px, 2.5vh, 24px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.45vh, 22px);


				 --f-icon-size:130px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 55vh !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 60px 60px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1201px) and (max-height: 1300px){
			:root{
					--padding:1rem 4rem;

					--logo-size:clamp(70px, 10vh, 100px);

					--page-title:clamp(65px, 10vh, 75px);

					--btn-text:clamp(24px, 3vh, 30px);

					/* hero font size */
					--hero-text:clamp(25.5px, 2.09vh, 28px);
					--garathorm-text:clamp(23px, 2.25vh, 28.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 23px);
				 	--s-subtitle:clamp(14px, 2.35vh, 20px);
				 	--s-desc:clamp(13px, 2.4vh,18px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(20px, 2.45vh, 25px);
				 	--f-link:clamp(20px, 2.45vh, 25px);

				 	--f-heading:clamp(25px, 2.7vh, 34px);
				 	--f-text:clamp(20px, 2.65vh, 25px);

				 	/* about font size */
				 	--ab-heading:clamp(25px, 2.5vh, 35px );
				 	--ab-text:clamp(25px, 2.5vh, 27px);

				 	/* footer text  */

 					--footer-txt:clamp(19px, 2.45vh, 23px);


				 --f-icon-size:130px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 60vh !important;
				}

				.inception-feature-item{
					padding:2.5rem 1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 70px 70px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:63vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}
}

/* 1801 - 1900 */

@media only  screen and (min-width: 1801px) and (max-width: 1900px) {

}

	/*1901 - 2000*/
@media only  screen and (min-width: 1901px) and (max-width: 2000px) {

	@media only screen and (min-height: 600px) and (max-height: 700px){
			:root{
					
					--padding:1rem 4rem;
					--footer-padding:1rem 5rem;
					--navbtn-padding:1rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:1rem;
					--hero-grid-gap:1 1.5rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(30px, 2.5vh, 40px);

					--btn-text:clamp(14px, 3vh, 22px);

					/* hero font size */
					--hero-text:clamp(13px, 2.5vh, 18px);
					--garathorm-text:clamp(13px, 2.5vh, 18px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.3vh, 18px);
				 	--s-subtitle:clamp(14px, 2.1, 16px);
				 	--s-desc:clamp(13px, 2vh, 15px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(14px, 2vh, 16px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(14px, 2.3vh, 16px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.5vh, 20px );
				 	--ab-text:clamp(16px, 2.5, 20px);

				 --f-icon-size:90px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
/* 					grid-template-rows: auto 15vh; */
					grid-template-columns: auto 40vh;
				}
		
		
		

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-floatingMenu-content{
					max-height:53vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

	@media only screen and (min-height: 701px) and (max-height: 800px){
			:root{
					--padding:1rem 4rem;

					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(40px, 2.5vh, 50px);

					--btn-text:clamp(14px, 3vh, 22px);

					/* hero font size */
					--hero-text:clamp(13px, 2.65vh, 20.5px);
					--garathorm-text:clamp(13px, 2.65vh, 20.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.6vh, 21px);
				 	--s-subtitle:clamp(14px, 2.5vh, 18.5px);
				 	--s-desc:clamp(13px, 1.9vh, 16px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.35vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.35vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(16px, 2.65vh, 20px );
				 	--ab-text:clamp(15px, 2.25vh, 19px);

				 --f-icon-size:100px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}
		
			.inception-features{
					max-height: 100% !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 45px 45px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 801px) and (max-height: 900px){
			:root{
					--padding:1rem 4rem;
					--footer-padding:1rem 5rem;
					--navbtn-padding:1rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:1rem;
					--hero-grid-gap:1 1.5rem;


					--logo-size:clamp(30px, 10vh, 60px);

					--page-title:clamp(45px, 2.8vh, 55px);

					--btn-text:clamp(14px, 3vh, 23px);

					/* hero font size */
					--hero-text:clamp(20.5px, 2.55vh, 22.8px);
					--garathorm-text:clamp(18px, 2.25vh, 21.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 21px);
				 	--s-subtitle:clamp(14px, 2.35vh, 19px);
				 	--s-desc:clamp(13px, 2.4vh, 16px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 18px);
				 	--f-link:clamp(1.1rem, 12px, 1.6vh);

				 	--f-heading:clamp(19px, 2.7vh, 22px);
				 	--f-text:clamp(16px, 2.65vh, 18px);

				 	/* about font size */
				 	--ab-heading:clamp(22px, 2.5vh, 25px );
				 	--ab-text:clamp(16px, 2.3vh, 20px);

				 --f-icon-size:110px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto clamp(108px, 0.9vh, 121.5px);
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}
			
				.inception-features{
					max-height: 100% !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 80px 50px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 901px) and (max-height: 1000px){
			:root{
					--padding:0rem 4rem;
					--footer-padding:0.7rem 4rem;
					--navbtn-padding:1rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0rem;
					--hero-grid-gap:0rem 1rem;

					--logo-size:clamp(70px, 10vh, 90px);

					--page-title:55px;

					--btn-text:40px;

					/* hero font size */
					--hero-text:32px;
					--garathorm-title:24px;
					--garathorm-text:21px;
					--tagline-text:31px;

					/* services font size  */
				 	--s-title:31px;
				 	--s-subtitle:24px;
				 	--s-desc:24px;
/* 					--s-desc:21px; */
				 	--s-btn-text:24px;

				 	/* floating page font-size  */
				 	--f-tab-title:24px;
				 	--f-link:21px;

				 	--f-heading:40px;
				 	--f-text:31px;

				 	/* about font size */
				 	--ab-heading:31px;
				 	--ab-text:24px;

				 	/* footer text  */

 					--footer-txt:20px;


				 --f-icon-size:130px;
			}

			.inception-header{
				padding:0.5rem 4rem;
			}
			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
/* 					grid-template-rows: auto auto; */
					grid-template-columns: auto 53vh;
					grid-gap:0rem 1rem;
				}

				.inception-whitebox {
					padding:0.5rem 1rem;
					height:auto;
				}

				.inception-features{
					max-height: 100% !important;
				}

				.inception-feature-item{
					padding:1.5rem 0.25rem;
					grid-gap: 1rem;
					max-width:430px !important;
				}

				.inception-feature-child-item{
					grid-template-rows: auto 10vh 1fr;
					grid-gap:1rem;
				}

				.inception-floatingMenu-content{
					max-height:70vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1001px) and (max-height: 1100px){
			:root{
					--padding:0rem 4rem;
					--footer-padding:0.7rem 4rem;
					--navbtn-padding:1rem 1.5rem;
					--herobtn-padding:1rem 1.5rem;

					--grid-gap:0rem;
					--hero-grid-gap:0rem 1rem;

					--logo-size:clamp(70px, 10vh, 90px);

					--page-title:clamp(55px, 10vh, 60px);

					--btn-text:clamp(40px, 3.5vh, 45px);

					/* hero font size */
					--hero-text:clamp(22.2px, 3.5vh, 36px);
					--garathorm-text:clamp(20px, 2.35vh, 22px);
					--tagline-text:clamp(22px, 2.55vh, 28px);

					/* services font size  */
				 	--s-title:clamp(24px, 3.5vh, 36px);
				 	--s-subtitle:clamp(20px, 3.3vh, 28px);
				 	--s-desc:clamp(13px, 2.45vh, 22px);
				 	--s-btn-text:clamp(13px, 2.7vh,28px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.55vh, 28px);
				 	--f-link:clamp(18px, 2.45vh, 22px);

				 	--f-heading:clamp(20px, 3.8vh, 45px);
				 	--f-text:clamp(18px, 3.5vh, 36px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 3.35vh, 36px );
				 	--ab-text:clamp(18px, 2.7vh, 28px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.35vh, 20px);


				 --f-icon-size:140px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 15vh;
					grid-template-columns: auto 50vh;
					grid-gap:0rem 1rem;
				}

				.inception-whitebox {
					padding:0.5rem 1rem;
					height:auto;
				}

				.inception-features{
					max-height: 100% !important;
				}

				.inception-feature-item{
					padding:1.5rem 0.25rem;
					grid-gap: 2rem;
				}

				.inception-feature-child-item{
					grid-template-rows: auto 8vh 1fr;
					grid-gap:2rem;
				}

				.inception-floatingMenu-content{
					max-height:70vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1101px) and (max-height: 1200px){
			:root{
					--padding:1rem 4rem;

					--logo-size:clamp(60px, 10vh, 90px);

					--page-title:clamp(55px, 10vh, 65px);

					--btn-text:clamp(24px, 3vh, 30px);

					/* hero font size */
					--hero-text:clamp(25.5px, 2.45vh, 28px);
					--garathorm-text:clamp(23px, 2.25vh, 26.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 23px);
				 	--s-subtitle:clamp(14px, 2.35vh, 20px);
				 	--s-desc:clamp(13px, 2.4vh,19px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(16px, 2.45vh, 20px);
				 	--f-link:clamp(18px, 2.45vh, 20px);

				 	--f-heading:clamp(20px, 2.7vh, 24px);
				 	--f-text:clamp(18px, 2.65vh, 20px);

				 	/* about font size */
				 	--ab-heading:clamp(18px, 2.5vh, 30px );
				 	--ab-text:clamp(20px, 2.5vh, 24px);

				 	/* footer text  */

 					--footer-txt:clamp(17px, 2.45vh, 22px);


				 --f-icon-size:130px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 55vh !important;
				}

				.inception-feature-item{
					padding:1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 60px 60px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:57vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

		@media only screen and (min-height: 1201px) and (max-height: 1300px){
			:root{
					--padding:1rem 4rem;

					--logo-size:clamp(70px, 10vh, 100px);

					--page-title:clamp(65px, 10vh, 75px);

					--btn-text:clamp(24px, 3vh, 30px);

					/* hero font size */
					--hero-text:clamp(25.5px, 2.09vh, 28px);
					--garathorm-text:clamp(23px, 2.25vh, 28.5px);

					/* services font size  */
				 	--s-title:clamp(16px, 2.4vh, 23px);
				 	--s-subtitle:clamp(14px, 2.35vh, 20px);
				 	--s-desc:clamp(13px, 2.4vh,18px);

				 	/* floating page font-size  */
				 	--f-tab-title:clamp(20px, 2.45vh, 25px);
				 	--f-link:clamp(20px, 2.45vh, 25px);

				 	--f-heading:clamp(25px, 2.7vh, 34px);
				 	--f-text:clamp(20px, 2.65vh, 25px);

				 	/* about font size */
				 	--ab-heading:clamp(25px, 2.5vh, 35px );
				 	--ab-text:clamp(25px, 2.5vh, 27px);

				 	/* footer text  */

 					--footer-txt:clamp(19px, 2.45vh, 23px);


				 --f-icon-size:130px;
			}

			.inception-contentWrapper.hero{
					width:100%;
					display: grid;
					grid-template-rows: auto 13vh;
					grid-template-columns: auto 55vh;
					grid-gap:1rem 2rem;
				}

				.inception-whitebox {
					padding:1.5rem;
				}

				.inception-features{
					max-height: 60vh !important;
				}

				.inception-feature-item{
					padding:2.5rem 1.5rem;
					grid-gap: 1rem;
				}

				.inception-feature-child-item{
					grid-template-rows: 70px 70px 1fr;
				}

				.inception-floatingMenu-content{
					max-height:63vh;
				}

				.inception-table-content-navwrapper{
					gap:5px;
				}

				.inception-floatingMenu-navwrapper{
					padding:1.5rem;
				}

		}

	}
	

}