<style>
    /*==================================================
 SSSP SECRETARY MESSAGE
 PART 1
==================================================*/

.ssspSecretarySection{
    padding:100px 0;
    background:#f7f3ea;
    position:relative;
}

.ssspSecretarySection *{
    box-sizing:border-box;
}

.ssspSecretaryWrapper{
    display:flex;
    align-items:stretch;
    background:#fff;
    border-radius:32px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border:1px solid #ead8ab;
}

/*=========================================
LEFT PANEL
=========================================*/

.ssspSecretaryLeft{
    width:38%;
    min-height:760px;
    position:relative;
    overflow:hidden;

    background:linear-gradient(
        180deg,
        #6d1113 0%,
        #7d1719 45%,
        #5d0d0f 100%
    );

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:70px 40px;
}

/* Pattern */

.ssspSecretaryLeftPattern{
    position:absolute;
    inset:0;
    opacity:.05;
    background-image:
        radial-gradient(#ffffff 1px,transparent 1px);
    background-size:28px 28px;
}

/* Gold Border */

.ssspSecretaryLeft::before{

    content:"";

    position:absolute;

    inset:18px;

    border:1px solid rgba(255,222,145,.18);

    border-radius:22px;

}

/*=========================================
CURVE
=========================================*/

.ssspSecretaryCurve{

    position:absolute;

    right:-105px;

    top:-5%;

    width:230px;

    height:110%;

    background:#fcf9f1;

    border-left:8px solid #d8ab49;

    border-radius:50%;

    z-index:5;

}

/*=========================================
PHOTO
=========================================*/

.ssspSecretaryPhotoWrap{

    position:relative;

    z-index:10;

}

.ssspSecretaryPhotoBorder{

    width:360px;

    padding:8px;

    border-radius:26px;

    background:linear-gradient(
        135deg,
        #f8e2a3,
        #c58b1f,
        #ffe9b4
    );

    box-shadow:
    0 25px 45px rgba(0,0,0,.35);

    transition:.45s;

}

.ssspSecretaryPhotoBorder img{

    width:100%;

    display:block;

    border-radius:20px;

}

.ssspSecretaryWrapper:hover
.ssspSecretaryPhotoBorder{

    transform:translateY(-8px);

}

/*=========================================
NAME
=========================================*/

.ssspSecretaryInfo{

    margin-top:35px;

    text-align:center;

    position:relative;

    z-index:10;

}

.ssspSecretaryInfo h3{

    margin:0;

    font-size:46px;

    color:#fff;

    font-family:"Playfair Display",serif;

    font-weight:700;

    line-height:1.2;

}

.ssspSecretaryInfo span{

    display:block;

    margin-top:12px;

    color:#f2cf73;

    font-size:22px;

    font-style:italic;

    font-family:"Playfair Display",serif;

}

/* Divider */

.ssspSecretaryInfoDivider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    margin-top:28px;

}

.ssspSecretaryInfoDivider span{

    width:85px;

    height:2px;

    background:#d8ab49;

}

.ssspSecretaryInfoDivider i{

    color:#d8ab49;

    font-size:12px;

}
/*==================================================
RIGHT PANEL
PART 2
==================================================*/

