@font-face {
	font-family: 'Poppins';
	src: url('https://www.precitools-it.com/2025-fonts/Poppins-Regular.woff') format('woff');
	font-weight: 400; /* normal */
	font-style: normal;
	font-display: swap;
	}
@font-face {
	font-family: 'Poppins';
	src: url('https://www.precitools-it.com/2025-fonts/Poppins-Medium.woff') format('woff');
	font-weight: 500; /* semi-bold */
	font-style: normal;
	font-display: swap;
	}
@font-face {
	font-family: 'Poppins';
	src: url('https://www.precitools-it.com/2025-fonts/Poppins-Bold.woff') format('woff');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	font-synthesis: weight; /* allow browser to fake bold */
	}	
		  
* { 
	box-sizing: border-box; margin: 0; padding: 0; 
	}
	
body {
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 400;  /* default weight */
	overflow-wrap: anywhere;
	}
b, strong {
    font-family: 'Poppins', Arial, sans-serif !important;
    font-weight: 600 !important;
    font-synthesis: weight; /* allows browser to fake bold */
}
	
.bold {
	font-weight: 600;
	}

.blue-title {
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 1.8rem;           /* smaller font */
	color: white;                /* font color */
	background-color: #1c3ba5;  /* blue PBT color bgr */
	display: inline-block;       /* shrink to fit text */
	padding: 0.8rem 1.6rem;     /* space inside rectangle */
	text-align: center;
	border-radius: 0px;          /* optional, slightly rounded corners */
	margin-bottom: 1rem; /* adds space after h1 */
    word-wrap: break-word;   /* old syntax, still useful */
	overflow-wrap: break-word; /* modern syntax */ 
    white-space: normal;       /* allow wrapping */
	overflow-wrap: anywhere;   /* modern spec */
	word-break: break-word;    /* fallback */
	word-break: break-all;     /* last resort for stubborn browsers */
	hyphens: auto;             /* nice-to-have */
	}
	
/* Responsive adjustments */
	@media (max-width: 768px) {
		.blue-title {
			font-size: 2rem;
			padding: 0.6rem 1.2rem;
			}
		}
	@media (max-width: 480px) {
		.blue-title {
			font-size: 1.6rem;
			padding: 0.4rem 0.8rem;
			}
		}

/* TOPBOX Languages wrap START */
#topbox {
	display: inline-table;
	}
#languages {
	padding-left: 20px; 
	padding-top: 5px; 
	padding-bottom: 5px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #adadad;
	}
.langact,
.langact a:visited,
.langact a:link,
.langact a:hover {
	font-size: 11pt;
	color: #1c3ba5; /* PBT blue color active link languages */
	font-weight: 600;
	text-decoration: none;
	}
.lang,
.lang a:visited,
.lang a:link {
	font-size: 11pt;
	color: #adadad;
	font-weight: 500;
	text-decoration: none;
	}
.lang a:hover {
	color: #1C3BA5;
	text-decoration: none;
	/* border-bottom: 1px dotted #1C3BA5; */
	}
/* TOPBOX Languages wrap END */

/* Breadcrumbs styles START */
.bcdwrapper {
	border-bottom: 1px solid #1c3ba5; 
	border-top: 15px solid #1c3ba5;
	}
.breadcrumb,
.breadcrumb * {
	font-family: 'Poppins', Arial, sans-serif;
	font-size: 0.9rem;
	margin: 0px 0;
	background-color: #f7f7f7; /* breadcrumb div light grey color */
	}
.breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
	}
.breadcrumb li {
	display: flex;
	align-items: center;
	}
.breadcrumb li + li::before {
	content: "›"; /* arrow separator */
	display: inline-block;
	margin: 0 8px;
	color: #6D6D6D;
	font-weight: bold;
	}
.breadcrumb li a {
	color: #adadad; /* link color */
	text-decoration: none;
	transition: color 0.3s;
	}
.breadcrumb li a:hover {
	color: #1c3ba5;
	text-decoration: underline;
	}
.breadcrumb li[aria-current="page"] {
	font-family: 'Poppins', Arial, sans-serif; /* force the font */
	font-weight: 600;                            /* bold */
	color: #1c3ba5;                              /* current page color */
}
/* Breadcrumbs styles END */

/* Page images style */
.container {
	display: flex;
	flex-wrap: wrap;  /* Allow items to wrap in smaller screens */
	align-items: center;  /* Vertically center items */
	justify-content: flex-start;
	}

/* Frontal main image style START */
.hero {
	width: 100%;
	overflow: hidden;
	}
.hero img {
	width: 100%;
	object-fit: cover;   /* keeps proportions, fills container */
	object-position: center; /* adjust what part stays visible */
	display: block;
	}
/* Frontal main image style END */

.image {
	flex: 1 1 40%;        /* allow growth/shrink, base 40% */
	max-width: 40%;       /* don’t let it exceed 40% */
	height: auto;         /* keep proportions */
	margin-left: 20px;    /* gap between text and image */
	}
	@media screen and (max-width: 1024px) {
		.image {
			flex: 1 1 50%;      /* image takes up to 50% */
			max-width: 50%;
			}
	}
	@media screen and (max-width: 768px) {
		.image {
			flex: 1 1 100%;     /* full width */
			max-width: 100%;
			margin-left: 0;     /* remove side margin on narrow screens */
			margin-bottom: 20px;
			}
	}
