:root 
{
--small:1rem;
--medium:1.33rem;
--large:2rem;
--extralarge:3rem;
--small-padding: 1rem;
--medium-padding: 1.5rem;
--large-padding: 2rem;
--extralarge-padding: 3rem;
--light-theme-light-text:#FFF;
}

:root 
{
--primary-color: #4CAF50;
--secondary-color: #ffffff;
--accent-color: #e0f2f1;
--text-color: #333333;
--font-family: 'Roboto', Arial, sans-serif;
--header-font: 'Pacifico', cursive;
--transition-speed: 0.3s;
}

.pptemplatepanel{display:flex;flex-wrap: wrap;}
.pppanelcolumn{height:100%;}
.pppanelcolumnrow{}
.pppanelcolumnrowgrid{}

.imgpositionCC{display:flex;align-items:center;justify-content:center;}
.imgpositionCL{display:flex;align-items:center;justify-content:start;}
.imgpositionCR{display:flex;align-items:center;justify-content:end;}
.imgpositionTC{display:flex;align-items:start;justify-content:center;}
.imgpositionTL{display:flex;align-items:start;justify-content:start;}
.imgpositionTR{display:flex;align-items:start;justify-content:end;}
.imgpositionBC{display:flex;align-items:end;justify-content:center;}
.imgpositionBL{display:flex;align-items:end;justify-content:start;}
.imgpositionBR{display:flex;align-items:end;justify-content:end;}


.faqitem{margin-bottom:1.5rem;}
.faqquestion{font-size:1.33rem;cursor:pointer;text-align:left;padding:.25rem .5rem;color:#01416b;}
.faqanswer{font-size:1.33rem;text-align:left;padding-top: 1rem;}
.faqanswer td{font-size:1.33rem;}
.faqquestion .questionicon{font-size:1.5rem;color: #FFF;background-color: red;padding: 0.25rem 0.5rem;font-weight: 700;display: inline-block;border: 0.05rem solid darkred;font-family: serif;line-height: normal;margin-right:1rem;border-radius:0.25rem;}
.faqanswer .answericon{font-size:1.5rem;color: #FFF;background-color: green;padding: 0.25rem 0.5rem;font-weight: 700;display: inline-block;border: 0.05rem solid darkgreen;font-family: serif;line-height: normal;border-radius:0.25rem;}

.faqitem .faqquestion{position:relative;}

.faqitem .faqquestion:after{position: absolute;font: normal normal normal 150%/1 FontAwesome;content: "\f107";color: inherit;right: 1.5rem;padding-top: 0.25rem;font-weight: 700;transition:.2s transform ease;}

.faqitem .faqquestion.opened:after{transform: rotate(180deg);}



.indexroletype{text-align:center;padding:.5rem;margin-top:.5rem;margin-bottom:1rem;color:#000;font-size:1.33rem;font-weight:700;border-bottom:.05rem solid #eee;}

.boxportal>div.box3d{text-align:center;}
.icnportal{overflow:hidden;padding:0.4rem 0.45rem;box-sizing:border-box;margin-top:1rem;display:inline-block;min-width:6.8vw;width:12vw;height:18vh;max-width:90%;}
.portaltit{font-size:110%;text-transform:uppercase;text-align:center;padding:1rem 1rem 0.5rem 1rem;color:#000;white-space: nowrap;overflow-x: hidden;box-sizing: border-box;width: 100%;text-overflow: ellipsis;}
.portaldesc{padding: 0 0.5rem;height:3rem;overflow: hidden;text-align: left;color: #555;}

section{margin-bottom:1rem;}

.backimagesection .banner-slider {
position: relative;
height: 400px;
overflow: hidden;
}

.backimagesection .banner-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1s ease-in-out;
}

.backimagesection .banner-image.active {
opacity: 1;
}

.backimagesection .banner-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: var(--secondary-color);
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
padding: 1rem;
background: rgba(0, 0, 0, 0.3);
border-radius: .5rem;
max-width:50rem;
}

.backimagesection .banner-content h1 {
font-size: 3rem;
margin-bottom: .5rem;
color:var(--light-theme-light-text);
}

.backimagesection .banner-content p {
font-size: 1.5rem;
margin-bottom: 3rem;
color: var(--light-theme-light-text);
margin-top: 2rem;
}



.cta-button, .secondary-button {
display: inline-block;
padding: 12px 25px;
border-radius: 5px;
font-weight: bold;
transition: background-color var(--transition-speed), color var(--transition-speed);
}

.cta-button {
background-color: var(--primary-color);
color: var(--secondary-color);
margin-right: .5rem;
}

.secondary-button {
background-color: transparent;
color: var(--secondary-color);
border: 2px solid var(--secondary-color);
}

.secondary-button:hover {
background-color: var(--secondary-color);
color: var(--primary-color);
}


.about-section {
background-color: #f5f5f5;
padding: 3rem 1rem;
text-align: center;
}

.about-section h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}

.about-section p {
max-width: 800px;
margin: 0 auto 2rem;
font-size: 1.25rem;
line-height: 1.8;
}


/* Feature Grid */
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
padding: 0 1rem;
}

.feature-item {
background-color: var(--secondary-color);
border-radius: .5rem;
padding: 1rem;
text-align: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
animation: fadeInUp 0.5s ease-out;
}

.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 4px .5rem rgba(0,0,0,0.2);
}

.feature-icon {
width: 64px;
height: 64px;
margin-bottom: .75rem;
}

.feature-item h3 {
margin-bottom: .5rem;
font-size: 2rem;
color: var(--primary-color);
}


.stories-section {
padding: 3rem 1rem;
background-color: var(--accent-color);
text-align: center;
}



.story-card {
background-color: var(--secondary-color);
border-radius: .5rem;
padding: 1rem;
margin: 0 auto 1rem;
max-width: 60rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
transition: transform var(--transition-speed);
}

.story-card:hover {
transform: translateY(-.25rem);
}

.story-card h3 {
color: var(--primary-color);
margin-top: 0;
}

.story-card p {
margin-top:.5rem;
margin-bottom: 1rem;
font-size:1.33rem;
}

.story-card .story-date {
font-style: italic;
color: #888;
}