.ssspSecretaryRight{

    width:62%;

    background:#fcfaf4;

    position:relative;

    padding:80px 70px;

    overflow:hidden;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

/*==========================
TOP CORNER DECORATION
==========================*/

.ssspSecretaryCorner{

    position:absolute;

    right:-70px;

    top:-70px;

    width:240px;

    height:240px;

    border:2px solid rgba(205,160,55,.18);

    border-radius:50%;

}

.ssspSecretaryCorner::before{

    content:"";

    position:absolute;

    inset:20px;

    border:2px solid rgba(205,160,55,.12);

    border-radius:50%;

}

.ssspSecretaryCorner::after{

    content:"";

    position:absolute;

    inset:45px;

    border:2px solid rgba(205,160,55,.08);

    border-radius:50%;

}

/*==========================
BACKGROUND WATERMARK
==========================*/

.ssspSecretaryMusic{

    position:absolute;

    right:40px;

    bottom:35px;

    width:220px;

    height:220px;

    opacity:.05;

    background:radial-gradient(circle,#8b1c1d 0%,transparent 70%);

    border-radius:50%;

}

/*==========================
HEADING
==========================*/

.ssspSecretaryHeading{

    text-align:center;

    margin-bottom:55px;

}

.ssspSecretaryTitleIcon{

    margin-bottom:15px;

}

.ssspSecretaryTitleIcon img{

    width:55px;

}

.ssspSecretaryHeading h2{

    margin:0;

    color:#6b1113;

    font-size:52px;

    font-family:"Playfair Display",serif;

    font-weight:700;

    letter-spacing:1px;

}

.ssspSecretaryHeadingDivider{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:25px;

}

.ssspSecretaryHeadingDivider span{

    width:140px;

    height:2px;

    background:#d2a23e;

}

.ssspSecretaryHeadingDivider i{

    color:#d2a23e;

    font-size:13px;

}

/*==========================
MESSAGE AREA
==========================*/

.ssspSecretaryContent{

    position:relative;

    padding-left:75px;

}

.ssspSecretaryQuote{

    position:absolute;

    left:0;

    top:-5px;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#6b1113;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:20px;

    box-shadow:0 12px 25px rgba(107,17,19,.18);

}

.ssspSecretaryContent::before{

    content:"";

    position:absolute;

    left:25px;

    top:60px;

    width:2px;

    height:230px;

    background:#d2a23e;

}

/*==========================
TEXT
==========================*/

.ssspSecretaryText{

    font-size:20px;

    line-height:2;

    color:#444;

    text-align:justify;

    font-family:"Cormorant Garamond",serif;

}

/*==========================
BOTTOM DIVIDER
==========================*/

.ssspSecretaryBottomDivider{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

    margin-top:45px;

}

.ssspSecretaryBottomDivider span{

    width:150px;

    height:2px;

    background:#d2a23e;

}

.ssspSecretaryBottomDivider i{

    color:#d2a23e;

    font-size:12px;

}

/*==========================
BUTTON
==========================*/

.ssspSecretaryButtonWrap{

    margin-top:35px;

    display:flex;

    justify-content:center;

}

.ssspSecretaryBtn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    min-width:310px;

    height:62px;

    border-radius:60px;

    background:linear-gradient(180deg,#8a191b,#6a0f10);

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:600;

    border:2px solid #d2a23e;

    transition:.35s;

    box-shadow:0 15px 30px rgba(0,0,0,.12);

}

.ssspSecretaryBtn:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 22px 40px rgba(0,0,0,.18);

}

.ssspSecretaryBtn i:first-child{

    color:#f4d06b;

}

.ssspSecretaryBtn i:last-child{

    font-size:15px;

}
/*==================================================
PART 3
FINAL RESPONSIVE & POLISH
==================================================*/

/* Hover Effects */

.ssspSecretaryWrapper{
    transition:.45s ease;
}

.ssspSecretaryWrapper:hover{
    transform:translateY(-6px);
    box-shadow:0 35px 80px rgba(0,0,0,.12);
}

.ssspSecretaryPhotoBorder{
    transition:.45s;
}

.ssspSecretaryPhotoBorder:hover{
    transform:scale(1.02);
}

.ssspSecretaryPhotoBorder img{
    transition:.45s;
}

.ssspSecretaryPhotoBorder:hover img{
    transform:scale(1.05);
}

/* Button Shine */

.ssspSecretaryBtn{
    position:relative;
    overflow:hidden;
}

.ssspSecretaryBtn::before{

    content:"";

    position:absolute;

    left:-120px;

    top:0;

    width:70px;

    height:100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-20deg);

    transition:.8s;

}

.ssspSecretaryBtn:hover::before{

    left:420px;

}

/* Fade Animation */

@keyframes secretaryFade{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

.ssspSecretaryHeading,
.ssspSecretaryContent,
.ssspSecretaryButtonWrap{

    animation:secretaryFade .8s ease;

}

/*==========================
LARGE DESKTOP
==========================*/

@media(max-width:1400px){

.ssspSecretaryLeft{

width:40%;

}

.ssspSecretaryRight{

width:60%;

padding:70px 55px;

}

.ssspSecretaryHeading h2{

font-size:46px;

}

}

/*==========================
LAPTOP
==========================*/

@media(max-width:1200px){

.ssspSecretaryPhotoBorder{

width:300px;

}

.ssspSecretaryInfo h3{

font-size:36px;

}

.ssspSecretaryInfo span{

font-size:18px;

}

.ssspSecretaryHeading h2{

font-size:42px;

}

.ssspSecretaryText{

font-size:18px;

}

}

/*==========================
TABLET
==========================*/

@media(max-width:991px){

.ssspSecretaryWrapper{

flex-direction:column;

}

.ssspSecretaryLeft{

width:100%;

min-height:auto;

padding:60px 30px;

}

.ssspSecretaryRight{

width:100%;

padding:55px 35px;

}

.ssspSecretaryCurve{

display:none;

}

.ssspSecretaryCorner{

display:none;

}

.ssspSecretaryMusic{

display:none;

}

}

/*==========================
MOBILE
==========================*/

@media(max-width:768px){

.ssspSecretarySection{

padding:70px 0;

}

.ssspSecretaryPhotoBorder{

width:240px;

}

.ssspSecretaryHeading h2{

font-size:30px;

}

.ssspSecretaryHeadingDivider span{

width:70px;

}

.ssspSecretaryContent{

padding-left:0;

}

.ssspSecretaryContent::before{

display:none;

}

.ssspSecretaryQuote{

position:relative;

left:auto;

top:auto;

margin-bottom:20px;

}

.ssspSecretaryText{

font-size:17px;

line-height:1.9;

}

.ssspSecretaryBtn{

width:100%;

min-width:100%;

height:56px;

font-size:16px;

}

}

/*==========================
SMALL MOBILE
==========================*/

@media(max-width:480px){

.ssspSecretaryPhotoBorder{

width:200px;

}

.ssspSecretaryInfo h3{

font-size:26px;

}

.ssspSecretaryInfo span{

font-size:16px;

}

.ssspSecretaryHeading h2{

font-size:24px;

}

.ssspSecretaryText{

font-size:15px;

}

}
</style>