.extender {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh; /* Takes full viewport height, handling mobile browser bars nicely */
}

#footer {
	width: 100%;
	float: left;
	height: 45px;
	background-color: black !important;
	text-align: center;
	vertical-align: text-bottom;
	z-index: 9990;
	margin: 0;
  
}

#delimiter {
	display: inline;
}

#footBreak {
	display: none;
}

.largeFont{
	font-size: 1.5em;
}

.mediumFont {
	font-size: 1.2em;
}

.timesFont {
	font-family: "Times New Roman", serif;
}

.monacoFont {
	font-family: "Monaco", monospace;
}

.boldFont{
	font-weight: bold;
}

.centerText{
	text-align: center;
}

.menuButton {
	border: 4px solid grey;
	border-radius: 15px;
	color: white;
	font-weight: bold;
	text-decoration: none;
	min-width: 225px;
	min-height: 56px;
}

.button {
	width: 25%;
	border: 4px solid grey;
	border-radius: 15px;
	color: white;
	font-weight: bold;
	text-decoration: none;
	min-width: 225px;
	min-height: 56px;
}

.button:hover {
	color: white;
}

.whiteMenu:hover {
	color: white;
}

.navButtonPosition {
	padding-top: 11px;
	font-size:18px;
}

.navText {
	width: 100%;
	float: left;
	display: flex;
	justify-content: center;
}

.navImage {
	width: 25%;
	float: left;
	height: auto;
	display: flex;
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
}

.navSection {
	width: 25%;
	float: left;
	display: flex;
	justify-content: center;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
}

.navMenu {
	width: 25%;
	float: left;
	display: flex;
	justify-content: center;
	margin-top: 1em;
	margin-bottom: 1em;
	padding-top: 1em;
	padding-bottom: 1em;
}

.bulletItem {
	display: inline;
}

.breakItem {
	display: none;
}

.noTextDecoration {
	text-decoration: none;
}

.big-img-border {
	border-radius: 25px;
	border: 7px solid white;
}

.footerRoundedCorners {
	border: 5px solid black;
	border-radius: 20px;
}

.rightFloat {
	width: 75%;
	height: 75%;
	float: right;
	padding-top: 11px;
	border-radius: 15px;
}

/* Normal image state */
.zoomable-image {
  cursor: pointer;
  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease; /* Smooth transition */
}

/* Centered and enlarged state */
.zoomable-image.enlarged {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5); /* Centers perfectly and makes it 2x bigger */
  z-index: 9999; /* Sits on top of all other content */
  max-width: 30vw; /* Prevents it from going off-screen on mobile */
  max-height: 60vh;
  object-fit: contain;
  background-color: black;
}

.divService1{
	width: 15%;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

.divService3{
	width: 6%;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

.divService5{
	width: 15%;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

.divService2 {
	width: 32%;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

.divService4 {
	width: 32%;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

.btnService{
	background-color: black;
	color: white;
	transition: 0.3s;
}

.btnService:hover{
	background-color: black;
	color: lightgreen;
}

#softwareRepair {
	border-radius: 15px;
	border-style: solid;
	border-width: 6px;
	width: 100%;
}

#computerRepair {
	border-radius: 15px;
	border-style: solid;
	border-width: 6px;
	width: 100%;
}

.btnService:hover{
	background-color: black;
	color: lightgreen;
}

.hoverColor{
	color: white;
	transition: 0.3s;
}

.hoverColor:hover{
	color: lightgreen;
	opacity: 0.95;
}


/* Medium devices (tablets, less than 992px)*/
@media only screen and (max-width: 991.98px) {
	
	.navImage {
		width: 100%;
		float: left;
		height: auto;
		display: flex;
		text-align: center;
		padding-top: 1em;
		padding-bottom: 1em;
	}

	.navSection {
		width: 0%;
		display: none;
		float: left;
		justify-content: center;
		margin-top: 0em;
		margin-bottom: 0em;
		padding-top: 0em;
		padding-bottom: 0em;
	}

	.navMenu {
		width: 100%;
		float: left;
		display: flex;
		justify-content: center;
		margin-top: 1em;
		margin-bottom: 1em;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	
	.rightFloat {
		width: 75%;
		height: 75%;
		float: left;
	}
		 
	#delimiter {
		display: none;
	}

	#footBreak {
		display: inline;
	}
	
	.bulletItem {
		display: none;
	}
	
	.breakItem{
		display: inline;
	}
	
	/* Normal image state */
	.zoomable-image {
	  cursor: pointer;
	  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease; /* Smooth transition */
	}

	/* Centered and enlarged state */
	.zoomable-image.enlarged {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%) scale(1.5); /* Centers perfectly and makes it 2x bigger */
	  z-index: 9999; /* Sits on top of all other content */
	  max-width: 98vw; /* Prevents it from going off-screen on mobile */
	  max-height: 98vh;
	  object-fit: contain;
	  background-color: black;
	}
	
	#computerRepair{
		width: 85%;
	}
	
	#softwareRepair{
		width: 85%;
	}

}

