/* For General Size options */
* {
  box-sizing: border-box;
  transition: 0.5s;
  }

/*Main Parts of the Website*/
html, body
{
	margin:0 0 0 0;
	padding:0 0 0 0;
	min-height: 100%;
	width:100%;
	overflow-x: hidden;
	background-color: #f1f1f1;
}

body {
	font-family: Arial, Helvetica, sans-serif;
  font-size:1;
  color:white;
}

nav
{
	z-index:9;
	width:100%;
}

/*Important Items for JS*/
.hide
{
	display:none !important;
	appearance:none !important;
}
.absolute
{
	position:absolute !important;
}
.relative
{
	position:relative !important;
}
.fixed
{
	position:fixed !important;
}
/*Recurring*/
.clickable
{
	cursor:pointer;
}
.no-decoration
{
	text-decoration:none;
}
.link
{
	color:white;
}
.link:hover
{
	color:red;
	border-bottom:1px red solid;
}
/*Flex Content*/
.flex-normal
{
	display:flex;
}
.flex-nowrap
{
	display:flex;
	flex-wrap:nowrap;
}
.flex-wrap
{
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	margin: 0 -16px;
}
.flex-down
{
	display:flex;
	flex-direction:column;
}
.flex-container
{
	display:flex;
	margin-left:10%;
	margin-right:10%;
}
.flex-50 {
	-ms-flex: 50%; /* IE10 */
	flex: 50%;
	padding: 0 16px;
  }
/*Other Containers*/
.display-block
{
	display:block;
}
/*Sizes*/
.split-three-width
{
	width:30%;
	height:fit-content;
}
.split-four-width
{
	width:25%;
	height:fit-content;
}
.max-width
{
	width:100%;
	height:fit-content;
}
.p33-width
{
	width:33% !important;
	height:fit-content !important;
}
.p50-content
{
	width:50% !important;
	height:50% !important;
}
.p70-content
{
	width:70% !important;
	height:70% !important;
}
.fit-content
{
	width:fit-content;
	height:fit-content;
}
.max-content
{
	width:100% !important;
	height:100% !important;
}
.min-content
{
	min-width:min-content !important;
	min-height:min-content !important;
}
.max-height
{
	max-height:fit-content !important;
}
.min-height
{
	min-height:100% !important;
}
.width50_p
{
	max-width:50%;
	height:fit-content;
}
.h-max_w-30
{
	height:100%;
	width:30%;
}
.flex-grow
{
	flex-grow:1;
}
/*Positions*/
.center-content
{
	justify-content:center;
	align-items:center
}
.center-text
{
	text-align:center;
}
.center
{
  margin:auto;
  top: 50%;
  transform: translate(0, -50%);
	justify-content:center;
	align-self:center;
}
.align-center
{
	align-items:center;
}
.justify-center
{
	justify-content:center;
}
.bottom-center
{
	left:50%;
	bottom:10px;
}
.left
{
	float:left;
}
.right
{
	float:right;
}
.top-right
{
	top:10px;
	right:10px;
}
.bottom
{
	bottom:10px;
}
/*Background Colours*/
.black
{
	background:black;
}
.softblack
{
	background:#2f2f2f;
}
.white
{
	background:white;
}
.gray
{
	background:#333;
}
.red
{
	background:#e61d21;
}
/*w3Schools green*/
.green
{
	background:#04AA6D;
}
/*Text Colours*/
.black-text
{
	color:black !important;
}
.red-text
{
	color:#e61d21 !important;
}
.white-text
{
	color:white !important;
}
/*Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic&display=swap');

.font-KufiArabic {
	font-family: 'Noto Kufi Arabic', sans-serif !important;
}
.font-Calibri {
	font-family: Calibri, Arial, sans-serif !important;
}
/*Font Sizes*/
.font-1
{
	font-size:1rem !important;
}
.font-1_5
{
	font-size: 1.5rem !important;
}
.font-2
{
	font-size:2rem !important;
}
.font-3
{
	font-size:3rem !important;
}
.font-4
{
	font-size:4rem !important;
}
.font-5
{
	font-size:5rem !important;
}
/*Padding*/
.pad0
{
	padding:0px !important;
}
.pad5
{
	padding:5px !important;
}
.pad5_p
{
	padding:5% !important;
}
.pad10
{
	padding:10px !important;
}
.pad10_p
{
	padding:10% !important;
}
.pad20
{
	padding:20px !important;
}
.pad25
{
	padding:25px !important;
}
.pad50
{
	padding:50px !important;
}
.pad100
{
	padding:100px !important;
}
/*Margin*/
.marg0
{
	margin:0 !important;
}
.marg5
{
	margin:5px !important;
}
.marg10
{
	margin:10px !important;
}
.marg-left-10
{
	margin-left:10px !important;
}
.marg50
{
	margin:50px !important;
}
/*Border*/
.no-border
{
	border:none;
}
.border-bottom
{
	border-bottom: 1px white solid !important;
}
.border-grey
{
	border: 1px grey solid !important;
}
.border-black-2
{
	border: 2px black solid !important;
}
.textbox
{
	width:100%;
	color:grey;
	background-color:transparent;
	border:none;
	border-bottom: 1px grey solid !important;
}
.border-rad-10
{
	border-radius:10px;
}
.border-rad-50
{
	border-radius:50px;
}
.border-rad-100
{
	border-radius:100px;
}
.border-rad-circle
{
	border-radius:100%;
}
.border-head
{
	border:5% solid white;
	width:5%;
}
/*Text Formating*/
.text-specifics
{
	word-spacing:1%;
}
/*Box Shadow*/
.shadow
{
	box-shadow: 0px 4px 100px 10px #000000;
}
.shadow-description
{
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.boxshadow
{
	box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.25);
}
/*Overflow*/
.no-overflow
{
	overflow:hidden;
}
/*Z-Index Position*/
.popups
{
	z-index:15;
}
.top
{
	z-index:10;
}
.middle
{
	z-index:5;
}
.ground
{
	z-index:0;
}

