.elementor-311 .elementor-element.elementor-element-e767180{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-311 .elementor-element.elementor-element-e767180:not(.elementor-motion-effects-element-type-background), .elementor-311 .elementor-element.elementor-element-e767180 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-311 .elementor-element.elementor-element-5757ee5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:50px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-311 .elementor-element.elementor-element-5757ee5:not(.elementor-motion-effects-element-type-background), .elementor-311 .elementor-element.elementor-element-5757ee5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-311 .elementor-element.elementor-element-5b2bb85{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:-120px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-311 .elementor-element.elementor-element-5b2bb85:not(.elementor-motion-effects-element-type-background), .elementor-311 .elementor-element.elementor-element-5b2bb85 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}/* Start Element CSS: html *//* ===========================================================
WELCOME FROM THE PRESIDENT
PREMIUM HERO
CSS ONLY
=========================================================== */

.president-hero{

    position:relative;

    min-height:92vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    font-family:'DM Sans',sans-serif;

    background:#071C43;

}

.president-hero *{

    box-sizing:border-box;

}

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

.president-hero-bg{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.8s;

}

.president-hero:hover .president-hero-bg{

    transform:scale(1.04);

}

/* ==========================================
OVERLAY
========================================== */

.president-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(7,22,60,.82) 8%,
        rgba(7,22,60,.58) 42%,
        rgba(7,22,60,.12) 100%
    );

    z-index:2;

}

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

.president-container{

    position:relative;

    z-index:5;

    width:100%;

    max-width:1450px;

    margin:auto;

    padding:150px 6% 120px;

}

/* ==========================================
BREADCRUMB
========================================== */

.president-breadcrumb{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:45px;

    font-size:14px;

}

.president-breadcrumb a{

    color:rgba(255,255,255,.75);

    text-decoration:none;

    transition:.3s;

}

.president-breadcrumb a:hover{

    color:#ffffff;

}

.president-breadcrumb span{

    color:rgba(255,255,255,.60);

}

/* ==========================================
ACCENT
========================================== */

.hero-accent-line{

    width:90px;

    height:4px;

    background:#D72638;

    border-radius:30px;

    margin-bottom:28px;

}

/* ==========================================
LABEL
========================================== */

.hero-label{

    display:block;

    color:#DCE8FF;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:18px;

}

/* ==========================================
HEADING
========================================== */

.president-container h1{

    margin:0;

    max-width:700px;

    font-size:78px;

    line-height:.96;

    font-weight:800;

    color:#ffffff;

    letter-spacing:-2px;

}

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

.president-container p{

    max-width:620px;

    margin:30px 0 45px;

    color:rgba(255,255,255,.92);

    font-size:20px;

    line-height:1.9;

}

/* ==========================================
PRESIDENT
========================================== */

.president-info{

    display:flex;

    align-items:center;

    gap:20px;

}

.president-info img{

    width:82px;

    height:82px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid rgba(255,255,255,.25);

    box-shadow:

        0 15px 30px rgba(0,0,0,.20);

}

.president-info h4{

    margin:0;

    color:#ffffff;

    font-size:24px;

    font-weight:700;

}

.president-info span{

    display:block;

    margin-top:6px;

    color:#D9E5FF;

    font-size:15px;

}

/* ==========================================
SCROLL
========================================== */

.hero-scroll{

    position:absolute;

    bottom:45px;

    left:50%;

    transform:translateX(-50%);

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    color:#ffffff;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:12px;

}

.scroll-line{

    width:2px;

    height:60px;

    border-radius:10px;

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

}

/* ==========================================
RESPONSIVE
========================================== */

@media(max-width:1200px){

.president-container h1{

font-size:60px;

}

}

