/*
		SPACING SYSTEM (px)
		2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

		FONT SIZE SYSTEM (px - rem use dp)
		10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

		MAIN COLOR: #1c6fff
		SECONDARY/ACCENT COLOR: #fc9e5b
		
		Background: #FFF8E6
		Text: #14110B
		Muted text: #7A664A 

*/

:root{
	
	/* --- main colors */
	

  --color-primary-lightest-1: #ecf4ff76;
  --color-primary-lightest: #d2e2ff;
  --color-primary-light: #8eb7ff;
  --color-primary: #1c6fff;
  --color-primary-btn: #1964e6;
  --color-primary-dark: #0e3880;
  --color-primary-darkest: #08214d;

		
	/* --- Accent --- */
	
  --color-secondary: #fc9e5b;
  --color-secondary-lt: #feae75;
  --color-secondary-ltest: #f9cbab;
  --color-secondary-dker: #e38e52;
  --color-secondary-dk: #ca7e49;
	
	--color-surface-layer: #FFFBF2; /* for cards / div boxes on top of bg*/
  --color-border: #E9DEC8;
	
		
	/* -- Background Colors */
	
	
  --color-lt-bg: #e8f1ff;
  --color-bg: #1c6fff;
	--color-dk-bg:#061633;	
	
	
	/* --- font colors */
	
	
  /* --color-text: #141004; */
	
  
  --color-text: #071c40;
  --color-text-lt: #f5f8ff;
  --color-text-lt-blue: #dae5ff;
	--color-text-secondary: #191009;
  --color-text-muted-primary: #dee8ff;
  --color-text-white: #fff;
  --color-text-muted: #838ea0;
  --color-text-muted-lt: #727680aa;
  --color-text-muted-ltest: #d5d6daaa;
  --color-text-muted-dk: #4e535dce;
  --color-text-muted-dkest: #353c48;
	
	
	/* --- font sizes */
	
	
  --text-h1: 5.6rem;
  --text-h2: 4.0rem;
  --text-h3: 2.8rem;
  --text-h4: 2.2rem;
  --text-xxxlg: 3.6rem;
  --text-xxlg: 2.6rem;
  --text-xlg: 2rem;
  --text-lg: 1.8rem;
  --text-body: 1.6rem;
  --text-small: 1.4rem;
  --text-xsmall: 1.0rem;
	
		
	/*---- Spacing  */
	
	
  --line-heading: 1.15;
	--line-body: 1.6;
	
	--space-0_5: .5rem;
	--space-1: .8rem;
  --space-2: 1.6rem;
  --space-3: 2.4rem;
  --space-3_5: 2.8rem;
  --space-4: 3.2rem;
  --space-5: 4.8rem;
  --space-6: 6.4rem;
	
	
	/*---- Layout  */
	
	--container-sm: 108rem;
	--container:120rem;
	--container-md: 132rem; /* main */
	--container-lg: 144rem;
	--container-xl: 160rem;

  --pad-page: 2.4rem;
  --radius: 1.2rem;
	
	
	/*---- Margins  */
	
  --mrg-xsm: .75rem;
  --mrg-sm: 1.2rem;
  --mrg-nrm: 1.8rem;
  --mrg-med: 2.4rem;
  --mrg-medLg: 3.2rem;
  --mrg-lg: 4.0rem;
  --mrg-lger: 5rem;
  --mrg-xlg: 6.4rem;
  --mrg-xxlg: 8.2rem;
  --mrg-xxxlg: 10rem;

	
	
	/* -- box shadow */
	
  --shadow-sm: 0 1px 2px rgba(20, 17, 11, 0.10);
  --shadow-md: 0 4px 12px rgba(20, 17, 11, 0.12);
  --shadow-lg: 0 10px 30px rgba(20, 17, 11, 0.14);
	
}



/* ---------- Google fonts ------------- */


/*// SEE README FILE FOR FONT IMPLEMENTATION - AND ChatGPT-PUG TEMPLATES */


/* /// rubik */

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-Light.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 300;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-LightItalic.woff2') format('woff2');
}

@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-Regular.woff2') format('woff2');
}


@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-Medium.woff2') format('woff2');
}


@font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-SemiBold.woff2') format('woff2');
}

/* @font-face {
	font-family: 'Rubik';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-ExtraBold.woff2') format('woff2'); */
	
	/* @font-face {
		font-family: 'Rubik';
		font-style: italic;
		font-weight: 400;
		font-display: swap;
		src: url('/img/fonts/rubik/Rubik-Italic.woff2') format('woff2');
	} */
	
	/* @font-face {
		font-family: 'Rubik';
		font-style: italic;
		font-weight: 500;
		font-display: swap;
		src: url('/img/fonts/rubik/Rubik-MediumItalic.woff2') format('woff2');
	} */

/* @font-face {
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 600;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-SemiBoldItalic.woff2') format('woff2');
} */


/* @font-face {
	font-family: 'Rubik';
	font-style: italic;
	font-weight: 800;
	font-display: swap;
	src: url('/img/fonts/rubik/Rubik-ExtraBoldItalic.woff2') format('woff2');
} */



/* // Poppins */


 

