body{
//background-color:#f6efe4;
//background-color:#fbf9f2;
}
.cecmain_content {
    text-align: justify;
    padding: 20px;
    font-size: 16px;
    line-height: 2;	
}
.profilepic{
float:left;
margin: -40px 40px 50px 0px;
}
.maincontent {
    text-align: justify;
    padding: 20px;
    font-size: 16px;
    line-height: 2;
}
.dirslide-caption{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 324px;
    background: none;
    color: #ffffff;
    z-index: 3;
    display: flex;
    justify-content: left;
	padding:0px 0px 0px 10%;
}
.dirpost{
margin:3% 0px 0px 0px;
color:#FFFFFF;
font-size: 2rem;
}
.dirslide-caption h2 {
    font-size: 3rem;
    color: #fff; /* High legibility target */
    margin: 5px 0px 8px 0px;
	text-align:left;

}
.directortxt{
color:#FFCC00;
font-size: 2rem;
}

.innertxtcenter div{
	text-align:left;
    line-height: 40px;
}
.dirslide-caption .innertxtcenter{
text-align:left;
line-height: 50px;
}
.pgraphhyper{
display:flex;
justify-content:center;
gap:28px;
margin-top:3%;
width:75%;
padding:15px;
}
.viewprofiel a{
background-color:#490b1a;
color:#fff;
padding:10px 15px 10px 15px;
font-size:20px;
border-radius: 10%;
}
.directormsg a{
background-color:#490b1a;
color:#fff;
padding:10px 15px 10px 15px;
font-size:20px;
border-radius: 10%;
}
.titlecec{
font-size: 2rem;
}
.subtitlecec{
font-size:1rem;
}
.uppergrid{
display: grid;
grid-template-columns: 50% 50%; /* Force 1 full-width column on mobile */
gap: 12px;                  /* Generates even space between top and bottom blocks */
padding: 8px 8px;          /* Clean side padding for mobile screens */
text-align: JUSTIFY;
vertical-align:middle;
}
.middlegrid{
display: grid;
grid-template-columns: 100%; /* Force 1 full-width column on mobile */
padding: 10px 0px 10px 12px;
text-align: JUSTIFY;
vertical-align:middle;
}
.middlegridleft{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 10px;
background-color:#fff;
}
.middlegridright{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 10px;
}
.lowergridleft{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 30px;
background-color:#fefdfb;
}
.lowergridmiddle{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 30px;
background-color:#fefdfb;
}
.lowergridright{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 30px;
background-color:#fefdfb;
}
.lowergrid{
display: grid;
grid-template-columns: 33% 34% 33%; /* Force 1 full-width column on mobile */
gap: 7px;                  /* Generates even space between top and bottom blocks */
padding: 8px 8px;          /* Clean side padding for mobile screens */
text-align: JUSTIFY;
vertical-align:middle;
}
.lowergridsocial{
display: grid;
grid-template-columns:100%; /* Force 1 full-width column on mobile */
gap: 7px;                  /* Generates even space between top and bottom blocks */
padding: 8px 8px;          /* Clean side padding for mobile screens */
text-align: JUSTIFY;
vertical-align:middle;
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
background-color:#fefdfb;
width: 100%;
}
.gridsummary{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 30px;
background-color:#fefdfb;
font-size: 18px;
}
.gridcareer{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 20px 20px 0px 20px;
background-color:#fefdfb;
}
.profilehdtitle{
font-size:2em;
color:#490b1a;
display: flex;          /* Activates Flexbox */
align-items: center;    /* Centers items vertically */
justify-content: center;/* Centers items horizontally */
gap: 10px;              /* Adds space between the image and text */
}
.profilehdtitlesocial{
font-size:2em;
color:#490b1a;
display: flex;          /* Activates Flexbox */
align-items: center;    /* Centers items vertically */
justify-content: center;/* Centers items horizontally */
gap: 10px;              /* Adds space between the image and text */
}
.profilehdtitlesmall{
font-size:1.5em;
color:#490b1a;
display: flex;          /* Activates Flexbox */
align-items: left;    /* Centers items vertically */
justify-content: left;/* Centers items horizontally */
gap: 10px;              /* Adds space between the image and text */
padding-bottom: 20px;
text-align:center;
}
.fivegrid{
display: grid;
grid-template-columns: 15% 18% 17% 20% 19%;
gap: 11px;
}
.fivegridinner{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 30px 5px 30px 5px;
background-color:#fefdfb;
align-content: center;
text-align: center;
margin-top: 20px;
}
.eightgridinner{
border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
padding: 2px;
background-color:#fcf2ea87;
align-content: center;
text-align: center;
display:flex;
}

