.elementor-4951 .elementor-element.elementor-element-47dbb50{--display:flex;}.elementor-4951 .elementor-element.elementor-element-1f00a7a{width:100%;max-width:100%;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-1f00a7a */<style>

/*=========================================================
        MOUNT DIOS MANAGEMENT PAGE
              VERSION 6.0
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0A4D9D;
--secondary:#1565D8;
--gold:#D4AF37;
--heading:#13294B;
--text:#5E6B7A;
--light:#F8FBFF;
--white:#ffffff;
--border:#E7EEF7;

--shadow:0 18px 45px rgba(15,45,90,.08);

--radius:28px;

}

/*============================
RESET
=============================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#fff;
overflow-x:hidden;
color:var(--heading);

}

/*============================
SECTION
=============================*/

.management-section{

position:relative;
padding:100px 0;
background:#fff;
overflow:hidden;

}

/*============================
BACKGROUND SHAPES
=============================*/

.management-section::before{

content:"";
position:absolute;
width:520px;
height:520px;
border-radius:50%;
background:rgba(10,77,157,.035);
left:-220px;
top:-220px;

}

.management-section::after{

content:"";
position:absolute;
width:380px;
height:380px;
border-radius:50%;
background:rgba(212,175,55,.06);
right:-180px;
bottom:-160px;

}

/*============================
CONTAINER
=============================*/

.management-container{

width:100%;
max-width:1700px;
margin:auto;
padding:0 70px;
position:relative;
z-index:5;

}

/*============================
HEADER
=============================*/

.management-header{

max-width:900px;
margin:auto;
text-align:center;
margin-bottom:70px;

}

.management-header span{

display:inline-flex;
align-items:center;
gap:10px;

padding:10px 24px;

background:#EEF5FF;

border-radius:40px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:var(--secondary);

margin-bottom:18px;

}

.management-header span::before{

content:"";

width:8px;
height:8px;
border-radius:50%;
background:var(--gold);

}

.management-header h1{

font-size:60px;
font-weight:800;
line-height:1.15;
color:var(--heading);

}

.management-header strong{

color:var(--gold);

}

/*============================
DIVIDER
=============================*/

.management-divider{

width:95px;
height:5px;

margin:28px auto;

border-radius:20px;

background:linear-gradient(
90deg,
var(--gold),
var(--secondary)
);

}

/*============================
INTRODUCTION
=============================*/

.management-intro{

max-width:1050px;

margin:0 auto 80px;

text-align:center;

}

.management-intro p{

font-size:18px;

line-height:2;

color:var(--text);

text-align:justify;

text-align-last:center;

}

/*============================
COMMON TEXT
=============================*/

.management-content p{

font-size:17px;

line-height:2.05;

color:var(--text);

text-align:justify;

margin-bottom:18px;

}

/*============================
SECTION SPACING
=============================*/

.management-block{

margin-bottom:110px;

}

/*============================
QUOTE
=============================*/

.management-quote{

max-width:1150px;

margin:0 auto 60px;

padding:30px 45px;

background:#fff;

border-left:5px solid var(--gold);

border-radius:20px;

box-shadow:var(--shadow);

font-size:23px;

font-weight:600;

font-style:italic;

text-align:center;

color:var(--primary);

position:relative;

}

.management-quote::before{

content:"❝";

position:absolute;

font-size:65px;

left:20px;

top:5px;

color:rgba(212,175,55,.18);

}

/*============================
PREMIUM DIVIDER
=============================*/

.management-line{

width:100%;

height:1px;

margin:90px 0;

background:linear-gradient(
to right,
transparent,
#D9E6F8,
#0A4D9D,
#D9E6F8,
transparent
);

}

<style>

/*=========================================================
        MOUNT DIOS MANAGEMENT PAGE
              VERSION 6.0
=========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0A4D9D;
--secondary:#1565D8;
--gold:#D4AF37;
--heading:#13294B;
--text:#5E6B7A;
--light:#F8FBFF;
--white:#ffffff;
--border:#E7EEF7;

--shadow:0 18px 45px rgba(15,45,90,.08);

--radius:28px;

}

/*============================
RESET
=============================*/

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#fff;
overflow-x:hidden;
color:var(--heading);

}

/*============================
SECTION
=============================*/

.management-section{

position:relative;
padding:100px 0;
background:#fff;
overflow:hidden;

}

/*============================
BACKGROUND SHAPES
=============================*/

.management-section::before{

content:"";
position:absolute;
width:520px;
height:520px;
border-radius:50%;
background:rgba(10,77,157,.035);
left:-220px;
top:-220px;

}