@font-face {
  font-family: 'Poppins';
  src: url('/img/fonts/poppins/Poppins-Regular.woff2') format('woff2'),
       url('/img/fonts/poppins/Poppins-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/img/fonts/poppins/Poppins-Medium.woff2') format('woff2'),
       url('/img/fonts/poppins/Poppins-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/img/fonts/poppins/Poppins-SemiBold.woff2') format('woff2'),
       url('/img/fonts/poppins/Poppins-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/img/fonts/poppins/Poppins-Bold.woff2') format('woff2'),
       url('/img/fonts/poppins/Poppins-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


/* ------------------- Generic CSS -------------------- */


/* //		Generic styles 	// */


*,
*::before,
*::after {
	
  margin: 0;
  padding: 0;
  box-sizing: inherit;
	
}


html {
	
  font-size: 62.5%;
  box-sizing: border-box;

}


body{
	
	line-height: 1;		
	font-family: 'Rubik', sans-serif;
	
	/* //		Stretched Footer to bottom  */
	
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
	
	color: var(--color-text);
	
}

/* //	Ensure main added on every page  */

main{
	
	display: flex;
	flex-direction: column;
	flex:1;
	width: 100%;
	
}

/* //	Add this class to div wrapper around block content   */

.tailwind_stretch{
	
	display: flex;
	flex-direction: column;
	flex:1;
	min-height: 0;
}


h1, h2, h3, h4{
	
	line-height: 1;		
  font-family: "Poppins", serif;
}


.sm-container,
.container,
.med-container,
.wide-container {
	
  margin: 0 auto;	
}

.sm-container { max-width: var(--container-sm); }

.container    { max-width: var(--container); }

.med-container{ max-width: var(--container-md); }

.lrg-container{ max-width: var(--container-lg); }

.wide-container{ max-width: var(--container-xl); }




/*--- Viewport helpers --- */


.full-vh{
	
	min-height: 100vh;
}



.eighty-vh{
	
	min-height: 80vh;
}


.seventy-five-vh{
	
	min-height: 75vh;
}


.seventy-vh{
	
	min-height: 70vh;
}

.sixty-five-vh{
	
	min-height: 65vh;
}


.sixty-vh{
	
	min-height: 60vh;
}

.fifty-vh{
	
	min-height: 50vh;
}


.forty-vh{
	
	min-height: 40vh;
}

.section-divider {
	
  height: 1px;
  border: 0;
	margin: 4rem 0 4rem;
	


  background: linear-gradient(
    to right,
    transparent
    ,#8eb7ff,
    transparent
  );

}






/* ----- Headings ---- */



	h2.section-heading{		
		
		font-size: var(--text-xxlg);		
		font-weight: 500;
		
		padding: 4rem 2rem 6rem;
	}
	
	
.section-subheading{
  margin-top: -2.4rem;         /* pulls it closer to the h2 (since h2 has big padding) */
  margin-bottom: 3.2rem;
  max-width: 64rem;
  font-size: var(--text-lg);
  line-height: 1.4;
  color: var( --color-text-muted-dk);
}


/* //		Links with Lucide Icons 			// */




.header__user--link:link,
.header__user--link:visited {
	width: 2.5rem;
	height: 2.5rem;
	stroke-width: 2;
	
	color: var(--color-dk-bg);
	
	
}

.user__cart--link, .user__wishlist--link {
	
	
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	
}



span.user__cart--span, span.user__wishlist--span{
	
	background-color: rgba(255, 0, 0, 1);
	color:var(--color-text-white);
	height: 1.6rem;
	width: 1.6rem;;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	
	font-size: var(--text-small);
	font-weight: 600;
	
	outline: 2px solid var(--color-dk-bg);	
}

span.user__cart--span{
	
	position: absolute;
	bottom: -35%;
	right: -35%;		
}


 span.user__wishlist--span{	
		
	position: absolute;
	bottom: -35%;
	right: -35%;
 }



/*------------ Site Styling -----------------*/


/* //			Set font family each time			// */




/* //----			Header	/	Footer Pages 				----// */


.header{

border-bottom: 1px solid var(--color-lt-bg);
}

.header--box{
	
	padding:0.6rem 1.6rem;
}

.header--box , .footer--box{
	
	
	margin: 0 auto;
	
	display: flex;
	align-items: center;
	
}

.header--box{
	
	max-width: 136rem;	
	
}

.footer--box{
	
	max-width: 132rem;	
	
	
}

.header__logo--box, 	.header__cta--box{
	
	flex:0 0 20%;

}

	.header__cta--box{
		display: flex;
		justify-content: flex-end;
	}

.header__logo{
	display: flex;
width: 75%;

}

.header__heading{
	
	font-size: var(--text-h4);
}



/*/ Navigation /*/


.header__nav--box{
	
flex:1;
}


ul.header__nav--list{
	
	font-family: "Rubik", serif;
	list-style: none;
	font-size: var(--text-body);
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5.8rem;	
}


li a.header__nav--link:link	,
li a.header__nav--link:visited{	
	
	display: inline-block;
	
	text-decoration: none;
	color: var(--color-text);
	transition: all .2s;
	border-bottom: 1px solid transparent;
	
}



li a.header__nav--link:hover	,
li a.header__nav--link:active	{	
	
	transform: scale(1.04) translateY(-6%);
	
	border-bottom: 1px solid var(--color-secondary);
	
}


.header__cta-link:link,
.header__cta-link:visited{
	
	display: inline-block;
	
	padding: .65rem 1.2rem;
	
	background-color: var(--color-primary-btn);
	color: var(--color-text-lt);
	
	font-size: var(--text-body);
	text-decoration: none;
	
	border-radius: 4px;
	
	box-shadow: 4px 6px 24px rgba(42, 57, 93, 0.2);
	
	transition: all .2s;
	
}



.header__cta-link:hover,
.header__cta-link:active{
	
	background-color: var(--color-secondary);	
	color: var(--color-text);
	
	transform: scale(1.05) translateY(-3%);	
	box-shadow: 4px 6px 24px rgba(42, 57, 93, 0.3);
}


.header__hamburger--box {
	display: none;
}

/* //						Footer Page 					// */


.footer{
	
	background-color: var(--color-primary-darkest);	
	padding: 2.8rem 0 6rem;
	border-top: 2px solid rgba(171, 199, 250, 0.804);
	
	margin-top: 8rem;
}


.footer--box{
	
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	justify-items: center;

	color: var(--color-text-lt);	
}


.footer--box ul{
	
	list-style: none;	
	
	display: flex;
	flex-direction: column;
	gap: 1rem;
	
	font-size: 1.5rem;
	
	color: var(--color-text-lt-blue);
	
}

.footer--box p{
	
	font-size: 1.3rem;
	
}

	.footer--copyright p{
		
		font-weight: 400;
		
		color: var(--color-text-muted-primary);
		
	}


.footer--box a:link,
.footer--box a:visited{
	
	text-decoration: none;

	color: inherit;		
}	

	.footer--logo-box--text{
		
		display: flex;
		flex-direction: column;
		gap: 1.2rem;
	}


.footer--services-box p,
.footer--links-box p,
.footer--contact-box p	{
	
	font-size: var(--text-xlg);
	font-weight: 600;
	
	margin-bottom: 1.6rem;
}	


.footer--logo-box{
	
	display: flex;
	flex-direction: column;
		color: var(--color-text-lt-blue);
	justify-content: center;
	gap: 1.8rem;	
}

	.footer-text-p{
		
		display: flex;
		flex-direction: column;
		gap: .5rem;
	}


.footer--logo-box img{
	
	/* margin-bottom: 1rem; */
}

/* //------------						Home Page 					----------------// */

	.flex-heading p , .flex-heading span{
		
		font-family: 'Poppins' , serif;
		
		font-size: 5rem;
		font-weight: 500;
	}
	
		.flex-heading p {
			
			color: var(--color-secondary-dk);
		}

.homePage__hero , .servicesPage-block, .contact, .success-page{	
	width: 100vw;
  margin-left: calc(-50vw + 50%);
	background-image: radial-gradient(circle, #eaf1ffc9, 1px, transparent 1px);
	background-size: 10px 10px;
	
}


 .homePage-grid{
	
	display: grid;	
	grid-template-columns: 1fr 1fr;
  gap: 3.6rem;         
  padding: 6.8rem 2rem 2rem;	
	
 }


	h1.homePage--heading p{
		
		color: var(--color-secondary-dk);
		display: block;
	}


	.homePage__hero--text-box{
		
		max-width: 58rem;
		padding: 4.8rem 0 2rem;
		
		display: flex;
		flex-direction: column;
		gap: 4rem;	
		/* align-self: center; */
		/* justify-content: center; */
		
		
		color: var(--color-text);
		
	
	}
	
	.homePage__heading-box {
		
		width: 100vw;
		margin-left: calc(50% - 50vw);
	
}

		.flex-heading{
			
			display: flex;
			gap: 1rem;
		}


.homePage__hero--text-box em{
	
	font-size: var(--text-body);
}



.homePage--heading {
	
	/* font-size: var(--text-h1);		 */
	font-size: 5rem;		
	font-weight: 500;
	color:var(--color-text);
	line-height: .97;
	

	
}


.homePage--sub-heading{
	
	font-size: var(--text-xlg);
	color:#60646d;

	line-height: 1.15;
	padding-right: 2rem;
}

.homePage__hero-text{
	
	display: flex;
	flex-direction: column;
	gap:.5rem;
}

.homePage--p {
	
	font-size: var(--text-lg);
	letter-spacing: .07rem;
	
	
}

.homepPage-tagline{
	
	display: flex;
	align-items: center;
	
	font-size: var(--text-body);
	
	color: var( --color-text-muted-dk);
	
	font-weight: 500;
	
	margin-top: -4px;
	
}




.homePage__cta:link,
.homePage__cta:visited{
	
	display: inline-block;
	text-decoration: none;
	background-color: var(--color-primary-btn);	
	color: var(--color-text-lt);		
	
	padding: 1.4rem 2.4rem;
	
	font-size: var(--text-body);
	
	border-radius: 6px;
	

	box-shadow: 4px 6px 24px rgba(42, 57, 93, 0.2);
	
	transition: all .2s;
	
	
}


.homePage__cta:hover,
.homePage__cta:active{
	
	background-color: var(--color-secondary);	
	color: var(--color-text);
	
	transform: scale(1.06) translateY(-3%);	
	box-shadow: 4px 6px 24px rgba(42, 57, 93, 0.35);
	
}


.homePage__hero--image-box{
	
	overflow: hidden;
	
	display: grid;
	align-items: end;
	justify-content: end;

}

.homePage__hero--img {
	
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	
	background: radial-gradient(circle at center 65%, #d2e2ff 0%, rgba(210, 226, 255, 0.65) 35%, rgba(210, 226, 255, 0.25) 60%, rgba(210, 226, 255, 0) 100%);
	
	
}
	
	.homePage__hero--img img {
		
		max-width: 92.5%;
		height: auto;
		
		border-top-left-radius: 10px;
		border-top-right-radius: 18px;
	  border-bottom-left-radius: 220px 140px;
	  border-bottom-right-radius: 18px;
		
		
}


.stats-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
	gap: .6rem;
  max-width: 120rem;
  margin: 0 auto;
  padding: .5rem .8rem ;
	/* border-radius: 10px; */
	background-color: var(--color-primary-lightest);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
 
}

.stat-icon {
  font-size: 2rem;
}

.stat-value {
  font-size: 1.2rem;
  font-weight: 600;
  /* color: #ffffff; */
  color: #333;
  line-height: 1.2;
}

.stat-label {
  font-size: 12px;
  /* color: rgba(255,255,255,0.75); */
  color: #333;
  margin-top: 2px;
}

.stat-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}


.homePage__cta-box p{
	
	margin-top: 2.2rem;
	font-weight: 500;
	color: var( --color-text-muted);
	font-size: 1.4rem;
}


/* //----------------	Home page Services	-----------------// */

.homePage__services{
	
	
	margin-bottom: 9rem;
		color: var(--color-text);
}



.homePage__services--grid{
	

	display: grid;
	align-items: center;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, minmax(27rem, 37rem));
	gap: 4rem;

	background: #fff;
	
}


.homePage__services--grid-box{
	
	
	display: grid;
  grid-template-rows: auto auto 1fr;
  row-gap: 1rem;
  padding: 2.4rem 2rem 2rem;
  border: 1px solid var( --color-primary-lightest);
  border-radius: 1.2rem;
	justify-items: center;
	
	 box-shadow: var(--shadow-md);
	 
	 height:26rem;
	 
	 transition: all .2s;
	 
	 cursor: pointer;
	
}


.homePage__services--grid-box:hover{
	
	transform: scale(1.02) translateY(-1%);
	
		box-shadow: 2px 4px 32px rgba(42, 57, 93, 0.25);	
	
}

	.services--heading-box h3{
		

	
		font-family: "Rubik", serif;
		
	font-size: var(--text-xlg);
	font-weight: 500;
	margin-bottom: 1rem;
	

		
	}

.services--icon-box{
	
	width: 7rem;
	height: 7rem;
	margin: 0 auto 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #8eb7ff 0%, #d2e2ff 100%);
	border-radius: 50%;
	
}



.services-icon{
	
	width: 4rem;
  height: 4rem;
  display: block;
	

}


.services--text-box{
	text-align: center;
	line-height: 1.5;
	font-size: var(--text-small);
	color:var( --color-text);
	font-weight: 300;
}



/* // how it works */



.homePage__process{
  background: var(--color-primary-lightest-1);
  border: 1px solid var(--color-border);
  border-radius: 1.6rem;
  padding: 2rem 4.8rem 1rem;
  box-shadow: var(--shadow-sm);

  max-width: 140rem; /* same as your steps */
	
	margin-bottom: 10rem;
}

.process__heading-box h2{
	padding: 2rem 0;
	
	    font-size: var(--text-xxlg);
	
	margin-bottom: 1.2rem;
}


.process__heading-box p{
	
	font-size: var(--text-xlg);	
	
	margin-bottom: 4.4rem;	
	
		
	color: var(--color-text-muted-dkest);
}


.process__steps{
	
	margin: 0 auto;
	
	position: relative;
	
	 min-height: 32rem; 
	 
	 padding: 0 1.8rem;
	
}

	.process__step--card{
	
	display: grid;
	grid-template-columns: 2fr 5fr;
	gap: 8rem;
	
 	margin-bottom: 4rem;

}


	.process__step-card--left{
		display: flex;
		align-items: center;
		
	
	}
	
.process__step--number{
	
  flex: 0 0 auto;      /* stop percentage sizing */
  width: 6.4rem;
  height: 6.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
	
		color: #fff;
		
			font-size: var(--text-xlg);
		font-weight: 600;
}

.process__step--number p{
	
  width: 5.2rem;
  height: 5.2rem;
  padding: 0;          /* no padding circle */
  border-radius: 50%;
  background-color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
	
}
	
	
	.process__step--icon{
		
		font-size: 3.2rem;
	}	
	

	
	.process__step--btn--box{
		
		flex:1;
		
		display: flex;
		flex-direction: column;
	  align-items: center;
		justify-content: center;
		
		position: relative;	
		
	}

	


.process__step-text{
	
	max-width: 75rem;
	
	display: flex;
	flex-direction: column;
	gap:1.2rem;

}


.process__step-text h3{	
	
	font-size: var(--text-h3);
	padding-bottom: .6rem;
	align-self: center;
	margin-bottom: 3rem;
	border-bottom: 2px solid var(--color-secondary);
}


.process__step--desc{
	
	font-size: var(--text-xlg);
	color: var(--color-text-muted-dk);
	line-height: 1.35;
	padding: 0 3rem;
}


 .process__step--btn{
  border: none;
  background-color: transparent;
  padding: 1.2rem 1rem .5rem 3.6rem; /* adds space for arrow */
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: var(--text-lg);
  position: relative;               /* IMPORTANT */
}


.process__step--btn.btn-active{
  color: var(--color-text);
  font-weight: 700;
}

.process__step--card:has(.btn-active) .process__step--number p{
  background-color: var(--color-primary);
  box-shadow: 0 10px 24px rgba(28,111,255,0.25);
}



/* // Banner	 */



.homePage__banner {
	
	/* -----	FULL WIDTH OVERRIDE	----- */
	width: 100vw;
  margin-left: calc(-50vw + 50%);

	height: 34rem;
	padding: 2.4rem 0 12rem;

	background-image:  linear-gradient(90deg,
      rgba(255,255,255,0.2) 0%,
      rgba(255,255,255,0.1) 55%,
      rgba(255,255,255,0.3) 100%
    ), url('/img/imgs/bargara.webp');
	background-size: cover;
	background-position: center;
	
	margin-bottom: 2rem;
	
	
}


.homepage__banner--wide-box{
	
	margin: 0 auto;
	
	max-width: 120rem;
	
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	
	padding: 2.4rem 0;
}


.homepage__banner--wide-box h2, .homePage__banner-sub-heading ,.homePage__banner-p, .homePage__banner-p-1 {
	
	text-align: center;
	color: #fff;	
}


.homepage__banner--wide-box h2{
	
	font-size: var(--text-h2);	
	margin-bottom: 1rem;
	text-shadow: 0px 2px 10px rgba(0,0,0,0.15);
}


.homePage__banner-sub-heading {	
	
	font-size: var(--text-h4);
}


.homePage__banner-p {

	font-size: var(--text-body);
	margin-bottom: 1rem;


}
.homePage__banner-p-1 {

	font-size: var(--text-body);
	font-weight: 600;
	margin-bottom: 1rem;
	letter-spacing: .5px;
	color:var( --color-text-lt)

}


.banner-cta-box{
	
	display: flex;
	justify-content: center;
}



.banner-cta:link,
.banner-cta:visited{
	display: inline-block;
	text-decoration: none;
	background-color: var(--color-secondary-lt);

	font-size: var(--text-body);
	padding: 1rem 1.6rem;
	
	color: var(--color-text-secondary);
	
	transition: all .2s;
	outline: 1px solid var(--color-secondary-dker)
	
}

.banner-cta:hover,
.banner-cta:active{
	
	
	transform: scale(1.08) translateY(-8%);
	
}


/* // Bubbling  Classes	 */


.content-hidden{
	
	display:none;

}

.content-active{
	
	display:flex;	
	position: absolute;
	top: 2rem;
	left: 44rem;  /* anchors it horizontally */
  
	
}

.btn-active{
	
	/* border-bottom: 2px solid var(--color-secondary); */
	/* font-weight: 600; */
}


.btn-inactive{
	
	color: var(--color-text-muted-lt);

}



.btn-inactive::before,
.btn-active::before{
  content: '';
  position: absolute;
  left: 0;            /* no more 16.5% */
  bottom: .6rem;      /* no more 5% */
  width: 2.4rem;
  height: 2.4rem;
  background-size: contain;
  background-repeat: no-repeat;
}

.btn-inactive::before{
  background-image: url('/img/icons/arrow.svg');
}

.btn-active::before{
  background-image: url('/img/icons/arrow-down.svg');
}



/* //----						Services Page 					----// */

.servicesPage-block{
	
	
	/* background-color: var(--color-primary-lightest-1); */
	padding-bottom: 3.2rem;
}


.servicesPage-heading-box{
	
	padding: 6.4rem 0;
	
	text-align: center;
	
	font-size: var(--text-h4);
	
	display: flex;
	flex-direction: column;
	gap: 2.6rem;
	
	
	color: var(--color-text);
	

	
}


.servicesPage-heading-box p{
	
	font-size: var(--text-lg);
}


.servicesPage-heading-box p:last-child{
	
	font-size: var(--text-body);
	color: var(--color-text-muted-dk);
	
}
	
.servicesPage-underline{
	width: 12.5%;
	height: .4rem;
	border: 0;
	background: var(--color-secondary);
	border-radius: 999px;
	margin: .65rem auto 0;
	
}

.servicesPage--link{
	
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 4.8rem;
	
	flex-direction: column;
	gap: 3.6rem;
}

.servicesPage--link-pricing{
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.6rem;

}

.servicesPage--seo{
	
	font-size: 1.5rem;
	color: var(--color-text-muted-dk);
	font-weight: 400;
	
}


.servicesPage--link-p{
	
	font-size: 1.6rem;
	font-weight: 500;
	
	text-align: center;
	padding: 0 1rem;
	
}



.servicesPage--link-muted {
	
	font-size: 1.6rem;
color: var(--color-text-muted-dk);
}

.servicePages--img{
	
	width: 28rem;
}
		
		
.servicePages--img-tablet{
	
	width: 14rem;
}
		
	

.servicesPage--link a:link,
.servicesPage--link a:visited{

	

	
	padding: 1rem 1.6rem;	
	
	border-radius: 4px;
}




.servicePage--grid{
	
	max-width: 120rem;
	
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem , 33.5rem));	
	justify-content: center;
	gap: 6rem;
}