.logo img {
	max-width: 100%;  /* allow shrinking */
	height: auto;     /* preserve proportions */
	}	
/* Tablet breakpoint */
	@media (max-width: 768px) {
		.logo img {
			max-width: 70px; /* scale logo down for tablets */
			}
		}
/* Mobile breakpoint */
	@media (max-width: 480px) {
		.logo img {
			max-width: 70px; /* even smaller for phones */
			}
		}
		
.text {
	flex: 1;     /* Text takes remaining space */
	padding-right: 20px;  /* Padding to the right of text */
	margin-bottom: 20px;
	}
	@media screen and (max-width: 1024px) {
		.text {
			flex: 1 1 50%;
			}
	}
	@media screen and (max-width: 768px) {
		.text {
			flex: 1 1 100%;
			}
	}

.textdiv {
	padding: 0px 15px 10px 15px;
	margin: 10px 5px 10px 5px;
	}

.texting a:visited,
.texting a:link {
	color: #1c3ba5;
	text-decoration: none;
	}
.texting a:hover {
	color: #1c3ba5;
	border-bottom: 1px dotted #1c3ba5;
	}

ul {
    margin: 0;
    padding: 5px 0px 5px 20px;
}
/* ALL FOOTER STYLES START */
#footer {
	padding: 20px 20px 20px 20px; 
	background: #1C3BA5;
	width: 100%;
	box-sizing: border-box;
}
#footergrey {
	padding: 20px 20px 20px 20px; 
	background: #7d7d7d;
	width: 100%;
	box-sizing: border-box;
}
#footerblue {
	padding: 20px 20px 20px 20px; 
	background: #1C3BA5;
	width: 100%;
	box-sizing: border-box;
}
#footertrio {
	text-align: left;
	display: flex;
	box-sizing: border-box;
	}
.footerinsert {
	width: 33%;
	display: inline-block;
	}
.footerinsertr {
	width: 33%;
	display: inline-block;
	padding-left: 15px;
	}
.footerinsertl {
	width: 33%;
	display: inline-block;
	padding-right: 15px;
	}
	@media screen and (max-width: 768px) {
		#footertrio {
					display: block;
					}
		.footerinsert {
					width: 100%;
					display: block;
					}
		.footerinsertr {
					width: 100%;
					display: block;
					padding-left: 0;
					}
		.footerinsertl {
					width: 100%;
					display: block;
					padding-right: 0;
					}
	}
	
.footerfont {	
	color: #f7f7f7;
	text-decoration: none;
	font-size: smaller;
	}
.footerfont a:visited, .footerfont a:link, .footerfont a:hover  {
	color: #f7f7f7;
	text-decoration: none;
	border-bottom: 1px dotted #f7f7f7;
	}
/* ALL FOOTER STYLES END */
	

/* Hamburger */
.menu-toggle {
	display: none;             /* hidden on desktop */
	flex-direction: column;    /* stack spans vertically */
	justify-content: center;   /* center them vertically */
	align-items: center;       /* align horizontally */
	gap: 5px;                  /* spacing between lines */
	cursor: pointer;
	padding: 6px;
	}

.menu-toggle span {
	width: 24px;
	height: 3px;
	background: #1c3ba5;  /* PBT blue - hamburger color */
	border-radius: 2px;
	display: block;
	}

/* Menu (desktop layout) */
ul#menu {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	}

ul#menu li {
	margin: 5px 10px;
	}

ul#menu li a {
	display: block;           /* makes the anchor respect padding/margins */
	padding: 12px 12px;
	text-decoration: none;
	color: #1c3ba5; /* Menu font color */
	border-radius: 5px;
	transition: background .18s, color .18s;
	}
	@media screen and (max-width: 768px) {
		ul#menu li a {
			border-radius: 0px;
			}
		}
		
ul#menu li a:hover,
ul#menu li a:focus {
	/* del background: rgba(255,255,255,0.06); */
	background: #1c3ba5; /* Menu without sub hover PBT blue color */
	color: white; /* Menu without sub hover white font color */
	outline: none;
	border-radius: 5px;
	}
	@media screen and (max-width: 768px) {
		ul#menu li a:hover,
		ul#menu li a:focus {
			border-radius: 0px;
			}
		}

/* Mobile styles */
	@media (max-width: 768px) {
		/* show hamburger */
		.menu-toggle { 
			display: flex; 
			}
		/* hide horizontal menu and switch to vertical overlay */
		ul#menu {
			display: none;
			position: absolute;
			top: 100%;    /* directly under the nav */
			left: 0;
			width: 100%;
			flex-direction: column;
			background: white; /* back of mobile menu */
			padding: 6px 0; /* vertical padding for the column */
			box-shadow: 0 6px 18px rgba(0,0,0,0.25);
			z-index: 50;
			}
		ul#menu.show { 
			display: flex; 
			}
		/* reset li margins on mobile (prevents horizontal offset issues) */
		ul#menu li {
			margin: 0;               /* remove the desktop margins */
			width: 100%;
			border-bottom: 1px solid #1c3ba5; /* separator line */
			}
		ul#menu li:last-child {
			border-bottom: none; /* no line after last item */
			}
		/* use link padding inside the li for spacing on mobile */
		ul#menu li a {
			padding: 12px 16px;
			}
	}