.inquiryFormButton select, textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	resize: vertical;
  }
  
  .inquiryFormButton label {
	padding: 12px 12px 12px 0;
	display: inline-block;
  }
  
  .inquiryFormButton{
	background-color: #04AA6D;
	color: white;
	padding: 12px 20px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	float: right;
  }
  
  .inquiryFormButton:hover {
	background-color: #45a049;
  }
  
  .containerContactUs {
	border-radius: 5px;
	background-color: #d5d5d5;
	padding: 20px;
	width:50%;
  }
  
  .col-25 {
	float: left;
	width: 25%;
	margin-top: 6px;
  }
  
  .col-75 {
	float: left;
	width: 75%;
	margin-top: 6px;
  }
  
  /* Clear floats after the columns */
  .row::after {
	content: "";
	display: table;
	clear: both;
  }
  
  /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
	.col-25, .col-75, input[type=submit] {
	  width: 100%;
	  margin-top: 0;
	}
	.containerContactUs
	{
		width:100%;
	}
  }

#radio_buttons input[type="radio"]
{
	appearance: none;
	background-color:#e61d21;
	border:5px solid #e61d21 !important;
	height:20px;
	width: 20px;
	border-radius:100px;
}
#radio_buttons input[type="radio"]:checked
{
	background-color:black !important;
}
#radio_buttons input[type="radio"]:hover
{
	background-color: grey !important;
}
.radio_colour input[type="radio"]
{
	appearance: none;
	height:25px;
	width:25px;
	border-radius:100px;
	border:1px solid black !important;
}
.radio_colour input[type="radio"]:checked
{
	border:3px solid black !important;
}

.radio_lightblue{ background-color:lightblue; }
.radio_lightgreen{ background-color:lightgreen; }
.radio_forest{ background-color:darkgreen; }
.radio_darkblue{ background-color:darkblue; }
.radio_navy{ background-color:navy; }
.radio_burgundy{ background-color: #800020; }
.radio_pink{ background-color: deeppink; }
.radio_royal_blue{ background-color: #4169e1; }

.radio_silver{ background-color: #c0c0c0; }
.radio_white{ background-color:white; }
.radio_black{ background-color:black; }
.radio_blue{ background-color: #0000FF; }
.radio_orange{ background-color:orange; }
.radio_green{ background-color: #229322; }
.radio_red{ background-color: #FF0000; }
.radio_purple{ background-color: purple; }
.radio_brown{ background-color: #623908; }
.radio_yellow{ background-color:yellow; }

.radio_beige{ background-color: #f7e7ce; }
.radio_maroon{ background-color: #8d0606; }
.radio_grey{ background-color: #777676; }

/*Testing Stuff*/
::-webkit-scrollbar {
	height: 4px;              /* height of horizontal scrollbar ← You're missing this */
	width: 10px;               /* width of vertical scrollbar */
	border: 5px solid #d5d5d5;
  }
  ::-webkit-scrollbar-track {
	box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);
  }
  ::-webkit-scrollbar-thumb {
	background-color: #e61d21;
	border-radius:10px;
	outline: 1px solid #2f2f2f;
  }
/* When Resizing to a more appropriate size for some content */
@media screen and (max-width: 800px) {
  .link{
    display:none !important;
  }
  #burger
  {
	display:block !important;
  }
  
	ul.topnav li.right, 
	ul.topnav li {float: none;}
}