.management-section::after{

content:"";
position:absolute;
width:380px;
height:380px;
border-radius:50%;
background:rgba(212,175,55,.06);
right:-180px;
bottom:-160px;

}

/*============================
CONTAINER
=============================*/

.management-container{

width:100%;
max-width:1700px;
margin:auto;
padding:0 70px;
position:relative;
z-index:5;

}

/*============================
HEADER
=============================*/

.management-header{

max-width:900px;
margin:auto;
text-align:center;
margin-bottom:70px;

}

.management-header span{

display:inline-flex;
align-items:center;
gap:10px;

padding:10px 24px;

background:#EEF5FF;

border-radius:40px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:var(--secondary);

margin-bottom:18px;

}

.management-header span::before{

content:"";

width:8px;
height:8px;
border-radius:50%;
background:var(--gold);

}

.management-header h1{

font-size:60px;
font-weight:800;
line-height:1.15;
color:var(--heading);

}

.management-header strong{

color:var(--gold);

}

/*============================
DIVIDER
=============================*/

.management-divider{

width:95px;
height:5px;

margin:28px auto;

border-radius:20px;

background:linear-gradient(
90deg,
var(--gold),
var(--secondary)
);

}

/*============================
INTRODUCTION
=============================*/

.management-intro{

max-width:1050px;

margin:0 auto 80px;

text-align:center;

}

.management-intro p{

font-size:18px;

line-height:2;

color:var(--text);

text-align:justify;

text-align-last:center;

}

/*============================
COMMON TEXT
=============================*/

.management-content p{

font-size:17px;

line-height:2.05;

color:var(--text);

text-align:justify;

margin-bottom:18px;

}

/*============================
SECTION SPACING
=============================*/

.management-block{

margin-bottom:110px;

}

/*============================
QUOTE
=============================*/

.management-quote{

max-width:1150px;

margin:0 auto 60px;

padding:30px 45px;

background:#fff;

border-left:5px solid var(--gold);

border-radius:20px;

box-shadow:var(--shadow);

font-size:23px;

font-weight:600;

font-style:italic;

text-align:center;

color:var(--primary);

position:relative;

}

.management-quote::before{

content:"❝";

position:absolute;

font-size:65px;

left:20px;

top:5px;

color:rgba(212,175,55,.18);

}

/*============================
PREMIUM DIVIDER
=============================*/

.management-line{

width:100%;

height:1px;

margin:90px 0;

background:linear-gradient(
to right,
transparent,
#D9E6F8,
#0A4D9D,
#D9E6F8,
transparent
);

}

/*====================================================
        MOUNT DIOS MANAGEMENT PAGE
        PREMIUM CSS - PART 1
====================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary:#0A4D9D;
--secondary:#1565D8;
--gold:#D4AF37;
--heading:#13294B;
--text:#5F6C7B;
--white:#ffffff;
--light:#F8FBFF;
--border:#E7EEF7;

--shadow:0 20px 50px rgba(18,41,75,.08);

--radius:26px;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:#ffffff;
color:var(--heading);
overflow-x:hidden;

}

/*======================================
SECTION
======================================*/

.management-section{

position:relative;

padding:90px 0;

background:#fff;

overflow:hidden;

}

/* Background */

.management-section::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:rgba(10,77,157,.04);

left:-220px;

top:-220px;

}

.management-section::after{

content:"";

position:absolute;

width:300px;

height:300px;

border-radius:50%;

background:rgba(212,175,55,.06);

right:-140px;

bottom:-120px;

}

/*======================================
CONTAINER
======================================*/

.management-container{

width:100%;

max-width:1700px;

margin:auto;

padding:0 60px;

position:relative;

z-index:5;

}

/*======================================
HEADER
======================================*/

.management-header{

max-width:900px;

margin:auto;

text-align:center;

margin-bottom:40px;

}

.management-header span{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 25px;

background:#EEF5FF;

border-radius:50px;

font-size:13px;

font-weight:700;

text-transform:uppercase;

letter-spacing:1px;

color:var(--secondary);

margin-bottom:18px;

}

.management-header span::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:var(--gold);

}

.management-header h1{

font-size:58px;

font-weight:800;

line-height:1.2;

margin-bottom:18px;

color:var(--heading);

}

.management-header strong{

color:var(--gold);

}

/*======================================
DIVIDER
======================================*/

.management-divider{

width:95px;

height:5px;

margin:0 auto 30px;

border-radius:50px;

background:linear-gradient(90deg,var(--gold),var(--secondary));

}