.careerhtsgrid{
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 Columns on PC/Laptop */
padding:30px;
}
.expertisegrid{
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 Columns on PC/Laptop */
gap:10px;
margin-top: 20px;
font-size: 15px;
}
.upperleftcareerdiv{
border-bottom: 1px solid #cdc4b1;
display: grid;          /* Activates Flexbox */
grid-template-columns: 40% 60%; /* Force 1 full-width column on mobile */
align-items: center;    /* Centers items vertically */
justify-content: center;/* Centers items horizontally */
padding: 0px 9% 15px 2%;
text-align: center;
}
.uppermidcareerdiv{
border-left: 1px solid #cdc4b1;
border-right: 1px solid #cdc4b1;
border-bottom: 1px solid #cdc4b1;
display: grid;          /* Activates Flexbox */
grid-template-columns: 40% 60%; /* Force 1 full-width column on mobile */
align-items: center;    /* Centers items vertically */
justify-content: center;/* Centers items horizontally */
padding: 0px 4% 15px 5%;
text-align: center;
}
.upperrightcareerdiv{
border-bottom: 1px solid #cdc4b1;
display: grid;          /* Activates Flexbox */
grid-template-columns: 40% 60%; /* Force 1 full-width column on mobile */
align-items: center;    /* Centers items vertically */
justify-content: center;/* Centers items horizontally */
padding: 0px 9% 15px 2%;
text-align: center;
}
.lowerleftcareerdiv{
display: grid;          /* Activates Flexbox */
grid-template-columns: 40% 60%; /* Force 1 full-width column on mobile */
align-items: center;    /* Centers items vertically */
justify-content: center;/* Centers items horizontally */
padding: 10px 9% 15px 2%;
text-align: center;
}
.lowermidcareerdiv{
border-left: 1px solid #cdc4b1;
border-right: 1px solid #cdc4b1;
display: grid;          /* Activates Flexbox */
grid-template-columns: 40% 60%; /* Force 1 full-width column on mobile */
align-items: center;    /* Centers items vertically */
justify-content: center;/* Centers items horizontally */
padding: 10px 9% 15px 2%;
text-align: center;
}
.lowerrightcareerdiv{
display: grid;          /* Activates Flexbox */
grid-template-columns: 40% 60%; /* Force 1 full-width column on mobile */
align-items: center;    /* Centers items vertically */
justify-content: center;/* Centers items horizontally */
padding: 10px 9% 15px 2%;
text-align: center;
}
.dirsocial{
	display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 20px;
    font-size: 15px;
    align-items: center;
}
.dirsociallink{
	border: 1px solid #cdc4b1;
    padding: 2px;
    background-color: #fcf2ea87;
    align-content: center;
    text-align: center; 
}
.dirsociallink a {
  display: inline-flex;
  align-items: center;  /* Vertically centers the image and text */
  gap: 8px;             /* Adds clean spacing between the icon and text */
  text-decoration: none;/* Optional: removes default underline */
}
@media (max-width: 1450px){
	.dirpost {
    margin: 5% 0px 0px 0px;
    color: #FFFFFF;
    font-size: 2rem;
	}
}
@media (max-width: 1350px){
	.gridcareer{
	border: 1px solid #cdc4b1; /* Optional: Just to see the container boundaries */
	padding: 20px 20px 0px 20px;
	background-color:#fefdfb;
	}
	.careerhtsgrid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
	padding:0px;
	}
	.uppermidcareerdiv{	
	    border-right: none;
	}
	.lowerleftcareerdiv{
	    border-left: 1px solid #cdc4b1;
	    border-bottom: 1px solid #cdc4b1;
	}
	.lowermidcareerdiv{
		border-left: none;
	}
	.pgraphhyper{
		margin-top:0px
	}
	.dirslide-caption{
		top: 250px;
	}
}
@media (max-width: 1050px){
	.dirslide-caption h2 {
    	font-size: 1.5rem;
		margin-bottom:0px;
	}
	.dirslide-caption .innertxtcenter {    
    	line-height: 30px;
	}	
	.expertisegrid {
    grid-template-columns: repeat(2, 1fr);
	}
	.dirslide-caption {
		padding: 0px 0px 0px 3%;
	}
	.dirpost, .directortxt, .titlecec{
		font-size: 1.5rem;
	}
	.innertxtcenter div{
		line-height: 35px;
        margin-right: 20px;
	}
	.pgraphhyper{
		gap:0px;
		padding:0px;
		display: ruby;
	}
	.profilehdtitlesmall{
		font-size:1em;
	}
	.gridcareer{
		padding:0px;	
	}
}
@media (max-width: 870px) {
		.careerhtsgrid {
			grid-template-columns: repeat(1, 1fr);
		}
		.profilehdtitle{
			font-size:1em;
		    padding-left: 15px;
		}
		.profilehdtitlesocial{
			font-size:1em;
		    padding-left: 15px;
		}
}
@media (max-width: 768px) {
    .profilepic{
        float: none;
		margin: -135px 0px -65px -157px;		
		scale: 70%;
    }
	.dirslide-caption{
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		background: none;
		color: #ffffff;
		z-index: 3;
		display: flex;
		justify-content: left;
		padding:0px;
		margin-top: -168px;  
	}
	.upperleftcareerdiv{
	border-top: 1px solid #cdc4b1;
	}
	.uppermidcareerdiv{
	border-bottom: 1px solid #cdc4b1;
	border-top:none;
	border-left:none;
	border-right:none;
	}
	.lowerleftcareerdiv{
	border-bottom: 1px solid #cdc4b1;
	}
	.lowermidcareerdiv{
	border-bottom: 1px solid #cdc4b1;
	border-left:none;
	border-right:none;
	}
	.dirpost{
	margin:10% 0px 0px 0px;
	color:#FFFFFF;
	font-size: 1rem;
	}
	.dirslide-caption h2 {
		font-size: 1rem;
		color: #fff; /* High legibility target */
		margin-bottom: 8px;
		text-align:left;	
	}
	.directortxt{
	color:#FFCC00;
	font-size: 1rem;
	}

	.innertxtcenter div{
		text-align:left;
		line-height: 20px;
	}
	.dirslide-caption .innertxtcenter{
	text-align:left;
	line-height: 5px;
	margin: -70px 0px 50px 0px;
	}
	.pgraphhyper{
	display:flex;
	justify-content:center;
	gap:28px;
	margin-top:3%;
	background-color:#FFFFFF;
	width:75%;
	padding:0px;
	display: ruby;
	}
	.viewprofiel a{
	background-color:#490b1a;
	color:#fff;
	padding:10px 15px 10px 15px;
	font-size:20px;
	border-radius: 10%;
	}
	.directormsg a{
	background-color:#490b1a;
	color:#fff;
	padding:10px 15px 10px 15px;
	font-size:20px;
	border-radius: 10%;
	}
	.titlecec{
	font-size: 1rem;
	}
	.subtitlecec{
	font-size:9px;
	padding-bottom: 10px;
	}
	.pgraphhyper div a {
	font-size:12px;
	}
	.uppergrid{
	height: auto;
	display: flex;
	flex-direction: column;
	}
	.middlegrid{
	 height: auto;
	 display: flex;
	 flex-direction: column;
	 }	
	.lowergrid{
	 height: auto; 
	 display: flex; 
	 flex-direction: column;
	 }	
	.careerhtsgrid{
	 height: auto; 
	 display: flex; 
	 flex-direction: column;
	 padding:0px;
	} 
	.fivegrid{
	 height: auto; 
	 display: flex; 
	 flex-direction: column;
	}
	.profilehdtitle{
	font-size:1.2em;
	color:#490b1a;
	display: flex;          /* Activates Flexbox */
	align-items: center;    /* Centers items vertically */
	justify-content: center;/* Centers items horizontally */
	gap: 10px;              /* Adds space between the image and text */
	}
	.profilehdtitlesocial{
	font-size:1.2em;
	color:#490b1a;
	display: flex;          /* Activates Flexbox */
	align-items: center;    /* Centers items vertically */
	justify-content: center;/* Centers items horizontally */
	gap: 10px;              /* Adds space between the image and text */
	}
	.profilehdtitlesmall{
	font-size:1em;
	color:#490b1a;
	display: flex;          /* Activates Flexbox */
	align-items: left;    /* Centers items vertically */
	justify-content: left;/* Centers items horizontally */
	gap: 10px;              /* Adds space between the image and text */
	padding-bottom: 20px;
	}
	.expertisegrid{
	display: grid;
	grid-template-columns: repeat(1, 1fr); /* 1 Columns on PC/Laptop */
	gap:10px;
	margin-top: 20px;
	font-size: 15px;
	}
	.dirsocial{
   	 grid-template-columns: repeat(2, 1fr);
	}	
}
@media (max-width: 530px) {
	.dirsocial{
    	grid-template-columns:1fr;
	}
	.dirsociallink {    
	    text-align: left;
	}
}