/* start of pdnStyle */
.pb8 { padding-bottom: 8px; }
.pb16 { padding-bottom: 16px; }
.pb32 { padding-bottom: 32px;}

.pt8 {	padding-top: 8px;}
.pt16 {	padding-top: 16px;}
.pt32 {	padding-top: 32px;}

.pl8 {	padding-left: 8px;}
.pl16 {	padding-left: 16px;}
.pl32 {	padding-left: 32px;}

.pr8 {	padding-right: 8px;}
.pr16 {	padding-right: 16px;}
.pr32 {	padding-right: 32px;}

.mb8 { margin-bottom: 8px; }
.mb16 { margin-bottom: 16px; }
.mb32 { margin-bottom: 32px;}

.mt0 {	margin-top: 0px;}
.mt8 {	margin-top: 8px;}
.mt16 {	margin-top: 16px;}
.mt32 {	margin-top: 32px;}

.ml4 {	margin-left: 4px;}
.ml8 {	margin-left: 8px;}
.ml16 {	margin-left: 16px;}
.ml32 {	margin-left: 32px;}

.mr4 {	margin-right: 4px;}
.mr8 {	margin-right: 8px;}
.mr16 {	margin-right: 16px;}
.mr32 {	margin-right: 32px;}

.w5 { width: 5%; }
.w10 {	width: 10%; }
.w20 {	width: 20%; }
.w25 {	width: 25%; }
.w30 {	width: 30%; }
.w40 {	width: 40%; }
.w50 {	width: 50%; }
.w60 {	width: 60%; }
.w70 {	width: 70%; }
.w75 {	width: 75%; }
.w80 {	width: 80%; }
.w90 {	width: 90%; }
.w95 {	width: 95%; }
.w100 {	width: 100%; }