.serviceCardLink{
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 16px; /* match your card */
}

.serviceCardLink:focus-visible{
	outline: 3px solid rgba(37,99,235,.35);
	outline-offset: 4px;
}

.serviceCardLink:hover .servicePage--box{
	transform: translateY(-4px);
		box-shadow: 4px 6px 48px rgba(42, 57, 93, 0.25);
}




.servicePage--box{
	
	display: flex;
	flex-direction: column;
	gap: 4.2rem;
	
	padding: 3.2rem 2.4rem;
	
	background-color: #fff;
	
	border-radius: 12px;
	
	box-shadow: 2px 4px 12px rgba(42, 57, 93, 0.16);
	
	transition: transform .2s ease, box-shadow .2s ease;



}

.servicePage--box-heading--icon, .servicePage--box-heading--text{
	
	display: flex;
	align-items: center;
	justify-content: center;
}


.servicesPage-icon{

	
	padding: 2.2rem;
	
	background-color:var(--color-primary-lightest);;
	
	border-radius: 50%;
	
	box-shadow: 3px 6px 12px rgba(15, 23, 42, .15);
	
	margin-bottom: .75rem;
}

.servicePage--box-heading--box{
	
	display: flex;
	flex-direction: column;
	gap: 2rem;
	
}


.servicePage--box-heading--box h3{
	
	font-size: var(--text-xlg);
}



.servicePage--box-details--box p{
	font-size: 1.3rem;
	text-align: center;
	margin-bottom: 0;			/* remove the current 3.2rem */
	min-height: 4em;	
	color: var(--color-text-muted-dk);
	
	
}

.servicePage--box-details--box ul{
	
	list-style: none;
	
	margin-top: 1.6rem;	

	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding-left: .75rem;
	
}


.servicePage--box-includes li{
	font-size:1.2rem;
	position: relative;
	padding-left: 2.4rem;


	line-height: 1.35;
}

.servicePage--box-includes li::before{
	content: "";
	position: absolute;
	left: 0;
	
	width: 1.4rem;
	height: 1.4rem;

	background-image: url("/img/icons/check-orange.svg");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}


.servicePage--box-details--box-link{
	
	display: flex;
	justify-content: center;
}


.servicePage--box-details--box-link a:link,
.servicePage--box-details--box-link a:visited{
	
	text-decoration: none;
	
	font-size: var(--text-body);
	
	color: var(--color-text);
	
	background-color: var(--color-secondary);
	padding: 1rem 1.6rem;	
	
}




/* //----						about Page 					----// */


.aboutPage{

	padding-top: 8rem;
	
	margin-bottom: 10rem;
	
}

.aboutPage-heading--grid{
	
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	
	padding: 0 2rem;
}


.aboutPage-heading--box{

	display: flex;
	flex-direction: column;
	justify-content: center;
	
	gap: 2.6rem;
	
	color: var(--color-text);
	
}

	
	
.aboutPage-heading--box h1{
	
	font-size:3rem;
	font-weight: 500;	
}
	

.aboutPage-heading--box h2{
	
	font-size: var(--text-xxxlg);
	line-height: .98;
	font-weight: 600;
	
	margin-bottom: 1.1rem;
	
}

	
.aboutPage-heading--box span{
	
	color: var(--color-secondary-dker);
}
	

.aboutPage-heading--box--text{
	
	display: flex;	
	flex-direction: column;	
	gap: 1.8rem;	
	margin-bottom: .8rem;
}

	
.aboutPage-heading--box--text p{	
	
	font-size: 1.6rem;
	color: var(--color-text-muted-dk);
	line-height: 1.3;
}



		
.aboutPage-list--box{	

	padding:1.4rem 0;
	
	box-shadow: 1px 1px 32px rgba(15, 23, 42, .17);
	
	margin-top: -2px;
	border-radius: 8px;	
	background-color: var(--color-primary-lightest-1);
}
		

		
		
.aboutPage-list--box ul {
	
	list-style: none;
	font-size: var(--text-small);
	color: var(--color-text-muted-dkest);
	
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	
	padding:0 2rem;
	
}

 
 span.aboutList-remove {
	
	color: inherit;
 }
		


.aboutPage-image--box{
	

	
	display: grid;
	align-items: end;

}


.aboutPage-image--box--1{
	position: relative;
	
	width: 100%;
display: flex;
justify-content: flex-end;



}


.aboutPage-image--box--2{
	
	width: 25%;
	background-color: var(--color-secondary-lt);
	padding: .35rem;
	border-radius: 6px;
	position: absolute;
	
	bottom:0;
	right: 0;
	
	outline: 2px solid #fff;
}


.aboutPage--img{
	
	width: 81.5%;
	
	border-bottom-left-radius: 35%;
	border-bottom-right-radius: 5%;
	border-top-right-radius: 7.5%;
	
	z-index:999999;
	
	margin-left: 6rem;
	
}

.aboutPage-image--box--1::after{
	
	position: absolute;
	
	content: "";
	display: block;
	padding: 30rem 20rem;

	background: radial-gradient(
	  circle,
	  rgb(249, 203, 171, 0.9) 0%,
	  rgb(249, 203, 171, 0.8) 18%,
	  rgb(249, 203, 171, 0.65) 38%,
	 rgb(249, 203, 171, 0.3) 60%,
	 rgb(249, 203, 171, 0.2) 78%,
	 rgb(249, 203, 171, 0) 100%
	);
	filter: blur(55px);
	transform: scale(1.2);


top: 51%;
right: 40.5%;
border-radius: 50%;
transform: translate(50%,-50%)

}


.aboutPage--img-2{
	
	width: 100%;
}

	.aboutPage-list--box--list li strong{
			
		font-weight: 500;
		margin-left: .85rem;
	}
	
	.about-icon{
		
		
		width: 2rem;
	}

	.aboutPage-list--box--list li{
		
	
		
		display: flex;
		align-items: center;
		
		
		}
		


/* //----						portfolio section 					----// */


h3.portfolio-heading {
	
    font-size: var(--text-xxlg);
    font-weight: 500;
		padding-bottom: .5rem;
}


.portfolio{
	
	margin-bottom: 4rem;
	
	padding: 0 2rem;
}


	.portfolio-heading--box{
		
		margin-bottom: 7.2rem;
	}


.portfolio-grid{
	
	display: grid;	
	grid-template-columns: 1fr 1fr 1fr;	
	gap: 8rem;
	
	padding: 0 3.2rem;
}


.portfolio-site--featured{
	
	grid-column: 1/4;		
	box-shadow: 1px 4px 18px rgba(42, 57, 93, 0.25);	
	border-radius: 12px;	
	overflow: hidden;
	
		transition: all .3s;
	
	cursor: pointer;

}


.portfolio-card--grid{
	
	display: grid;	
	grid-template-columns: 15fr 7fr;	
	gap: 4.8rem;
}

.portfolio--text-box-featured{
	
	display: flex;	
	flex-direction: column;
	gap: 2.4rem;	
	padding: 2rem 0 0 4.6rem;	
	background-color: var(--color-primary-lightest-1);
}

.portfolio--text-box-header{
	
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}



	
	.portfolio-heading--box p{
		
		font-size: var(--text-body);
	
	}

.portfolio--text-box-heading h4{
	
	
	font-size: var(--text-lg);
	text-align: center;
	padding: 1.2rem 0 0;
} 

.portfolio--text-box-description {
	
	height: 5.7rem;
}



.portfolio--text-box-description p{
	
	font-size: 1.3rem;
	text-align: center;

	color: var(--color-text-muted-dk);
	
	line-height: 1.3;
	
	padding: 0 1rem .5rem;
	
}


.portfolio--heading-badge{
	
	display: flex;	
	align-items: center;
	justify-content: space-between;
}


.portfolio--text-box-featured h4{
	
	font-size: var(--text-h3);
}


.portfolio--text-box-featured p{
	
	font-size: 1.5rem;	
	color: var(--color-text-muted);
	line-height: 1.3;
}