/*======================================
INTRODUCTION
======================================*/

.management-intro{

max-width:1100px;

margin:auto;

margin-bottom:70px;

}

.management-intro p{

font-size:18px;

line-height:2;

color:var(--text);

text-align:justify;

text-align-last:center;

}

/*======================================
QUOTE
======================================*/

.management-quote{

max-width:1150px;

margin:0 auto 70px;

padding:32px 40px;

background:#fff;

border-left:5px solid var(--gold);

border-radius:22px;

box-shadow:var(--shadow);

font-size:23px;

font-style:italic;

font-weight:600;

color:var(--primary);

text-align:center;

position:relative;

}

.management-quote::before{

content:"❝";

position:absolute;

left:18px;

top:0;

font-size:70px;

color:rgba(212,175,55,.15);

}

/*======================================
COMMON SPACING
======================================*/

.management-block{

margin-bottom:90px;

}

.management-line{

width:100%;

height:1px;

margin:80px 0;

background:linear-gradient(to right,
transparent,
#D9E6F8,
#0A4D9D,
#D9E6F8,
transparent);

}

/*====================================================
        MANAGEMENT CARDS
        PREMIUM CSS - PART 2
====================================================*/

/*==========================
CARD
===========================*/

.management-card{

display:grid;

grid-template-columns:430px minmax(0,1fr);

align-items:center;

gap:70px;

background:#fff;

padding:55px;

border-radius:28px;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:.45s ease;

position:relative;

overflow:hidden;

margin-bottom:80px;

}

.management-card:hover{

transform:translateY(-8px);

box-shadow:0 30px 70px rgba(10,77,157,.14);

}

/* Animated Top Border */

.management-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:5px;

background:linear-gradient(90deg,var(--primary),var(--gold));

transform:scaleX(0);

transform-origin:left;

transition:.45s;

}

.management-card:hover::before{

transform:scaleX(1);

}

/*==========================
SECRETARY REVERSE
===========================*/

.management-card.reverse{

grid-template-columns:minmax(0,1fr) 430px;

}

.management-card.reverse .management-content{

order:1;

padding-right:10px;

}

.management-card.reverse .management-image{

order:2;

}

/*==========================
IMAGE
===========================*/

.management-image{

position:relative;

overflow:hidden;

border-radius:22px;

}

.management-image img{

width:100%;

height:540px;

display:block;

object-fit:cover;

border-radius:22px;

transition:.7s ease;

}

.management-card:hover .management-image img{

transform:scale(1.06);

}

/* Premium Gold Border */

.management-image::after{

content:"";

position:absolute;

left:14px;

top:14px;

width:calc(100% - 28px);

height:calc(100% - 28px);

border:2px solid rgba(212,175,55,.45);

border-radius:18px;

pointer-events:none;

transition:.4s;

}

.management-card:hover .management-image::after{

left:10px;

top:10px;

width:calc(100% - 20px);

height:calc(100% - 20px);

}

/*==========================
CONTENT
===========================*/

.management-content{

padding-right:10px;

}

.management-tag{

display:inline-block;

padding:10px 24px;

background:linear-gradient(90deg,var(--secondary),var(--primary));

color:#fff;

font-size:13px;

font-weight:600;

border-radius:50px;

margin-bottom:22px;

letter-spacing:.5px;

}

.management-content h2{

font-size:44px;

font-weight:700;

line-height:1.2;

margin-bottom:8px;

color:var(--heading);

}

.management-content h3{

font-size:22px;

font-weight:600;

color:var(--gold);

margin-bottom:25px;

}

/*==========================
QUALIFICATION
===========================*/

.management-qualification{

background:#F8FBFF;

padding:20px 24px;

border-left:5px solid var(--secondary);

border-radius:16px;

margin-bottom:28px;

font-size:15px;

line-height:1.9;

font-weight:500;

color:var(--heading);

}

/*==========================
PARAGRAPH
===========================*/

.management-content p{

font-size:17px;

line-height:2;

color:var(--text);

text-align:justify;

margin-bottom:18px;

}

/*==========================
SIGNATURE
===========================*/

.management-sign{

margin-top:35px;

padding-top:22px;

border-top:2px dashed #D9E5F5;

}

.management-sign h4{

font-size:28px;

font-weight:700;

color:var(--heading);

margin-bottom:5px;

}

.management-sign span{

font-size:15px;

font-weight:600;

color:#6E7A89;

}

/*==========================
SMALL DECORATION
===========================*/

