body{
background-color:#f6efe4;
//background-color:#fbf9f2;
}
.cecmain_content {
    text-align: justify;
    padding: 20px;
    font-size: 16px;
    line-height: 2;	
}
.imgdirmessage{
margin: -40px 40px 60px 0px;
}
.maincontent {
    text-align: justify;
    padding: 20px;
    font-size: 18px;
    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;
}

@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;
		}
}
@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: -50px 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 */
}
.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); /* 3 Columns on PC/Laptop */
gap:10px;
margin-top: 20px;
font-size: 15px;
}

|