.portfolio--status-badge p{
	
	background-color: var(--color-primary);
	padding: .25rem .75rem;
	color: #fff;
	
	border-radius: 12px;
} 



.portfolio--tags p,
.portfolio--tags-secondary p{
	
	color: var(--color-text-muted);
	font-weight: 500;
}


.portfolio--tags p{
	
	font-size: var(--text-small);
	
	
}


.portfolio--tags-secondary p{
	
	font-size: 1.2rem;
	
	margin-bottom: .25rem;
	
}

h4.portfolio--features-heading, 	h4.portfolio--features-heading-secondary {
	
	font-weight: 500;
}


h4.portfolio--features-heading{
	
	font-size: var(--text-small);
	margin-bottom: 1.1rem;
	
}


h4.portfolio--features-heading-secondary {
	
	font-size: 1.2rem;
	margin-bottom: 1rem;
	
	
}

.portfolio--text-box-secondary{
	
	padding: .75rem 2.4rem 0;
	
	display: flex;
	
	flex-direction: column;
	gap: 1.8rem;
	
	background-color: var(--color-primary-lightest-1);
}

	
.portfolio--skills-list{
	
	display: flex;	
	flex-direction: column;
	
	margin-bottom: .6rem;	
	list-style: none;	
	gap: .3rem;	
}



.portfolio-list--cta{
	
	display: flex;
	justify-content: space-between;
	
	
}

.portfolio--featured--link {
	
	align-self: flex-end;
	margin:0 2.4rem 1.6rem 0;
}


.tick-icon{
	
	width: 1.6rem;
	margin-bottom: .25rem;
}


li.portfolio--skills-list-item {
	
	color: var(--color-text-muted-dkest);
	
	display: flex;
	align-items: center;
	margin-left: 2rem;
}


li.portfolio--skills-list-item{
	
	font-size: 1.4rem;
	gap: .4rem;
	
}



.portfolio--status-badge p{
	
	display: inline-block;
	background-color: var(--color-primary);

	padding: .35rem 1.6rem;	
	border-radius: 16px;	
	color: #fff;	
	font-size: var(--text-body);
	box-shadow: 1px 4px 18px rgba(42, 57, 93, 0.25);
}


.portfolio--featured--link-secondary{
	
	display: flex;
	align-items: center;
	justify-content: center;
	
	padding: 0 0 1.6rem;
}



.portfolio--featured--link a:link,
.portfolio--featured--link a:visited,
.portfolio--featured--link-secondary a:link,
.portfolio--featured--link-secondary a:visited{
	
	display: inline-block;	
	text-decoration: none;
	
	box-shadow: 1px 4px 18px rgba(42, 57, 93, 0.25);	
	color: inherit;	
}


.portfolio--featured--link a:link,
.portfolio--featured--link a:visited,
.portfolio--featured--link-secondary a:link,
.portfolio--featured--link-secondary a:visited{
	
	background-color: var(--color-secondary-lt);	
	font-weight: 500;
	
	transition: all .2s;
	
	}
	

.portfolio--featured--link a:link,
.portfolio--featured--link a:visited{
	
	font-size: var(--text-lg);	

	padding: 1rem 4rem;
	
}

.portfolio--featured--link-secondary a:link,
.portfolio--featured--link-secondary a:visited,
.portfolio--featured--link-disabled a:link,	
.portfolio--featured--link-disabled a:visited{	
	
	font-size: 1.3rem;	
	padding: .6rem 1.6rem;
	
}


.portfolio--featured--link a:hover,
.portfolio--featured--link a:active,
.portfolio--featured--link-secondary a:hover,
.portfolio--featured--link-secondary a:active{
	
	background-color: var(--color-primary);
	color:#fff;
	


}



	
.portfolio--image-box-featured,	.portfolio--image-box-secondary, .portfolio--featured--link-disabled  {
	
	display: flex;
	align-items: center;
	justify-content: center;	
}

.portfolio--featured--link-disabled a:link,	
.portfolio--featured--link-disabled a:visited{
	
	background-color: var(--color-text-muted-ltest);
		display: inline-block;	
	text-decoration: none;
	color: var( --color-text-muted-dkest);

	}




.portfolio-featured--img{

	width: 100%;
	height: auto;
}

.portfolio--image-box-secondary{
	
	border-bottom: 2px solid var(--color-text-muted-ltest);	
}


.portfolio-site--card{
	
	border-top-left-radius:16px;
	border-top-right-radius: 16px;
	
	overflow: hidden;
	
	box-shadow: 1px 4px 18px rgba(42, 57, 93, 0.2);	
	
	transition: all .3s;
	
	cursor: pointer;
	
}

.portfolio-site--card:hover, .portfolio-site--featured:hover{
	
	transform: scale(1.01) translateY(-1%);
	box-shadow: 1px 4px 24px rgba(42, 57, 93, 0.35);	
	
}

.portfolio-secondary--img{

	width: 100%;
	height: auto;
	aspect-ratio: 6/4;
	
	object-fit: cover;
	object-position: top;
	display: block;
}




	.portfolio--text-box-heading{
		
		/* position:relative; */
		
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	
	
.portfolio--status-badge-secondary p , 	.portfolio--status-badge-secondary-building p , .portfolio--status-badge-secondary-soon  p{

	
	padding: .25rem .65rem;
	border-radius: 10px;
	color: #fff;
	
	font-size: 1.3rem;
}


.portfolio--status-badge-secondary p {
	
	background-color: var(--color-primary);
	
	
}



	.portfolio--status-badge-secondary-building p{
background-color: var(--color-text-lt-blue);
color: var(--color-text);

	}
	
	.portfolio--status-badge-secondary-soon p{
background-color: var(--color-secondary-dker);
color: #fff;

	}
	
	
.projects-underline{
	
	width: 15%;
	height: .25rem;
	border: 0;
	background: var(--color-secondary);
	border-radius: 999px;
	margin-left: 1rem;
	margin-bottom: 4rem;
	
}
	
	
	
	
	/* //----						Contact Page 					----// */
	
	
	.contact{
		
		display: flex;
		flex-direction: column;
		gap: 2rem;
		
		margin-bottom: 4rem;
		
	}
	
	
	
.contact-heading-box{
	
	display: flex;
	flex-direction: column;
	gap: 3.6rem;	
	
	padding: 6.4rem 0;
	text-align: center;
	font-size: var(--text-h3);
	color: var(--color-text);
	
}


.contact-underline{
	
	width: 15%;
	height: .4rem;
	border: 0;
	background: var(--color-secondary);
	border-radius: 999px;
	margin: .65rem auto 0;
	
}

	.contact-text-box{
		
		margin: 0 auto;
		
		max-width: 132rem;
	}



.contact-text-box p{
	
	margin: 0 auto;
	width: 72.5%;
	
	font-size: 1.8rem;
	color: var(--color-text-muted-dkest);
	line-height: 1.4;
	
	text-align: center;
}

.contact-form-box{
	margin: 0 auto;
	
	padding: 0 10rem;
	max-width: 110rem;
}

	
.contact-form-grid{
		
	display: grid;
	/* grid-template-columns: 1fr 1fr; */
	grid-template-columns: 3fr 4fr;
	
	background-color: var(--color-primary-lightest);
	
	border-radius: 18px;
	overflow: hidden;
	/* box-shadow: 2px 4px 9px rgba(14, 56, 128, 0.2); */
	
}


.contact-form--img{
	
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
	
	aspect-ratio: 11/13;
	

}


.contact-form--form{
	
	margin: 0 auto;	
	display: grid;	
	align-items: center;	

}


.contact-form{
	
	display: flex;
	flex-direction: column;
	gap: 1rem;
	
}

.contact-form--row {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	
}

.contact-form--row label{	
	
	font-size: 1.3rem;
	font-weight: 400;

}

#message-label{
	
	align-self: flex-start;
	
}

.contact-form--row input,
.contact-form--row select,
.contact-form--row textarea {
	width: 100%;
	padding: 1rem 1.2rem;
	font: inherit;
	border: 1px solid #cfd7e6;
	border-radius: 8px;
	background-color: #fff;
}


	.contact-form--submit-btn{
		
		display: flex;
		align-items: center;
		justify-content: center;
	
	}