.management-card::after{

content:"";

position:absolute;

width:160px;

height:160px;

background:rgba(21,101,216,.03);

border-radius:50%;

right:-70px;

bottom:-70px;

}

/*====================================================
        PREMIUM CSS PART 3
        RESPONSIVE + ANIMATIONS + CLOSING
====================================================*/

/*==============================
PREMIUM CLOSING SECTION
===============================*/

.management-closing{

max-width:1400px;

margin:0 auto;

padding:80px 70px;

border-radius:30px;

background:linear-gradient(135deg,#0A4D9D,#1565D8);

text-align:center;

color:#fff;

position:relative;

overflow:hidden;

box-shadow:0 30px 80px rgba(10,77,157,.18);

}

.management-closing::before{

content:"";

position:absolute;

width:320px;

height:320px;

background:rgba(255,255,255,.08);

border-radius:50%;

top:-150px;

right:-120px;

}

.management-closing::after{

content:"";

position:absolute;

width:220px;

height:220px;

background:rgba(255,255,255,.05);

border-radius:50%;

left:-80px;

bottom:-80px;

}

.management-closing span{

display:inline-block;

padding:10px 26px;

background:rgba(255,255,255,.12);

border:1px solid rgba(255,255,255,.20);

border-radius:50px;

font-size:13px;

font-weight:600;

letter-spacing:1px;

margin-bottom:25px;

text-transform:uppercase;

}

.management-closing h2{

font-size:52px;

font-weight:700;

line-height:1.3;

margin-bottom:20px;

}

.management-closing p{

max-width:900px;

margin:auto;

font-size:18px;

line-height:2;

opacity:.95;

}

/*==============================
PREMIUM HOVER
===============================*/

.management-card{

transition:all .45s ease;

}

.management-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 80px rgba(10,77,157,.18);

}

.management-card:hover h2{

color:var(--primary);

}

.management-card:hover .management-tag{

background:linear-gradient(90deg,var(--gold),var(--primary));

}

.management-card:hover img{

transform:scale(1.05);

}

/*==============================
IMAGE SHADOW
===============================*/

.management-image{

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

/*==============================
SCROLLBAR
===============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#edf4fb;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--primary),var(--secondary));

border-radius:50px;

}

/*==============================
TEXT SELECTION
===============================*/

::selection{

background:var(--primary);

color:#fff;

}

/*==============================
FADE ANIMATION
===============================*/

.management-header,
.management-intro,
.management-quote,
.management-card,
.management-closing{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(35px);

}

100%{

opacity:1;

transform:none;

}

}

/*==============================
TABLET
===============================*/

@media(max-width:1200px){

.management-container{

padding:0 35px;

}

.management-card,

.management-card.reverse{

grid-template-columns:1fr;

gap:35px;

}

.management-card.reverse .management-image,

.management-card.reverse .management-content{

order:unset;

}

.management-image{

max-width:520px;

margin:auto;

}

.management-image img{

height:500px;

}

.management-header h1{

font-size:46px;

}

.management-content h2{

font-size:38px;

}

.management-closing h2{

font-size:40px;

}

}

/*==============================
MOBILE
===============================*/

@media(max-width:768px){

.management-section{

padding:70px 0;

}

.management-container{

padding:0 18px;

}

.management-header h1{

font-size:34px;

}

.management-header span{

font-size:12px;

padding:8px 18px;

}

.management-intro p{

font-size:15px;

line-height:1.9;

text-align:left;

}

.management-card{

padding:22px;

gap:25px;

}

.management-image img{

height:360px;

}

.management-content{

padding:0;

}

.management-content h2{

font-size:28px;

}

.management-content h3{

font-size:18px;

}

.management-content p{

font-size:15px;

line-height:1.9;

text-align:left;

}

.management-qualification{

font-size:14px;

padding:16px;

}

.management-sign h4{

font-size:22px;

}

.management-sign span{

font-size:14px;

}

.management-quote{

font-size:18px;

padding:20px;

}

.management-closing{

padding:45px 25px;

}

.management-closing h2{

font-size:30px;

}

.management-closing p{

font-size:15px;

line-height:1.9;

}

}

/*==============================
SMALL MOBILE
===============================*/

@media(max-width:480px){

.management-header h1{

font-size:28px;

}

.management-image img{

height:300px;

}

.management-content h2{

font-size:24px;

}

.management-content p{

font-size:14px;

}

.management-tag{

font-size:11px;

padding:9px 18px;

}

.management-quote{

font-size:16px;

line-height:1.8;

}

.management-closing h2{

font-size:26px;

}

}

/*====================================================
END CSS
====================================================*//* End custom CSS */