.cOne { color: #C14214; }
.cTwo { color: #329FAD; }
.cThree { color: #231F20; }

.bgcOne { background-color: #C14214; }
.bgcTwo { background-color: #329FAD; }
.bgcThree { background-color: #231F20; }

.cRed {
	color: red;
}

.cBlue {
	color: blue;
}

.cGreen {
	color: green;
}

.cYellow {
	color: yellow;
}

.cOrange {
	color: #ffa500;
}

.cViolet {
	color: #EE82EE;
}

.cPink {
	color: pink;
}

.cBrown {
	color: #A52A2A;
}

.cKhaki {
	color: #F0E68C;
}

.cTan {
	color: #D2B48C;
}

.cWhite {
	color: #fff;
}

.cBlack {
	color: #000;
}

.aLeft {
	text-align: left;
}

.aRight {
	text-align: right;
}

.aCenter {
	text-align: center;
}

.btnDo {
	background-color: #F15A22;
	color: white;
} /* type orange */
.btnCllBlue {
	background-color: #329FAD;
	color: white;
} /* type green */
.btnCllBlack {
	background-color: #231F20;
	color: white;
} /* type black */
.bgCllBlue {
	background-color: #329FAD;
}
/* end of pdnStyle */

/* buttons by DS */
/* Base button styles for all custom buttons */
.btnOne, .btnTwo, .btnThree {
	border: none;
	border-radius: 4px;
	font-weight: 500;
	padding: 8px 24px;
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	display: inline-block; /* Important for <a> tags */
	text-decoration: none; /* Remove underline from <a> tags */
	text-align: center;
	cursor: pointer;
	line-height: 1.5;
	vertical-align: middle;
	user-select: none;
	margin-bottom: 8px;
}

/* Remove all outlines, borders, and shadows on focus */
.btnOne:focus, .btnTwo:focus, .btnThree:focus, .btnOne:active, .btnTwo:active,
	.btnThree:active {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
}

/* ======================
   BUTTON ONE: #F15A22 (Orange)
   ====================== */
.btnOne {
	background-color: #F15A22;
	color: white;
}

.btnOne:hover {
	background-color: #D94E1A;
	color: white;
	text-decoration: none;
}

.btnOne:focus, .btnOne:active {
	background-color: #C14214;
	color: white;
}

/* ======================
   BUTTON TWO: #329FAD (Teal)
   ====================== */
.btnTwo {
	background-color: #329FAD;
	color: white;
}

.btnTwo:hover {
	background-color: #2B8A96;
	color: white;
	text-decoration: none;
}

.btnTwo:focus, .btnTwo:active {
	background-color: #24757F;
	color: white;
}

/* ======================
   BUTTON THREE: #231F20 (Dark Gray)
   ====================== */
.btnThree {
	background-color: #231F20;
	color: white;
}

.btnThree:hover {
	background-color: #1A1617;
	color: white;
	text-decoration: none;
}

.btnThree:focus, .btnThree:active {
	background-color: #110F10;
	color: white;
}

/* ======================
   DISABLED STATES
   ====================== */
.btnOne:disabled, .btnTwo:disabled, .btnThree:disabled, .btnOne.disabled,
	.btnTwo.disabled, .btnThree.disabled {
	opacity: 0.65;
	cursor: not-allowed;
	pointer-events: none;
}

/* ======================
   SIZE VARIATIONS (Optional)
   ====================== */
/* Large buttons */
.btnOne.btnLg, .btnTwo.btnLg, .btnThree.btnLg {
	padding: 12px 30px;
	font-size: 1.1rem;
}

/* Small buttons */
.btnOne.btnSm, .btnTwo.btnSm, .btnThree.btnSm {
	padding: 6px 16px;
	font-size: 0.875rem;
}

/* ======================
   BUTTON WITH ICONS
   ====================== */
.btnOne i, .btnTwo i, .btnThree i {
	margin-right: 8px;
}

.btnOne i.faRight, .btnTwo i.faRight, .btnThree i.faRight {
	margin-right: 0;
	margin-left: 8px;
}

/* ======================
   FOCUS ACCESSIBILITY (Optional but recommended)
   ====================== */
/* Alternative: Subtle focus indicator for accessibility */
.btnOne:focus-visible, .btnTwo:focus-visible, .btnThree:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.5) !important;
	outline-offset: 2px;
}

/* start of fonts */
/* ===========================================
   NEUE PLAK FONT FACE DECLARATIONS
   =========================================== */
@font-face {
	font-family: "Neue Plak";
	src: url('../assets/fonts/NeuePlak-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Plak";
	src: url('../assets/fonts/NeuePlak-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Plak";
	src: url('../assets/fonts/NeuePlak-Thin.ttf') format('truetype');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Plak";
	src: url('../assets/fonts/NeuePlak-UltraLight.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Plak";
	src: url('../assets/fonts/NeuePlak-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Plak";
	src: url('../assets/fonts/NeuePlak-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Plak";
	src: url('../assets/fonts/NeuePlak-ExtraBlack.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Neue Plak Text";
	src: url('../assets/fonts/NeuePlakText-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ===========================================
   TEXT CLASSES USING NEUE PLAK
   =========================================== */

/* Your requested class */
.txt {
	font-family: sans-serif;
	font-weight: 400; /* Regular weight by default */
}
/* Optional weight classes for convenience */
.fw100 { font-weight: 100; }
.fw200 { font-weight: 200; }
.fw300 { font-weight: 300; }
.fw400 { font-weight: 400; }
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }
.fw800 { font-weight: 800; }
.fw900 { font-weight: 900; }

.fsOne { font-size: 16px; }
.fsTwo { font-size: 28px; }

.fs16 { font-size: 16px; }
.fs16 { font-size: 16px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }
.fs22 { font-size: 22px; }
.fs24 { font-size: 24px; }
.fs26 { font-size: 26px; }
.fs28 { font-size: 28px; }
.fs30 { font-size: 30px; }
.fs32 { font-size: 32px; }
.fs34 { font-size: 34px; }
.fs36 { font-size: 36px; }
.fs38 { font-size: 38px; }
.fs40 { font-size: 40px; }
.estimateForm {
	border-radius: 10px;
          backdrop-filter: blur(5px);
          box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	/* #33949C 51,148,156 not bad this one*/
	background: rgba(50,159,173,0.4);
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	padding: 20px 30px;
}
.torForm {
	border-radius: 16px;
	backdrop-filter: blur(5px);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	/* #33949C 51,148,156 not bad this one*/
	background: rgba(241,90,34,0.9);
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	padding: 30px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}