.contact-form--btn {
	border: none;
  padding: 1rem 2.6rem;
	font-size: 1.4rem;
  font-weight: 600;
  border-radius: 8px;
  background-color: var(--color-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
	
	transition: all .2s;
}

.contact-form--btn:hover {
	
	
	background-color: var(--color-primary);
	color:#fff;
	
	transform: scale(1.03) translateY(-3%);
	
		box-shadow: 2px 4px 24px rgba(14, 56, 128, 0.25);
	
}


.success-page{
	
	display: flex;
	place-items:center;
	flex:1;
	
	
	
}


.success-page--box{
	
	margin: 0 auto;
	
	display: flex;
	flex-direction: column;
	place-items:center;
	gap: 3.2rem;
	
}


.success-page--box h3{
	
	font-size: var(--text-xxxlg);
	
}


.success-page--box p{
	
	
	font-size: var(--text-xlg);
	
}


.success-page--box a:link,
.success-page--box a:visited{
	
	display: inline-block;
	text-decoration: none;	
	font-size: var(--text-lg);	
	color: inherit;	
	padding: 1rem 1.6rem;
	
	background-color: var(--color-secondary);	
	transition: all .2s;	
}

.success-page--box a:hover,
.success-page--box a:active{	
	
	background-color: var(--color-primary);
	color: #fff;	
	
	transform: scale(1.02) translateY(-2%);
	
}
	
	
/* //----						Login Page 					----// */


.login{
	
	display: flex;
	align-items: flex-start;
	justify-content: space-around;
	gap: 6.4rem;
	
	padding: 6rem;

}


.login__form-heading{
	
	text-align: center;
	font-size: var(--text-lg);
	padding: 2rem 0 0;
}


.login__form{
	
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 4.8rem 2.4rem;
	background-color:var(--color-bg);
}



.signup__form{
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 2.5rem;
	background-color:var(--color-bg);
	column-gap: 4rem;
}

.signup__form--group{
		
		display: flex;
		flex-direction: column;
		gap: 1rem;
}



.login__form--box{
	
	padding: 3.2rem 0;
}


.login__form--box form label{
	
	font-size: var(--text-lg);
	color: var( --color-text);
}


.login__form--box form input{
	
	font-size: var(--text-lg);
	color: var( --color-text);
	
	margin-bottom: var(--mrg-med);
	padding: .25rem;
}


.login__form--submit,
.signup__form--submit{
	
	width: 50%;
	align-self: center;
	padding: .5rem 0;
	
	font-size: var(--text-body);
	color: var( --color-text-white);

	background-color: var(--color-dk-bg);
	
	border:none;
	border-radius: 4px;	
	
	cursor: pointer;
}

.signup__form--submit{
	
	justify-self: center;
}


.forgot-password:link,
.forgot-password:visited{
	
	
	text-decoration: none;
	color: var(--color-text);
	font-size: 1.4rem;
	text-align: center;
	padding-top: 2rem;
}




/* //----------------		Reset Password Page 	-----------------// */



h2.resetPassword-heading{
	
	text-align: center;
	font-size: var(--text-h2);
	padding: 6.4rem 0;
}



section.resetPassword{
	
	
	display: grid;
	place-items: center;

}

.reset-password-form{
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3.2rem;
	
}

.reset-password-row{
	
	display: flex;
	align-items: center;
	gap: 1.2rem;
}


.reset-password-row label{
	
font-size: var(--text-xxlg);
	
	
}

.reset-password-row input{
	
	display: inline-block;
	font-size: 2.4rem;
	border: none;
	background-color: var(--color-bg);
	color: var(--color-text);
	padding: .25rem .5rem;
	
}


.reset-password-btn{
	
	font-size: var(--text-xlg);
	background-color: var(--color-dk-bg);
	color: var(--color-text);
	border: none;
	padding: .25rem .5rem;
	margin-bottom: var(--mrg-xlg);
	
	cursor: pointer;

}






/*------------------------------ ------------------ -----------------------------------*/
/*------------------------------ -- Admin Styling -- ----------------------------------*/
/*------------------------------ ------------------ -----------------------------------*/


/* //						Header	 					// */

nav.header {
	display: flex;
	align-items: center;
	justify-content: center;
	
		
	}

ul.admin-nav {
	
	list-style: none;
	display: flex;
	font-size: 2rem;
	align-items: center;
	gap: 6.4rem;
padding: 2rem 0;
	
}


ul.admin-nav li a{
	
	text-decoration: none;
	color: var(--color-text);
	font-weight: 600;
	  font-family: "Rubik", serif;
}



h1.admin_heading {
	
	font-size: var(--text-xxlg);
	text-align: center;
	/* margin-bottom: 2.4rem; */
	
	padding: 2rem 0;
}


.admin_header-info--box{
	
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}



.admin_header-info--box a:link,
.admin_header-info--box a:visited{
	
	text-decoration: none;
	font-size: var(--text-body);
	
	
}


.admin_header-info--link{
	
	color: #555;
	
}



/* //						Home Page 					// */



section.admin__home--grid {
	
	display: grid;
	
	grid-template-columns: 1fr 1fr 1fr;
	justify-items: center;
	gap: 4rem;
	padding: 10rem 0 0;
	
}



	.admin__home--box{
		
		display: flex;
		flex-direction: column;
		align-items: center;
		
		gap: 3.2rem;
		
		padding: 4rem;
		
		border: 1px solid var(--color-secondary);
		
		background-color: var(--color-bg);
		
		border-radius: 8px;
		
		width: 100%;
	}


.admin__home--box h3{
	
	font-size: var(--text-xxlg);
	
	
	
}


.admin__home--box p{
	
	font-size: var(--text-body);
	
}


.admin__home--box a:link,
.admin__home--box a:visited{
	
	color: var(--color-text-white);
	text-decoration: none;
	
	font-size: var(--text-body);
	
	background-color: var(--color-secondary);
	
	cursor: pointer;
	
	padding: 1rem 2.4rem;
	
	border-radius: 8px;
	
	
	
}


/*-----------------		Products		--------------------*/



/* //			Product List Page		/// */


.admin-productList__headings, 	.admin-product {
	
	display: grid;
	
	grid-template-columns:2fr 1fr 3fr 4fr 2fr 3fr 3fr 2fr 2fr 1fr;
	text-align: center;
	padding: 2rem .5rem;
	border-bottom: 2px solid var(--color-dk-bg);
	
	
	
}

p.admin-productList_head {
	
	font-size: var(--text-body);
	
}

h4.admin-product__heading {
	
	text-align: left;
	padding-left: 2rem;
}

p.admin-product__text,	h4.admin-product__heading  {
	
	
	font-size: var(--text-body);
}

	img.admin-product__img{
		
		width:85%;
		height: auto;
	}


.admin_edit--arrow:link,
.admin_edit--arrow:visited{
	
	text-decoration: none;
	
	font-size: 1.8rem;
	
}

		.admin-product--loop{
			
			margin-bottom: 4rem;
		}


.newProduct--link-box{
	
	display: grid;
	justify-content: center;
	
	margin-bottom: 4rem;
		
		
	}
	
	

.product__new:link,
.product__new:visited{
		text-decoration: none;
	
	font-size: 1.8rem;
	
	background-color: var(--color-dk-bg);
color: var(--color-text-white);
	
	padding: .5rem .75rem;
	border-radius: 4px;
	
	
}


/* //			Product Item Page		/// */

.product--grid{
	
	
	column-gap: 12.4rem;
	
	
}

	section.product__images {
		
display: grid;
grid-template-rows: 1fr 1fr;
		
	
	}
	
.product__imagesArray{
	
	display: grid;
	grid-template-columns: repeat(3,1fr);
	column-gap: 2rem;
}

.product__img--cover{
	
	width: 100%;
	height: 100%;
	padding: 10rem;
}

.product__img--array{
	flex:1;
	width: 100%;
}

h2.product__item--heading{
	
	
	text-align: center;
	font-size: 4rem;
	padding: 3.2rem 0;
	
}

form.product__form,	form.product__form--create{
	
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	margin: 0 auto;
	
	padding: 4.8rem 0;
	
	
}

form.product__form{
	
	width: 100%;
	
}


form.product__form--create{
	width: 50%;
	
}




.product__form--group{
	display: flex;
	justify-content: space-between;
	align-items: center;
	
}

.product__form--group label{	
	
	font-size: 2rem;
}


.product__form--group input{
	
	width:65%;	
	font-size: 2rem;
}

.product__form--grid-select{
	
	padding-top: 2.4rem;
	
	display: grid;
	
	grid-template-columns: 1fr 2fr;
	column-gap: 3.2rem;
	row-gap: 2rem;
}



.product__form--group--variant{
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: 2rem;
}

.product__form--left .product__form--group{
	margin-bottom: 2rem;
}


.product__form--group select{
	
	width: 10.8rem;
}

.product__form--variant-row{
	
	display: grid;
	grid-template-columns: 2fr 1fr;
	align-items: center;
	
}




.product__form--variant-row label{
	
	font-size: var(--text-body);
	justify-self: end;
}



.product__form--variant-row input{
	
max-width: 5rem;
justify-self: end;
}


button.product__form--btn {
	
	width: 50%;
	align-self: center;
	margin-top: 2rem;
	padding: .75rem 0;
	font-size: 1.8rem;
	font-weight: 600;
	
	cursor: pointer;
	
	
}



img.product__form--img{
	
	width: 200px;
height: 200px;
	}
	
.product__form--btn-box,	.product__form--img-box,	.category__form--img-box{
	
	margin-bottom: 3rem;
	
	
}

	.category__form--img-box{
		
		
		display: flex;
		
		gap: 2rem;
	}

	input#product-image-array{
		
		margin-bottom: .5rem;
	}

.product__form--img-box label,	.category__form--img-box label{
	
	font-size:1.8rem;
	margin-bottom: 1rem;
	display: inline-block;
	
	
}

.product__form--img-box input{
	
	font-weight: 600;
	
}
			
.product__form--btn-box{
	
	display: flex;

	justify-content: center;
	gap: 3.6rem;
}


.product__form--img-box-new {
	
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3.6rem;
}


.product__form--img-box-new label{
	
	font-size: 2rem;
	font-weight: 600;
	
	
	
}

/*-----------------		Users 	--------------------*/


/* //			User List Page		/// */


.admin-userList__headings, 	.admin-user {
	
	display: grid;
	grid-template-columns: 3fr 3fr 2fr 2fr 2fr 1fr;
	align-items: center;
	text-align: center;
	padding: 2rem .5rem;
	border-bottom: 2px solid var(--color-dk-bg);
	
		font-size: var(--text-body);
	
	
	
	
}

p.admin-user__text,	h4.admin-user__heading  {
	
	
	font-size: var(--text-body);
}



section.admin-userList--form-role	{
	
	display: grid;
	align-items: center;
	justify-content: center;
	padding: 1rem 0 4.8rem;
	
}

.form_role--group {
	
	display: flex;
	align-items: center;
	gap: 2rem;
	
}

.form_role {
	
	padding: 2rem 0;
}


.form_role label{
	
	font-size: 3rem;
	font-weight: 600;
	
}


.form_role select{
	
	font-size: 1.8rem;
	padding: .25rem .75rem;
	
	border: none;
	
	border-radius: 4px;
	
	outline: 2px solid var(--color-dk-bg);
	
}

.edit_user--link:link,
.edit_user--link:visited{
	
	
	text-decoration: none;
color: var(--color-text-white);
	background-color: var(--color-dk-bg);
	border-radius: 4px;
	padding: .5rem;
}



/* //				My	User Page					/// */


.user__main--form{
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	
}

.user__form{
	
	display: flex;
	flex-direction: column;
	
}



/* //					User Page					/// */


section.admin__form--box {
	
	display: grid;
	justify-content: center;
}

	.admin__page--heading  {
		
		text-align:center;
		padding: 3.2rem 0 1.6rem;
		
	}
	
	h2.admin__page--heading  {
		
		font-size: 3.2rem;
		
	}
	
	h3.admin__page--heading  {
		font-size: 2.4rem;
	
	}
	
	.divider-flex{
		display: grid;
		grid-template-columns: repeat(3,1fr)
	}


form.admin__form--update, form.admin__form--create{
	
	display: flex;
	flex-direction: column;	
	gap: 2rem;
	
	padding: 4rem 0;
}

form.admin__form--update input{
	
	background-color: var(--color-primary-lightest);
}


form.admin__form--update{
	
color: var(--color-text-white);
	padding: 1.6rem 3.2rem;
}


.admin__form--group{
	
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6rem;
}

	

p.address-form-default{
	
	font-size: var(--text-body);
	text-transform: uppercase;
}

.admin__form--group label, .admin__form--group input{
	
	font-size: 2.2rem;
}

.admin__form--group label{
	
	text-transform: uppercase;
	color:var(--color-text);
	
}

.admin__form--group input{
	
	width: 85%;
}

.admin__form--group-gap{
	

	gap: 10rem;
	
}
.admin__form--group-gap input{
	
width: 60%;
	
}


#user__form-submit,#new-user__form-submit,
#deactivateUser,#new-category--form-submit {
	
	width: 35%;
	align-self: center;
	margin-top: 2.4rem;
	
}



section.admin__create {
	
	margin-bottom: 4rem;
}


.admin__create--box{
	
	padding: 2.4rem 0;

	
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}


.admin__create--link:link,
.admin__create--link:visited{
	display: inline-block;
	text-decoration: none;
	
		font-size: var(--text-body);
	background-color: var(--color-bg);
	color: var(--color-text);
	
	padding: .75rem;
	
	outline: 2px solid var(--color-dk-bg);
	
	
}



.admin__form--buttons{
	
	display: flex;
	align-items: center;
	justify-content:center;
}

#deactivateUser,#deactivateCategory, #discontinue-btn {
	width: 50%;
	background-color: rgba(255, 0, 0, 0.423);	
	cursor:pointer;
	padding: .25rem ;
	

	font-size: 1.6rem;
	font-weight: 600;
}


/* /// 	User Search		/// */


.user-search-form{
	
	display: flex;
	align-items: center;
	gap: 1rem;
	
}


.user-search-form input{
	
	font-size: 2rem;
	padding: .5rem;
color: var(--color-text-white);
	border: none;
	
	outline: 2px solid	var(--color-dk-bg);
	
	
	
}
.user-search-form button{
	
	border: none;
	
	background-color: inherit;
	
	cursor: pointer;
	
	
}

.form-icon{
	
	width: 3.2rem;
	height: 3.2rem;
	color: var(--color-text-muted);
	
}

