/* ....................FONTS  ..........................*/

/* RUBIK 

  src: url('/public/font/google/rubik/Rubik-Black.ttf') format('truetype')
  src: url('/public/font/google/rubik/Rubik-BlackItalic.ttf') format('truetype') 
  src: url('/public/font/google/rubik/Rubik-Bold.ttf') format('truetype')
  src: url('/public/font/google/rubik/Rubik-BoldItalic.ttf') format('truetype')
  src: url('/public/font/google/rubik/Rubik-ExtraBold.ttf') format('truetype')
   src: url('/public/font/google/rubik/Rubik-ExtraBoldItalic.ttf') format('truetype')
   src: url('/public/font/google/rubik/Rubik-Italic.ttf') format('truetype')
   src: url('/public/font/google/rubik/Rubik-Light.ttf') format('truetype') 
   src: url('/public/font/google/rubik/Rubik-LightItalic.ttf') format('truetype')
   src: url('/public/font/google/rubik/Rubik-Medium.ttf') format('truetype')
   src: url('/public/font/google/rubik/Rubik-MediumItalic.ttf') format('truetype') 
   src: url('/public/font/google/rubik/Rubik-Regular.ttf') format('truetype')
   src: url('/public/font/google/rubik/Rubik-SemiBold.ttf') format('truetype')
   src: url('/public/font/google/rubik/Rubik-SemiBoldItalic.ttf') format('truetype') */

@font-face {
  font-family: 'Rubik-Light';
  src: url('/public/font/google/rubik/Rubik-Light.ttf') format('truetype'); 
}

@font-face {
  font-family: 'Rubik-Bold';
  src: url('/public/font/google/rubik/Rubik-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Rubik-Regular';
  src: url('/public/font/google/rubik/Rubik-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Rubik-Medium';
  src: url('/public/font/google/rubik/Rubik-Medium.ttf') format('truetype');
}


/* ............................Block level font styles..................... */		
h1 	{
	font-size:clamp(2rem, 5vw, 2.8rem);
	font-weight: 500;
	font-family: Rubik-Bold, sans-serif;
	margin: 0;
	color: var(--darkgreycolor);
}
h2 	{
	font-size:clamp(1.6rem, 3.5vw, 2.2rem); 
	font-weight: 400;
	font-family: Rubik-Bold, sans-serif;
	margin: 0;
	color: var(--darkgreycolor);
}	
h3 	{
	font-size:clamp(1.4rem, 2.5vw, 1.8rem);
	font-weight: 400;
	font-family: Rubik-Bold, sans-serif;
	margin: 0;
	color: var(--darkgreycolor);
}	
h4 	{
	font-size:clamp(1.2rem, 2vw, 1.4rem);
	font-weight: 400; 
	font-family: Rubik-Bold, sans-serif; 
	margin: 0;
	color: var(--darkgreycolor);
}  
h5 	{
	font-size:clamp(1rem, 1.2vw, 1.2rem); 
	font-weight: 300;
	font-family: Rubik-Light, sans-serif; 
	margin: 0;
	color: var(--darkgreycolor);
}	
h6 	{
	font-size:clamp(0.9rem, 1vw, 1rem);
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif;
	margin: 0;
	color: var(--darkgreycolor);
}
p  	{
	font-size:clamp(1rem, 1.1vw, 1.2rem); 
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif;
	margin: 0;
	color:var(--darkgreycolor);
	line-height:1.5;
}
li 	{
	font-size:clamp(1rem, 1.1vw, 1.2rem); 
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif; 
	margin: 0;
	color:var(--darkgreycolor);
	line-height:1.5;
} 
table 	{
	font-size:clamp(1rem, 1.1vw, 1.2rem);
	font-weight: 300; 
	font-family: Rubik-Light, sans-serif;
}

/* ............Not block or inline  ....................................*/

th 		{font-size:1.2rem; font-weight: 400; font-family: Rubik-Light, 	sans-serif;}	
td 		{font-size:1.2rem; font-weight: 300; font-family: Rubik-Light, 	sans-serif;}	


legend	{
	font-size:1.2rem;
	font-weight: 400; 
	font-family: Rubik-Bold, sans-serif;
	color:var(--darkgreycolor);
}


/* .............Inline styling so phase out ....................*/

label 	{
	font-family: Rubik-Light, sans-serif;
	color:var(--darkgreycolor);
} 

option	{font-size:1.2rem; font-weight: 300; font-family: Rubik-Light, 	sans-serif;}


/* .............. inline-block size set by global.css ...........................*/

select	{
	font-family: Rubik-Light, sans-serif;
}

input 	{
	font-family: Rubik-Light, sans-serif;
} 

/*...................................HYPERLINKS................................. */

.myHyperlink a{
	text-decoration: underline; 
   	font-size: inherit;
	font-weight: inherit;
	opacity:1;
	font-family: inherit;
	color: inherit; /* Set text color (use your preferred color) */
	white-space: nowrap; /* Prevent text from wrapping */
}	


/* Hover state */
.myHyperlink a:hover {
    text-decoration: none; 
    transition: color 0.3s ease-in-out; /* Smooth color transition */
}


/*...................................FORM VALIDATION................................. */

.invalid-feedback {
	color:var(--redcolor);
	font-weight:300;
	font-size: clamp(1rem, 1.1vw, 1.2rem);
	line-height: 1.5;
	font-family: Rubik-Light;
	display: block;
}	

/*...................................OTHER................................. */

p.white-text {
	color: var(--whitecolor);
}