@media(max-width:768px){

.president-hero{

min-height:780px;

}

.president-container{

padding:120px 24px 80px;

}

.president-breadcrumb{

display:none;

}

.hero-accent-line{

width:70px;

margin-bottom:20px;

}

.hero-label{

font-size:12px;

margin-bottom:14px;

}

.president-container h1{

font-size:42px;

line-height:1.05;

letter-spacing:-1px;

}

.president-container p{

font-size:17px;

line-height:1.8;

margin:22px 0 35px;

}

.president-info img{

width:70px;

height:70px;

}

.president-info h4{

font-size:20px;

}

.president-info span{

font-size:14px;

}

.hero-scroll{

display:none;

}

}
```/* End Element CSS */
/* Start Element CSS: html *//* ===========================================================
PRESIDENT'S WELCOME SECTION
CSS ONLY
=========================================================== */

.excel-president-section{

    padding:130px 6%;

    background:#ffffff;

    font-family:'DM Sans',sans-serif;

    position:relative;

    overflow:hidden;

}

.excel-president-section *{

    box-sizing:border-box;

}

.president-container{

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:520px 1fr;

    gap:90px;

    align-items:center;

}

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

.president-image{

    position:relative;

}

.image-frame{

    position:relative;

    border-radius:30px;

    overflow:hidden;

    box-shadow:
    0 35px 70px rgba(15,23,42,.15);

}

.image-frame img{

    display:block;

    width:100%;

    height:720px;

    object-fit:cover;

    transition:.45s;

}

.image-frame:hover img{

    transform:scale(1.04);

}

.image-frame::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(

    to top,

    rgba(11,45,112,.20),

    transparent

    );

    z-index:1;

}

/* Decorative Border */

.image-frame::after{

    content:"";

    position:absolute;

    inset:18px;

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

    border-radius:18px;

    z-index:2;

}

/* Floating Card */

.experience-card{

    position:absolute;

    right:-35px;

    bottom:40px;

    width:220px;

    background:#0B2D70;

    color:#fff;

    border-radius:24px;

    padding:30px;

    box-shadow:
    0 30px 60px rgba(11,45,112,.28);

}

.experience-card h2{

    margin:0;

    font-size:58px;

    line-height:1;

    font-weight:800;

}

.experience-card span{

    display:block;

    margin-top:10px;

    font-size:15px;

    line-height:1.6;

    opacity:.95;

}

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

.section-label{

    display:inline-flex;

    align-items:center;

    padding:10px 20px;

    border-radius:100px;

    background:#EEF4FF;

    color:#0B2D70;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}

.president-content h2{

    margin:0;

    font-size:56px;

    line-height:1.05;

    font-weight:800;

    color:#0B2D70;

    letter-spacing:-1.5px;

    margin-bottom:30px;

}

.president-content p{

    font-size:18px;

    line-height:1.9;

    color:#5F6C7B;

    margin-bottom:22px;

}

/* Quote */

.president-content blockquote{

    margin:45px 0;

    padding:30px 35px;

    border-left:5px solid #0B2D70;

    background:#F8FBFF;

    border-radius:0 18px 18px 0;

    color:#0B2D70;

    font-size:22px;

    line-height:1.6;

    font-weight:600;

    font-style:normal;

}

/* Footer */

.president-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:45px;

    gap:30px;

}

.president-footer h4{

    margin:0;

    font-size:24px;

    color:#0B2D70;

    font-weight:700;

}

.president-footer span{

    display:block;

    margin-top:6px;

    color:#64748B;

    font-size:15px;

}

.president-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    background:#D72638;

    color:#fff;

    text-decoration:none;

    border-radius:60px;

    font-weight:700;

    transition:.35s;

    box-shadow:
    0 18px 40px rgba(215,38,56,.25);

}

.president-btn:hover{

    transform:translateY(-5px);

    box-shadow:
    0 25px 55px rgba(215,38,56,.35);

}

/* ===========================================================
RESPONSIVE
=========================================================== */

@media(max-width:1200px){

.president-container{

grid-template-columns:1fr;

gap:70px;

}

.president-image{

max-width:600px;

margin:auto;

}

.experience-card{

right:25px;

bottom:25px;

}

}

@media(max-width:768px){

.excel-president-section{

padding:90px 24px;

}

.president-container{

gap:50px;

}

.image-frame img{

height:520px;

}

.experience-card{

position:relative;

right:auto;

bottom:auto;

margin-top:-45px;

margin-left:auto;

width:210px;

}

.president-content h2{

font-size:38px;

}

.president-content p{

font-size:16px;

line-height:1.8;

}

.president-content blockquote{

font-size:19px;

padding:24px;

}

.president-footer{

flex-direction:column;

align-items:flex-start;

}

.president-btn{

width:220px;

}

}/* End Element CSS */
/* Start Element CSS: html *//* ===========================================================
SECTION 03
OUR COMMITMENT
CSS ONLY
=========================================================== */

.excel-president-commitment{

    padding:130px 6%;

    background:#ffffff;

    font-family:'DM Sans',sans-serif;

    position:relative;

    overflow:hidden;

}

.excel-president-commitment *{

    box-sizing:border-box;

}

.commitment-container{

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:90px;

    align-items:center;

}

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

.commitment-content{

    max-width:760px;

}

.commitment-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:100px;

    background:#EEF4FF;

    color:#0B2D70;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

.commitment-content h2{

    margin:0 0 26px;

    color:#0B2D70;

    font-size:56px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-1.5px;

}

.commitment-content p{

    margin:0 0 24px;

    color:#64748B;

    font-size:18px;

    line-height:1.95;

}

.commitment-content strong{

    color:#0B2D70;

    font-weight:700;

}

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

.commitment-image{

    position:relative;

}

.commitment-image img{

    width:100%;

    height:700px;

    object-fit:cover;

    display:block;

    border-radius:30px;

    transition:.45s;

    box-shadow:

        0 25px 60px rgba(15,23,42,.15);

}

.commitment-image:hover img{

    transform:scale(1.03);

}

.commitment-image::before{

    content:"";

    position:absolute;

    inset:18px;

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

    border-radius:20px;

    z-index:2;

    pointer-events:none;

}

/* ===========================================
FLOATING ACHIEVEMENT CARD
=========================================== */

.achievement-card{

    position:absolute;

    right:-35px;

    bottom:45px;

    width:250px;

    padding:30px;

    border-radius:24px;

    background:#0B2D70;

    color:#ffffff;

    box-shadow:

        0 28px 60px rgba(11,45,112,.28);

}

.achievement-card h2{

    margin:0;

    font-size:54px;

    line-height:1;

    font-weight:800;

}

.achievement-card span{

    display:block;

    margin-top:12px;

    font-size:15px;

    line-height:1.6;

    color:rgba(255,255,255,.92);

}

/* ===========================================
RESPONSIVE
=========================================== */

@media(max-width:1200px){

.commitment-container{

grid-template-columns:1fr;

gap:70px;

}

.commitment-image{

max-width:650px;

margin:auto;

}

.achievement-card{

right:20px;

bottom:20px;

}

}

@media(max-width:768px){

.excel-president-commitment{

padding:90px 24px;

}

.commitment-container{

gap:50px;

}

.commitment-content h2{

font-size:38px;

line-height:1.12;

}

.commitment-content p{

font-size:16px;

line-height:1.85;

}

.commitment-image img{

height:500px;

}

.achievement-card{

width:200px;

padding:22px;

right:15px;

bottom:15px;

}

.achievement-card h2{

font-size:42px;

}

.achievement-card span{

font-size:14px;

}

}


/* ===========================================================
SECTION 04
BUILDING THE FUTURE
CSS ONLY
=========================================================== */

.excel-president-future{

    padding:130px 6%;

    background:#F8FAFC;

    font-family:'DM Sans',sans-serif;

    position:relative;

    overflow:hidden;

}

.excel-president-future *{

    box-sizing:border-box;

}

.future-container{

    max-width:1450px;

    margin:auto;

    display:grid;

    grid-template-columns:.95fr 1.05fr;

    gap:90px;

    align-items:center;

}

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

.future-image{

    position:relative;

}

.future-image img{

    width:100%;

    height:700px;

    display:block;

    object-fit:cover;

    border-radius:30px;

    transition:.45s;

    box-shadow:

        0 25px 60px rgba(15,23,42,.14);

}

.future-image:hover img{

    transform:scale(1.03);

}

.future-image::before{

    content:"";

    position:absolute;

    inset:18px;

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

    border-radius:18px;

    pointer-events:none;

}

/* Decorative Accent */

.future-image::after{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    background:#0B2D70;

    border-radius:28px;

    right:-25px;

    top:-25px;

    opacity:.08;

    z-index:-1;

}

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

.future-content{

    max-width:760px;

}

.future-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    background:#EEF4FF;

    color:#0B2D70;

    border-radius:100px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

.future-content h2{

    margin:0 0 28px;

    color:#0B2D70;

    font-size:58px;

    line-height:1.04;

    font-weight:800;

    letter-spacing:-1.5px;

}

.future-content p{

    margin:0 0 26px;

    color:#64748B;

    font-size:18px;

    line-height:1.95;

}

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

.future-content blockquote{

    margin:45px 0 0;

    padding:34px 38px;

    background:#ffffff;

    border-left:5px solid #0B2D70;

    border-radius:0 22px 22px 0;

    font-size:22px;

    line-height:1.7;

    font-weight:600;

    color:#0B2D70;

    box-shadow:

        0 15px 35px rgba(15,23,42,.06);

}

/* ===========================================
RESPONSIVE
=========================================== */

@media(max-width:1200px){

.future-container{

grid-template-columns:1fr;

gap:70px;

}

.future-image{

max-width:650px;

margin:auto;

}

}

@media(max-width:768px){

.excel-president-future{

padding:90px 24px;

}

.future-container{

gap:50px;

}

.future-image img{

height:500px;

}

.future-image::after{

display:none;

}

.future-content h2{

font-size:38px;

line-height:1.12;

}

.future-content p{

font-size:16px;

line-height:1.85;

}

.future-content blockquote{

padding:24px;

font-size:18px;

line-height:1.7;

}

}


/* ===========================================================
SECTION 05
FINAL INVITATION
CSS ONLY
=========================================================== */

.excel-president-invitation{

    padding:140px 6%;

    background:#ffffff;

    font-family:'DM Sans',sans-serif;

    position:relative;

    overflow:hidden;

}

.excel-president-invitation *{

    box-sizing:border-box;

}

/* ===========================================
BACKGROUND DECORATION
=========================================== */

.excel-president-invitation::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(circle,#1E63D8 0%,transparent 70%);

    opacity:.06;

}

.excel-president-invitation::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    left:-160px;

    bottom:-180px;

    border-radius:50%;

    background:radial-gradient(circle,#0B2D70 0%,transparent 70%);

    opacity:.05;

}

.invitation-container{

    position:relative;

    z-index:2;

    max-width:980px;

    margin:auto;

    text-align:center;

}

/* ===========================================
BADGE
=========================================== */

.invitation-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 24px;

    background:#EEF4FF;

    color:#0B2D70;

    border-radius:100px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

/* ===========================================
HEADING
=========================================== */

.invitation-container h2{

    margin:0 0 24px;

    color:#0B2D70;

    font-size:60px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-1.5px;

}

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

.invitation-container p{

    max-width:820px;

    margin:0 auto 24px;

    color:#64748B;

    font-size:18px;

    line-height:1.95;

}

/* ===========================================
BUTTONS
=========================================== */

.invitation-buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    margin:55px 0 65px;

    flex-wrap:wrap;

}

.invitation-buttons a{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    padding:18px 36px;

    border-radius:60px;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    transition:.35s ease;

}

/* Primary */

.invitation-buttons a:first-child{

    background:#D72638;

    color:#ffffff;

    box-shadow:

        0 18px 40px rgba(215,38,56,.28);

}

.invitation-buttons a:first-child:hover{

    transform:translateY(-5px);

    box-shadow:

        0 28px 55px rgba(215,38,56,.35);

}

/* Secondary */

.invitation-buttons .outline{

    background:#ffffff;

    color:#0B2D70;

    border:2px solid #0B2D70;

}

.invitation-buttons .outline:hover{

    background:#0B2D70;

    color:#ffffff;

}

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

.president-signoff{

    display:inline-block;

    margin-top:10px;

    padding-top:40px;

    border-top:1px solid #E7EDF5;

    min-width:380px;

}

.president-signoff h3{

    margin:0;

    color:#0B2D70;

    font-size:30px;

    font-weight:700;

}

.president-signoff span{

    display:block;

    margin-top:10px;

    color:#64748B;

    font-size:16px;

    line-height:1.8;

}

/* ===========================================
RESPONSIVE
=========================================== */

@media(max-width:991px){

.excel-president-invitation{

padding:110px 40px;

}

.invitation-container h2{

font-size:46px;

}

.invitation-container p{

font-size:17px;

line-height:1.85;

}

.president-signoff{

min-width:320px;

}

}

@media(max-width:768px){

.excel-president-invitation{

padding:90px 24px;

}

.invitation-container h2{

font-size:36px;

line-height:1.12;

}

.invitation-container p{

font-size:16px;

line-height:1.8;

margin-bottom:20px;

}

.invitation-buttons{

flex-direction:column;

gap:14px;

margin:40px 0 50px;

}

.invitation-buttons a{

width:100%;

min-width:100%;

padding:16px 24px;

font-size:15px;

}

.president-signoff{

width:100%;

min-width:100%;

padding-top:30px;

}

.president-signoff h3{

font-size:24px;

}

.president-signoff span{

font-size:15px;

line-height:1.7;

}

}/* End Element CSS */