.form-group-address{
	display: flex;
	flex-direction: column;
	gap: .5rem;

}

#addresses-13,
#addresses-23,
#addresses-33{
	
	background-color: var(--color-dk-bg);
	color: var(--color-text-white);
	padding: .5rem;

	
}


.form-group-address--labels{
	
	display: flex;
	justify-content: space-between;
	align-items: center;

}


.form-group-address--labels input{
	
border: none;
text-align: right;

}

.admin-product-flex{
	display: flex;
	flex-direction: column;
	margin-bottom: 3.2rem;
}



h4.admin-userPage--heading{
	
	font-size: 2.2rem;
	margin-bottom: 1rem;
	
	
}

/* //----------------Categories ---------------- */


/* //		Category List Page		/// */


.admin-categoryList__headings, 	.admin-category {
	
	display: grid;
	
	grid-template-columns:1fr 2fr 2fr 2fr 2fr 1fr ;
	text-align: center;
	padding: 2rem .5rem;
	border-bottom: 2px solid var(--color-dk-bg);
	
	
	
}

.admin-categoryList__headings{
	
	font-size: var(--text-body);
	font-weight: 600;
}

.categoryList_img{	
	
	width: 50%;	
	height: auto;
	
	justify-self: center;
}

p.admin-category__text,	h4.admin-category__heading  {
	
	
		font-size: var(--text-body);
}



.category__form--btn,.btn--submit, .user__form--btn-submit{
	
	width: 35%;
	align-self: center;
	
}




/* //---------------- Orders ---------------- */


/* // Order List Page */



.admin-orderList--grid{
	
	display: grid;
	
	grid-template-columns: 2fr 2fr 2fr 3fr 2fr 2fr 3fr 1fr 1fr;
	column-gap: 2.4rem;
	align-items: center;
	justify-items: center;
	padding-top: 6rem;
}


.admin-orderList--grid h3{
	
	font-size: 2rem;
	text-align: center;
	align-self: flex-start;
	margin-bottom: 2rem;
	
	
}
.admin-orderList--grid p{
	
	font-size: 1.8rem;
	
	
}


.product p, .address p{
	
	margin-bottom: .5rem;
}

 .address{
	
	display: flex;
	flex-direction: column;
justify-self: start;
	padding:1rem;
 }



 
 .admin-orderList-edit--link:link,
 .admin-orderList-edit--link:visited{	
	
	text-decoration: none;
	font-size: 2rem;	
	
	
 }
 
 textarea {
  resize: none;
}



.admin-orderList--search-box {
	
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.searchForm-orders {
	
	display: flex;
	align-items: center;
	gap: 1rem;
}


.searchForm-orders input{
	
	font-size: 2rem;
	font-weight: 600;
	border: none;
	border:1px solid var(--color-secondary);
	color: var(--color-text-muted);
	
	padding: .5rem;
	background-color: var(--color-bg);
	
	
}

.searchForm-orders button{
	
	border: none;
	cursor: pointer;
	background-color: inherit;
}


/* // Order page */

.admin-order--page {
	
	display: grid;
	place-items: center;
}


.admin-order-form--full{
	
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* justify-content: center; */
	justify-items: center;
	align-items: center;
	padding: 3.2rem 0;
	width: 100%;
	margin: 0 auto;
	
}

	.admin-top-left, 	.admin-top-right{
		
		display: flex;
		align-items: center;
		gap: 2rem;
	}

.admin-order--form-update{
	
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 80%;
	column-gap: 10rem;
	row-gap: 3.2rem;

}

.admin-order-left{
	align-self:start;
}

.admin-order-left,.admin-order-right{
	
	display: flex;
	flex-direction: column;
	gap:2.4rem;
}

	.admin-order-product-flex{
		
		display: flex;
		flex-direction: column;
		gap: .25rem;
	}

.admin-order-form--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.admin-order-form--row h2 {
	
		font-size: var(--text-xlg);
	margin-bottom: 2.4rem;
}

.admin-order-form--row label, .admin-order-form--row input,
.admin-order-form--row textarea , .admin-order-form--full label,
.admin-order-form--full select, .admin-order-form--row select
{
	
		font-size: var(--text-body);
}

#admin-order-product{
	
	width: 32.5rem;
}


.admin-order-form--full label{
	
	background-color: var(--color-dk-bg);
color: var(--color-text-white);
	padding: .75rem 1.2rem;
	border-radius: 6px;
	
}

.admin-order-address--box{
	align-self: flex-start;
	
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.admin-order-address--box p{
	
	font-size: 1.2rem;
	color: #f32828be;
	font-weight: 600;
	
}

.admin-order-address--box label{
	
	align-self: flex-start;
	
}

.shipping-address-label{
	
	background-color: var(--color-dk-bg);
color: var(--color-text-white);
  padding: .75rem 1.2rem;
  border-radius: 6px;
}


.admin-order-form--submit{
	grid-column: span 2;
	justify-self: center;
	padding: 6rem 0;
	
	display: grid;
	justify-items: center;
	
}

.admin-orders-submit-btn{
	
	background-color: var(--color-dk-bg);
	color: var(--color-text-white);
	
	font-size: 2rem;
	
	padding: .75rem 1.2rem;
	border-radius: 6px;	
	
	border: none;
	
	cursor: pointer;
	

	
}

.submit-message p{
	font-size: 2.4rem;
color: #f32828be;
font-weight: 600;
margin-bottom: 3.2rem;
}

.admin-order-form--align--label label{
	
	align-self: flex-start;
}


.address-textarea--select{
	
	display: grid;
}


#shipaddress{
	margin-bottom: .75rem;
}




/* // Orders search */


.admin-order-back{
	
	display: grid;
	align-items: center;
	justify-items: center;
	padding: 4rem 0;
	
}

.backtoorders:link,
.backtoorders:visited{
	
	background-color: var(--color-dk-bg);
 color: var(--color-text-white);
  font-size: 2rem;
  padding: .75rem 1.2rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
	text-decoration: none;
}




/* ------------ Transactions ------------ */





.admin-transactionList--grid{
	
	display: grid;
	
	grid-template-columns: 2fr 3fr 3fr 3fr 1fr 2fr 2fr 1fr;
	column-gap: 2.4rem;
	align-items: center;
	justify-items: center;
	padding-top: 6rem;
}

.admin-transactionList--grid h3 {
	font-size: 2rem;
  text-align: center;
  align-self: flex-start;
  margin-bottom: 2rem;
}

.admin-transactionList--grid p {
	
	font-size: 1.6rem;
	margin-bottom: 2rem;
}





/* ------------ Discounts ------------ */


.create_discount-grid {
	
	
	display: grid;
	
	place-items: center;
}


.create_discount--block{
	
	margin-bottom: 4rem;
	
}


.create_discount--row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4.8rem;
	margin-bottom: 1rem;
}

.create_discount--row input,
.create_discount--radio input,
.create_discount--radio label,
.create_discount--row label{
	
	font-size: 2rem;
	
}



.create_discount--radio-flex {
	
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 3rem;
}


.create_discount--inputs{
	
	font-size: 2rem;
	display: flex;
	align-items: center;
	gap: 3rem;

}

.create_discount-inputs--flex{
	
	display: flex;
	gap: .75rem;
}


.admin-discountList--grid{
	display: grid;
  grid-template-columns: 2fr 2fr  2fr 3fr 3fr 3fr 3fr 2fr 2fr;
  column-gap: 2.4rem;
  align-items: center;
  justify-items: center;
  padding-top: 3rem;
	
}


.admin-discountList--grid h3{
	
	font-size: 2rem;
  text-align: center;
  align-self: flex-start;
  margin-bottom: 2rem;

	
	
}

	.admin-discountList--grid p{
		
		margin-bottom: 2rem;
	}


/* ----------- Alert /Error Page ------------ */

.alert {
	
	position: fixed;
  top: 7%;
  left: 50%;
	
  transform: translateX(-50%);
	
  z-index: 9999;
	
  color: var(--color-text-white);

  font-size: var(--text-xxlg);
  font-weight: 600;
  text-align: center;

	width: 100%;
	border-radius: 10px;

  padding: 2.8rem 12rem;
	
  box-shadow: var(--shadow-md);
	
border-top: 4px solid var(--color-secondary);
border-bottom: 4px solid var(--color-secondary);
	
	
}



.alert--success {
  background-color: var(--color-secondary);
	
}


.alert--error {
  background-color: rgba(255, 0, 0, 0.423);
}

.error {
	
	
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	gap: 6rem;
	padding: 6rem 0;
	
  max-width: 80rem;
  text-align: center;
	min-height: 62.5vh;
	
}



.error__title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--mrg-nrm);
}

.error__emoji {
	
  font-size: var(--text-xlg);
  margin-left: var(--mrg-sm);
	
}

.error__msg {
	
  font-size: var(--text-h2);
  font-weight: 700;
  max-width: 60rem;
  margin: 0 auto;
}

.heading-secondary--error{
	
	font-size: var(--text-xxlg);
}



/* /// Full screen */

@media (max-width: 84.375em) {
	
	
	
	.homePage__process {
 
    padding: 2rem 3.6em .5rem;    
		border: none;
	}

	.process__heading-box h2 {
	    padding: 1.2rem 0;
	    font-size: var(--text-xlg);
	    margin-bottom: 1.2rem;
	}
	
	.process__heading-box p {
    font-size: var(--text-lg);
    margin-bottom: 4.4rem;
   
}

.process__step-text h3 {
    font-size: var(--text-h4);
    padding-bottom: .4rem;  
    margin-bottom: 2.4rem;
  
}
	
	.process__step--desc {
		
    font-size: var(--text-body);
     line-height: 1.45;
    padding: 0 2.4rem;
}


.footer--box {
   
	max-width: 110rem;
	padding: 0 2rem;
}

}


/* /// 1220px */