/* Small devices (landscape phones, less than 768px) */
@media only screen and (max-width: 767.98px) { 

	.navImage {
		width: 100%;
		float: left;
		height: auto;
		display: flex;
		text-align: center;
		padding-top: 1em;
		padding-bottom: 1em;
	}

	.navSection {
		width: 0%;
		display: none;
		float: left;
		justify-content: center;
		margin-top: 0em;
		margin-bottom: 0em;
		padding-top: 0em;
		padding-bottom: 0em;
	}

	.navMenu {
		width: 100%;
		float: left;
		display: flex;
		justify-content: center;
		margin-top: 1em;
		margin-bottom: 1em;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	
	.rightFloat {
		width: 75%;
		height: 75%;
		float: right;
		padding-top: 17px;
		border-radius: 15px;
	}
		 
	#delimiter {
		display: none;
	}

	#footBreak {
		display: inline;
	}
	
	.bulletItem {
		display: none;
	}
	
	.breakItem{
		display: inline;
	}
	
	/* Normal image state */
	.zoomable-image {
	  cursor: pointer;
	  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease; /* Smooth transition */
	}

	/* Centered and enlarged state */
	.zoomable-image.enlarged {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%) scale(1.5); /* Centers perfectly and makes it 2x bigger */
	  z-index: 9999; /* Sits on top of all other content */
	  max-width: 98vw; /* Prevents it from going off-screen on mobile */
	  max-height: 98vh;
	  object-fit: contain;
	  background-color: black;
	}
	
	#computerRepair{
		width: 85%;
	}
	
	#softwareRepair{
		width: 85%;
	}

}





/* X-Small devices (portrait phones, less than 576px) */
 @media (max-width: 575.98px) {
	 
	.navImage{
		width: 100%;
		float: left;
		height: auto;
		display: flex;
		text-align: center;
		padding-top: 1em;
		padding-bottom: 1em;
	}

	.navSection{
		width: 0%;
		display: none;
		float: left;
		justify-content: center;
		margin-top: 0em;
		margin-bottom: 0em;
		padding-top: 0em;
		padding-bottom: 0em;
	}

	.navMenu{
		width: 100%;
		float: left;
		display: flex;
		justify-content: center;
		margin-top: 1em;
		margin-bottom: 1em;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	
	.rightFloat {
		width: 75%;
		height: 75%;
		float: right;
		padding-top: 17px;
		border-radius: 15px;
	}
		 
	#delimiter {
		display: none;
	}

	#footBreak {
		display: inline;
	}
	
	.bulletItem {
		display: none;
	}
	
	.breakItem{
		display: inline;
	}
	
	/* Normal image state */
	.zoomable-image {
	  cursor: pointer;
	  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease; /* Smooth transition */
	}

	/* Centered and enlarged state */
	.zoomable-image.enlarged {
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%, -50%) scale(1.5); /* Centers perfectly and makes it 2x bigger */
	  z-index: 9999; /* Sits on top of all other content */
	  max-width: 98vw; /* Prevents it from going off-screen on mobile */
	  max-height: 98vh;
	  object-fit: contain;
	  background-color: black;
	}
	
	#computerRepair{
		width: 85%;
	}
	
	#softwareRepair{
		width: 85%;
	}
	
}