/* Submenu container */
.has-submenu {
	position: relative;
	}

/* Hidden by default */
.submenu {
	display: none;
	position: absolute;
	top: 100%; 
	left: 0;
	background: white; /* Desktop submenu background color */
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 200px;
	box-shadow: 0 6px 12px rgba(0,0,0,0.2);
	z-index: 100;
	}

@media (min-width: 769px) {
    .submenu {
        border: 1px solid #1c3ba5;
    }
}
@media (max-width: 768px) {
    .submenu {
        border: none;
    }
}

/* Submenu links */
.submenu li a {
	display: block;
	padding: 10px 15px;
	color: #ffff00;
	text-decoration: none;
	}

.submenu li a:hover {
	background: #1c3ba5;
	color: white;
	}

/* Show submenu on hover (desktop) */
.has-submenu:hover .submenu {
	display: block;
	}

/* Hovering parent menu item itself - remove !important so JS can change it */
ul#menu li.has-submenu:hover > a {
	background: #1c3ba5; /* default parent hover background if not hovered on item but menu only */
	color: white;       /* optional parent text color if not hovered on item but menu only*/
	transition: background 0.2s, color 0.2s; /* smooth change */
	border-bottom: 1px solid #1c3ba5;
	}

/* Submenu links */
ul#menu li.has-submenu .submenu li a {
	color: #1c3ba5;       /* default submenu text */
	background: white;  /* default submenu background */
	transition: background 0.2s, color 0.2s;
	}

/* Submenu hover */
	ul#menu li.has-submenu .submenu li a:hover,
	ul#menu li.has-submenu .submenu li a:focus {
	color: white;         /* submenu text color on hover */
	background: #1c3ba5; /* submenu background on hover */
	}

/* Mobile behavior */
	@media (max-width: 768px) {
		.submenu {
			position: static;
			box-shadow: none;
			padding-left: 0;
			}

		.submenu li a {
			display: flex;           /* flex container */
			align-items: center;     /* vertical center */
			padding-left: 20px;      /* space from menu edge */
			text-decoration: none;   /* optional */
			color: #ffff00;          /* default text color */
			transition: color 0.3s;  /* smooth color change */
			}

		.submenu li a::before {
			content: "▸";            /* icon */
			color: #1c3ba5;           /* default icon color */
			font-size: 14px;
			margin-right: 15px;       /* space between icon and text */
			flex-shrink: 0;           /* keep icon from shrinking */
			transition: color 0.3s;   /* smooth color change */
			}

		/* Change icon and text color on hover */
		.submenu li a:hover {
			color: white;           /* change text color */
			}

		.submenu li a:hover::before {
			color: white;           /* change icon color */
			}
	}

/* Navbar */
nav {
	background: white;
	color: #fff;
	display: flex;
	align-items: center;          /* vertical center */
	justify-content: space-between;/* logo left, controls right */
	padding: 8px 12px;            /* overall inside spacing */
	position: relative;
	}
	
.subtitle {
	font-weight: 600;
	font-size: 1.4rem;           /* smaller font */
	color: #1c3ba5;
	padding: 0px 0px 15px 0px;
	margin: 0px;
	}
/* Arrow for parent menu items with submenu */
ul#menu li.has-submenu > a::after {
  content: " ▼";
  font-size: 0.6em;
  margin-left: 4px;
  pointer-events: none;
  transition: transform 0.3s ease, color 0.3s ease;
  position: relative;
  display: inline-block;
}

/* Rotate arrow on hover/focus */
ul#menu li.has-submenu:hover > a::after,
ul#menu li.has-submenu:focus-within > a::after,
ul#menu li.has-submenu.show > a::after {
  transform: rotate(180deg);
}

/* Keep arrow color separate from parent link color */
ul#menu li.has-submenu > a span.arrow {
  color: #1c3ba5; /* always blue */
  transition: color 0.3s ease;
}

@media (min-width: 769px) {
    ul#menu li.has-submenu > a {
        border-radius: 5px 5px 0 0; /* top-left, top-right, bottom-right, bottom-left */
    }
@media (min-width: 769px) {
    ul#menu li.has-submenu .submenu li a {
        border-radius: 0; /* no rounding */
        margin: 0;         /* remove any margin */
    }
}
@media (min-width: 769px) {
    ul#menu li.has-submenu .submenu li {
        margin: 0;
    }
    ul#menu li.has-submenu .submenu li a {
        display: block;
        width: 100%;
    }
@media (min-width: 769px) {
    ul#menu li.has-submenu:hover > a {
        border-bottom: none;
    }
}