@media (max-width: 76.25em) {
	
	.homePage-grid {
		
		gap:1.4rem;
	}
	
	.homePage__hero--image-box {
		
		align-items: center;
	}
	
	.homePage__hero--img {
    display: flex;
    align-items: center;
    
}
	
	.homePage__services--grid {
		
		    grid-template-columns: repeat(auto-fit, minmax(24rem, 31.5rem));
				
				gap: 2rem;
	}
	
	
	.homePage__services--grid-box {
	
	height: 28rem;
	
	
}

.services--text-box {
	
	
	width: 20rem;
}

.services--heading-box h3 {
	
	font-size: var(--text-lg);
	text-align: center;
	
	
}


	.content-active {
		
		left:36rem;
	}
	
	.homepage__banner--wide-box h2 {
		
		
		font-size: var(--text-h3)
	}
	
	.homePage__banner-sub-heading {
    font-size: var(--text-lg);
}


.servicePage--grid {
	
    /* max-width: 120rem; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(25rem, 29.5rem));
    justify-content: center;
    gap: 3.2rem;
}

.servicePage--box
 {
   
    gap: 3.6rem;
    padding: 2rem 1.6rem;
   
}

.aboutPage-heading--grid {


    gap: 2rem;
   
}

.aboutPage-heading--box{
	
	gap:1.4rem;
	
}
.aboutPage-heading--box h2 {
	
    font-size: 3rem;
    line-height: 1;
    
    margin-bottom: 1.1rem;
}

.aboutPage-heading--box h1 {
    font-size: 2.6rem;
    font-weight: 500;
}
	
.aboutPage-heading--box--text p {
    font-size: 1.4rem;
   
    line-height: 1.2;
}

.aboutPage-image--box--1 {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.aboutPage--img {
    width: 85%;
  
    margin-left: 2rem;
}

.aboutPage-list--box ul {
   
  
    gap: 1rem;
 
}

.portfolio-grid {
	
  
    gap: 4rem;
    padding: 0 2rem;
}

.portfolio--text-box-featured {
   
    gap: 1.8rem;
    padding: 1.2rem 0 1rem 3.2rem;
    background-color: var(--color-primary-lightest-1);
}

.contact-form--form {
  padding: 2.4rem 0;
}

.contact-form--img {
   
  
       aspect-ratio: 10 / 13;
}
	
}



/* /// 1000px */

@media (max-width: 63.75em) {
	
	
.header__cta-link:link,
.header__cta-link:visited{

	
	padding: .5rem 1rem;
	
	font-size: 1.5rem;	
}

	
.homePage-grid {
	
	grid-template-columns: 1fr 2fr;

	gap:2rem;
}

.homePage__hero--text-box {

	gap:2rem;
}

	.homePage--heading, .flex-heading p , .flex-heading span{	
	
		
		font-size: 4rem;

	}



	
.homePage--sub-heading {
	
	font-family: "Poppins", sans-serif;
	font-weight: 400;
    font-size: var(--text-lg);

    line-height: 1.1;
}

.homePage__cta:link, .homePage__cta:visited {

  padding: .75rem 1.2rem;
  font-size: var(--text-small);



}

.homePage__hero--img img {
	
	max-width: 94%;

    border-bottom-left-radius: 120px 70px;
    border-bottom-right-radius: 18px;
}

.content-active {
	
	left:30rem;
}

.process__step--card {
	
	
	gap:4rem;
}

.homePage__services--grid {

    grid-template-columns: repeat(auto-fit, minmax(24rem, 17.5rem));
		
		gap: 3.2rem;
		
	}
	
	.homePage__services--grid-box {
		
		height: 26rem;
		padding: 2rem 1.4rem ;
		
		
	}
	
	.process__step--btn {
		
		padding: 1.2rem .75rem .5rem 3rem;
		
		font-size: 1.5rem;
		
	}
			
.process__step-text h3 {
    font-size: 1.8rem;
  
    margin-bottom: 1.4rem;
  
}

.servicesPage-icon {
	
    padding: 1.2rem;
   
}

.servicePage--box-heading--box h3 {
	
    font-size: 1.5rem;
}

.servicePage--box {
    gap: 3rem;
    padding: 1.2rem .8rem;
}

.servicePage--grid {

    grid-template-columns: repeat(auto-fit, minmax(20rem, 24rem));
   
    gap: 2.8rem;
		padding: 0 2rem;
}

.servicePage--box-details--box ul {
	
 	height: 8.5rem;
    margin-top: 1rem;
   
    gap: .5rem;
    padding-left: 0;
}


.aboutPage {
    padding-top: 4.8rem;
		margin-bottom: 6rem;
    
}

.aboutPage-heading--box h2 {
	
  font-size: 2.4rem;
  line-height: .95;
 
}

 .aboutPage-heading--box h1 {
	
  font-size: 2rem;
 
}

.aboutPage-heading--box {
    gap: 1rem;
}

.aboutPage-list--box ul {
   gap: .4rem;
	 font-size: 1.3rem;
  }

.portfolio-grid {
  gap: 2.8rem;
  padding: 0 1.2rem;
}

.portfolio--text-box-heading h4 {
    font-size: var(--text-body);
   
   
}

.portfolio--status-badge-secondary p, .portfolio--status-badge-secondary-building p {
   
    font-size: 1.2rem;
}

.portfolio--tags-secondary p {
    font-size: 1.1rem;
		text-align: center;
  
}

.portfolio--text-box-secondary {
    padding: .75rem 1.2rem 0;  
    gap: 1.6rem;
   
}

.portfolio-card--grid {
    display: grid;
    grid-template-columns: 14fr 7fr;
    gap: 1.8rem;
}

.portfolio--text-box-featured p {
    font-size: 1.4rem;
  
    line-height: 1.25;
}

.portfolio--featured--link a:link, .portfolio--featured--link a:visited {
    font-size: 1.7rem;
    padding: .6rem 2.4rem;
}

li.portfolio--skills-list-item {
    font-size: 1.35rem;
  
}

.aboutPage-image--box--1::after {
   
    padding: 20rem 12rem;
 
    transform: scale(1.2);
    top: 5%;
    right: 12%;
 
	}

	
.contact-form--form {
  padding: 1.6rem 0;
}

.contact-form--img {
   
  
       aspect-ratio: 8 / 13;
}

}
		
	
	/* /// 812px */
	
	@media (max-width: 50.75em) {
		
		
		
		.flex-heading{
			
			display: flex;
			justify-content: center;
			gap: 1rem;
		}

		
	ul.header__nav--list {
  
	font-family: "Rubik", serif;
	
  font-size: 1.5rem;
  font-weight: 500;
 
  gap: 4.2rem;
}
	
.portfolio--text-box-heading h4 {
    font-size: 1.5rem;
}

.portfolio--text-box-secondary {
    padding: .75rem 1rem 0;
    gap: 1.2rem;
}
.portfolio--text-box-featured {
    gap: 1.5rem;
    padding: 1.2rem 0 1rem 2rem;
    background-color: var(--color-primary-lightest-1);
}

.portfolio--featured--link {
    align-self: flex-end;
    margin: 0 1rem 1.2rem 0;
}

.homePage-grid {

	grid-template-columns: 1fr;
	align-items: center;
	justify-content: center;
	
	padding: 2.8rem 1.2rem;


}

.homePage__hero--text-box {
	
	max-width: 120rem;	
	text-align: center;	
	align-items: center;
	gap:2rem;
	
	padding: 2rem 0;
}

.homePage--heading {

display: flex;
flex-direction: column;
align-items: center;

}



.homePage__hero--img img {
	
	max-width: 60%;

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 18px;
}

	.homePage__hero--img {
   justify-content: center;
    
}
		

.homePage__services--grid {

display: flex;
flex-direction: column;
}

.homePage__services--grid-box {

width:42rem;
padding: 2rem 1.4rem ;
}

h2.section-heading {
	
font-size: var(--text-xxlg);
font-weight: 500;
padding: 4rem 4rem 6rem;

}

.services--text-box {


width: 30rem;
}

.content-active {
	
	left:24rem;
}

.process__step--card {
	margin-bottom: 1rem;
	
	gap:0;
}

	.process__step--desc {
    font-size: var(--text-small);
     line-height: 1.15;
    padding: 0 1rem;
}

	.process__step--btn {
		
		padding: 1.2rem .75rem .5rem 1rem;
		
		font-size: 1.3rem;
		
	}
	
	.btn-inactive::before , .btn-active::before{
  background-image: none;
	display: none;
}

	.homepage__banner--wide-box h2 {
		
		padding: 0 2rem;
	}
	
	.homePage__banner-sub-heading {
		padding: 0 2rem;
    
}

.footer {
	
    background-color: var(--color-primary-darkest);
    padding: 2rem;
    border-top: 2px solid rgba(171, 199, 250, 0.804);
    margin-top: 8rem;
}



.footer--box {
   

	padding: 0 2rem;
	
	 
   grid-template-columns: 1.2fr repeat(3,1fr);
	 gap: 1rem;
  
}
	

.footer--box h4{
	
	font-size: var(--text-body);
	font-weight: 600;
	
	margin-bottom: 1rem;
}

.footer--box ul{	
	
	gap: .5rem;
	
	font-size: 1.1rem;	
}

.footer--box p{
	
	font-size: 1.1rem;
	
}

.footer--box div{
	
	height: 10rem;
}


.servicePage--grid {

    grid-template-columns:1fr;
   

		padding: 0 3.2rem;
}

.servicePage--box-heading--box h3 {
  font-size: var(--text-xlg);
}

.servicePage--box-details--box ul {
  height:auto;
  margin-top: 1rem;
  gap: .5rem;
	padding-left: 4rem;

}

.servicePage--box-includes li {
    font-size: 1.4rem;
 
    padding-left: 2rem;
    line-height: 1.35;
}

    .servicePage--box
 {
        gap: 4rem;
        padding: 0 0 2rem;
    }
		
		
	.aboutPage-image--box--1::after {
   
   display: none;
 
}	


.aboutPage-heading--grid {
	
	grid-template-columns: repeat(8,1fr);
	grid-template-rows: repeat(6,1fr);

    
}

  .aboutPage-heading--box {
			
  grid-column: 1/9;
	grid-row: 1/9;
}

.aboutPage-image--box {

grid-column: 5/9;
grid-row: 3/7;
}

.aboutPage-heading--box {

justify-content: stretch;

}

.aboutPage-list--box {
   width: 80%;
}

.aboutPage {
  
  margin-bottom: 1rem;
}
.aboutPage-list--box {
    width: 50%;
}

    .aboutPage-list--box ul {
    
    font-size: 1.2rem;
}

.aboutPage-heading--box--text {

gap: 2rem;
margin-bottom: 1.8rem;
}

.portfolio {
    margin-top: -6rem;
   
}

.portfolio--text-box-heading {
    /* position: relative; */
    display: flex;
		flex-direction: column;
		gap:1rem;
    /* align-items: center;
    justify-content: space-between; */
}

li.portfolio--skills-list-item {
  font-size: 1.15rem;
}
.portfolio--text-box-featured h4 {

font-size: var(--text-h4);
}

.portfolio--text-box-featured p {
  font-size: 1.2rem;
  line-height: 1.2;
}

 .portfolio--featured--link a:link, .portfolio--featured--link a:visited {
  font-size: 1.5rem;
  padding: .5rem 1.2rem;
}

.aboutPage-list--box ul {
   
    font-size: 1.15rem;  
 
    padding: 0 .65rem;
}

.aboutPage-heading--box--text {
   padding-right: 10rem;
	 gap:.75rem;
}

    .aboutPage-heading--box h2 {
  
    margin-bottom: .5rem;
		line-height: 1.1;
		
}

.footer--logo-box img{
	
	width: 85%;
	

}

.contact-form--img {
   
  
       aspect-ratio: 7 / 13;
}

.contact-form--form {
  padding: 1.6rem 3.2rem;
}




}

	 

/* /// 744px */

@media (max-width: 46.5em) {
	
	.contact-form--img {
   
  
       aspect-ratio: 6 / 13;
}

.contact-form--form {
  padding: 1.6rem 3.2rem;
}

.contact-heading-box {
   
    gap: 3.2rem;
    padding: 4rem 0;
   
    font-size: var(--text-h4);
    
}
.contact-text-box p {
  
    font-size: 1.6rem;
   
    line-height: 1.3;
		
		width: 87.5%;
 
}
	
}

	
/* /// 660px */

	@media (max-width: 41.25em) {
		


	.homePage--heading, .flex-heading p , .flex-heading span{	
	
		
		font-size: 2.8rem;
		line-height: 1;

	}
	
	
.homePage--sub-heading {
	
    font-size: var(--text-body);

    line-height: 1.1;
}

h2.section-heading {
	
font-size: var(--text-xxlg);
font-weight: 500;
padding: 3.2rem 0;
margin-bottom: 2rem;

text-align: center;

}

.homePage__services--grid-box {

width:auto;
height: auto;
padding: 2rem 1.4rem ;
}

.process__heading-box{
	
	text-align: center;
}

	.homePage__process {
 
  margin-bottom: 4rem;
	}

	.homePage__services{
		
		margin-bottom: 4rem;
	}	
	
	.content-hidden{
	
	display:flex;
	
	margin-bottom: 4rem;

}

.content-active{
	
	display:flex;	
	position: relative;
	
	left:0;
	margin-bottom: 4rem;

  
	
}

.process__step-text h3 {
    font-size: 1.4rem;
  
    margin-bottom: 1.4rem;
  
}

	.process__step--desc {
    font-size: 1.3rem;
     line-height: 1.05;
    padding: 0 1rem;
}

.process__step-card--left{
	
	display: none;
}
	

	.process__step--card {
grid-template-columns: 1fr;
}

.footer--box {	
	 
   grid-template-columns: repeat(3,1fr);
	 gap: 1rem;
  
}

.footer--logo-box{
	
	grid-column: 1/4;
	gap: .25rem;
	
	align-items: center;
	/* margin-bottom: 2rem; */
	
	margin: 0 auto 2rem;
	
}

.footer--logo-box img{
	
	width: 85%;
	
	margin-bottom: 0;
}

	
.footer--box div{
	
	height: auto;
}
	.footer--box p{
	
	font-size: 1.3rem;
	
}

ul.header__nav--list {
	
	gap: 2rem;
	font-size: 1.4rem;
}

.header__logo--box, .header__cta--box {
    flex: 0 0 25%;
}

.header__cta-link:link,
.header__cta-link:visited{

	
	font-family: "Poppins", sans-serif;
	font-weight: 500;
	
	font-size: 1.3rem;	
}

.homepage__banner--wide-box h2 {
		
	font-size: 2.3rem;
}

.homePage__banner-sub-heading {
	
	font-size: 1.7rem;
	

}
.homepage__banner--wide-box {
	
	gap: 1rem;
}

.servicesPage-heading-box p {
	
    font-size: var(--text-body);
		padding: 0 1rem;
}

.servicesPage-heading-box {
	
    padding: 4rem 0;
   
    font-size: var(--text-xlg);
  
  
}

.aboutPage-list--box {
    width: 65%;
}


.aboutPage-image--box {
    grid-column: 6 / 9;
    grid-row: 4 / 9;
}

.portfolio {
margin-top: 4rem;
}


.portfolio-grid {
   
    grid-template-columns:1fr 1fr;
   
    padding: 0 2rem;
}

.portfolio-site--featured {
    grid-column: 1 / 2;

    overflow: hidden;
		
		border-radius: 0;
		border-top-left-radius: 12px;
		border-top-right-radius: 12px;
  
}

.portfolio-secondary--img {
	
    width: 100%;
  
  
   
}

   .portfolio-display--none{
      display: none;
    }

		.portfolio--skills-list {
    display: none;
   
}

    .portfolio-card--grid {
        
        grid-template-columns: 1fr;
				
				gap: 0;
       
        
    }
		
		.portfolio--image-box-featured {
grid-row: 1/2;
}

.portfolio-featured--img {
   
     width: 100%;
    height: auto;
    aspect-ratio: 6 / 4;
    object-fit: cover;
    object-position: top;
    display: block;
}

.portfolio--heading-badge {
   flex-direction: column;
	 gap: 1rem;
}

    .portfolio--text-box-featured h4 {
        font-size: 1.5rem;
    }

  .portfolio--status-badge p {
      padding: .25rem .65rem;
    border-radius: 10px;
    color: #fff;
  
}

.portfolio--text-box-featured {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: .75rem 1rem 0;
    background-color: var(--color-primary-lightest-1);
}

    .portfolio--featured--link {
        align-self: center;
        margin: 0;
    }

		.portfolio-list--cta {
   
    justify-content: center;
}

.portfolio--tags{
	
	margin-bottom: 1rem;
}

.contact-form-grid {
 
  
    grid-template-columns: 1fr;
  
}

.contact-form--img {
   
  
       aspect-ratio: 15 / 10;
}

.contact-form--form {
  padding:  2rem;
}

.contact-form-box {
   
    padding: 0 6rem;
  
}



}
	
	
	


/* /// 550px */

@media (max-width: 34.4em) {

	.header {
		position: relative;
	}

	.header--box {
		padding: 0.5rem 2rem;
		/* gap: 4rem; */
		position: relative;
	}

	.header__nav--box {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		padding: 1.5rem 2rem 2rem 2rem;
		background-color: #fff;
		z-index: 20;
	}

	.header__nav--box.active {
		display: block;
	}

	.header__nav {
		width: 100%;
	}

	.header__nav--list {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 1.4rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.header__nav--item {
		width: auto;
	}

	.header__nav--link {
		display: inline-block;
		width: auto;
		font-size: 1.8rem;
	}

	.header__cta--box {
		display: none;
	}

	.header__logo--box {
		flex: 1;
	}

	.header__logo {
		margin-left: 3.6rem;
		width: 85%;
	}

	.header__hamburger--box {
		flex: 0 0 25%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 1rem 2rem;
	}

	.header__hamburger {
		border: none;
		background-color: transparent;
		padding: 0;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header__hamburger--icon {
		width: 3.4rem;
		height: 3.4rem;
		display: block;
	}
	
	
	/* // footer */
	
	.footer--box{
		
		grid-template-columns: 1fr 1fr;
		
	}
	
	 .footer--logo-box{
		
		grid-column: 1/3;
	 }
	
	
	.footer--links-box{
		
		display: none;
	}

.footer--box p {
	text-align: center;;

}

.homePage__services--grid-box {


padding: 1.2rem .8rem ;
}

.services--icon-box {
    width: 5rem;
    height: 5rem;
 
}

.services-icon {
    width: 2.4rem;
    height: 2.4rem;
   
}

    .homepage__banner--wide-box h2 {
        font-size: 2rem;
    }
		
		
		    .homePage__banner-sub-heading{
					
        font-size: 1.5rem;
    }

		.homePage__banner-p {
			
    font-size: 1.3rem;
   
}

.homePage__banner-p-1 {
    font-size: 1.4rem;
    font-weight: 500;
 
    letter-spacing: .5px;
    
}

.servicesPage--link p {
   padding: 0 2rem;
	 text-align: center;
}

.servicePage--box-details--box p {
   padding: 0 2rem;
}

.servicesPage-heading-box {
	
    padding: 3.2rem 0;
   
    font-size: 1.8rem;;
  
  
}
.servicePage--box-heading--box h3 {
    font-size: var(--text-lg);
}
		
.servicesPage-heading-box p:last-child {
   margin-bottom: 3rem;
}    

.servicePage--grid {
       
        gap: 3.2rem;
       
    }
		
		    .aboutPage-heading--box--text {
        padding-right: 2rem;
      
    }
		
			span.aboutList-remove {
				
				display: none;
			}
			
			.aboutPage-list--box {
        width: 45%;
    }
		
		    .aboutPage-list--box ul {
        font-size: 1.3rem;
        padding: 0 1.8rem 0 3rem;
    }
		
		    .aboutPage--img {
        width: 91%;
        margin-left: -3rem;
    }
		
		    .portfolio--text-box-featured p {
      text-align: center;
    }
		
		    .contact-heading-box {
        gap: 3rem;
        padding: 3.2rem 0;
        font-size: var(--text-xlg);
    }
		
		    .contact-text-box p {
        font-size: 1.4rem;
        line-height: 1.25;
    }
		
}






/* /// 490px */

@media (max-width: 30.62em) {
	
	
	.portfolio-grid {
		grid-template-columns: 1fr;
		padding: 0 7.2rem;
		gap: 5.2rem;
	}
	
	.portfolio-list--cta {
		
		margin-bottom: 1.8rem;
	}
	
	
	.aboutPage--img {
		width: 100%;
		
	}
	
	.aboutPage-list--box {
		width: 55%;
	}
	
	.portfolio-grid {
		
		padding: 0 8rem;
		gap: 4.8rem;
	}
	
	.portfolio-heading--box {
		margin-bottom: 4rem;
	}
	
	
	    .contact-heading-box {
        gap: 2rem;
        padding: 2rem 0;
        font-size: var(--text-lg);
    }
		

	
}

/* /// 425px */


@media (max-width: 26.5em) {
	
		.portfolio-grid {
		
		padding: 0 6rem;
		gap: 3.6rem;
	}
	
	    .aboutPage {
        padding-top: 3rem;
       
    }
		


.contact-form--form {
  padding:  1.2rem;
}

.contact-form-box {
   
    padding: 0 3.2rem;
  
}

	
	
}


	
/* /// 380px */

	@media (max-width: 23.75em) {
		
		
		
	.homePage--heading, .flex-heading p , .flex-heading span{	
	
		
    font-size: 2.6rem;
    line-height: 1;

	}
	
		


.homePage--sub-heading {
    font-size: 1.4rem;
    line-height: 1.2;
}

.homepPage-tagline {
	
	font-size: 1.3rem;
}

.homePage__hero--img img {
	
  max-width: 70%;

}

.homePage__process {
    padding: 2rem 1.6em .5rem;
    border: none;
}

.process__step-text h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
		
.process__step--desc {
	font-size: 1.2rem;
	line-height: 1.1;
	padding: 0 .75rem;
}

.footer {

  padding: 2rem 0;
 
  margin-top: 8rem;
}

  .footer--box {
  
  gap: 0.1rem;
}

.footer--box div {
    height: 10rem;
}

.services--text-box {
  width: 24rem;
	font-size: 1.2rem;
}

  .services--heading-box h3 {
  font-size: var(--text-body);
 
}

    .servicePage--box-includes li {
        font-size: 1.2rem;
       
    }

.servicePage--box-details--box ul {

margin-top: .5rem;

padding-left: 2.4rem;
}

.servicesPage-heading-box p:last-child {
   font-size: 1.5rem;
}

		.portfolio-grid {
		
		padding: 0 4rem;
		
	}
	
.about-icon {
    width: 1.6rem;
}

    .aboutPage-list--box ul {
        font-size: 1.2rem;
        padding: 0 1.4rem 0 2rem;
    }
		
		.aboutPage-heading--box h2 {
       font-size: 2.2rem;
    }
		
		    .aboutPage-heading--box {
        gap: 1.2rem;
    }

		h3.portfolio-heading {
    font-size: var(--text-lg);
    font-weight: 500;
    padding-bottom: .5rem;
}


.portfolio-heading--box p {
    font-size: 1.4rem;
}
}

	
/* /// 345px */

	@media (max-width: 21.56em) {
		
		    .aboutPage-list--box ul {
        font-size: 1.2rem;
        padding: 0 1rem 0 1.2rem;
    }
		.portfolio-grid {
        padding: 0 2.4rem;
    }
		
		    .aboutPage-image--box--1 {
    
        justify-content: stretch;
				margin-left: 2rem;
    }
		
		  

	}
	
	
	/* /// 300px */

	@media (max-width: 18.75em) {
		
		    .aboutPage-heading--grid {
     display: flex;
		 flex-direction: column		 ;
    }
		
		    .aboutPage-list--box {
        width: 100%;
    }
		
		    .aboutPage--img {
        width: 90%;
        margin-left:0;
    }
		    .portfolio-grid {
        padding: 0 1rem;
        gap: 3rem;
    }
		
	}