/*==============================================================================
    ATHENA UI FRAMEWORK
    File        : ui-components.css
    Description : Reusable UI Components
    Version     : 1.0


    CONTENT
    UI-S001  Editorial Content
    UI-S002  Split Content (Image Left)
    UI-S003  Split Content (Image Right)
    UI-S004  Two Column Editorial
    UI-S005  Feature Grid
    UI-S006  Numbered Content
    UI-S007  Quote / Statement
    UI-S008  Alternating Content
    UI-S009  Process / Timeline
    UI-S010  Statistics


    CARDS
    UI-S011  Service Cards
    UI-S012  Feature Card
    UI-S013  Icon Feature List
    UI-S014  Benefits
    UI-S015  Steps
    UI-S016  Comparison
    UI-S017  FAQ
    UI-S018  Tabs
    UI-S019  Package Cards
    UI-S020  CTA Banner


    MEDIA
    UI-S021  Gallery
    UI-S022  Masonry Gallery
    UI-S023  Image Comparison
    UI-S024  Image Collage
    UI-S025  Logo Grid
    UI-S026  Logo Marquee
    UI-S027  Team
    UI-S028  Profile
    UI-S029  Testimonials
    UI-S030  Featured Testimonial


    POSTS
    UI-S031  Blog Cards
    UI-S032  Featured Blog
    UI-S033  Event Cards
    UI-S034  Featured Event
    UI-S035  Country Cards
    UI-S036  Programme Cards
    UI-S037  Downloads
    UI-S038  Related Content
    UI-S039  Contact Details
    UI-S040  Contact Form


    UTILITY
    UI-S041  Office Locations
    UI-S042  Google Map
    UI-S043  Newsletter
    UI-S044  Breadcrumb
    UI-S045  Sticky Navigation
    UI-S046  Floating Cards
    UI-S047  KPI Cards
    UI-S048  Awards
    UI-S049  Partners
    UI-S050  Closing CTA

==============================================================================*/



/*==============================================================================
    UI-S001
    Editorial Content
==============================================================================*/

.ui-s001{
    position: relative;
}

.ui-s001-banner{
    padding:70px 60px;
    background:rgba(var(--theme-color-rgb), 0.03);

    border:2px solid rgba(var(--theme-color-rgb), 1);
    border-radius:28px;
    box-shadow:0 12px 40px rgba(0,0,0,.05);

    overflow:hidden;
}

.ui-s001 .ui-section-title{
    max-width:900px;
}

.ui-s001 .ui-lead{
    font-size:22px;
    line-height:1.8;
    font-weight:400;

    color:var(--ui-heading);
    margin-bottom:35px;
}

.ui-s001 p:last-child{
    margin-bottom:0;
}

.ui-s001 p{
    /* max-width:920px; */
}

@media (max-width:991.98px){
    .ui-s001{
        text-align:left;
    }

    .ui-s001-banner{
        padding:0;
        background:#fff;
        border:none;
        border-radius:0;
        box-shadow:none;
    }

    .ui-s001 .ui-lead{
        font-size:18px;
    }
}


/*==============================================================================
    UI-S002
    Split Content (Image Left | Content Right)
==============================================================================*/

.ui-s002 .row{
    align-items:center;
}

.ui-s002-image{
    position:relative;
    overflow:hidden;
    border-radius:var(--ui-radius-lg);
    box-shadow:var(--ui-shadow-md);
}

.ui-s002-image img{
    width:100%;
    display:block;

    transition:.8s ease;
}

.ui-s002:hover .ui-s002-image img{
    transform:scale(1.05);
}

.ui-s002-content{
    padding-left:50px;
}

.ui-s002 .ui-section-title{
    max-width:650px;
}

.ui-s002 .ui-lead{
    font-size:20px;
    line-height:1.8;

    color:var(--ui-heading);

    margin-bottom:30px;
}

@media (max-width:991.98px){

    .ui-s002-image{
        margin-bottom:40px;
    }

    .ui-s002-content{
        padding-left:0;
    }

    .ui-s002 .ui-lead{
        font-size:18px;
    }
}


/*==============================================================================
    UI-S003
    Editorial Split (Content Left | Image Right)
==============================================================================*/

.ui-s003{
    position:relative;
}

.ui-s003-content{
    padding-right:70px;
}

.ui-s003 .ui-section-title{
    max-width:700px;
}

.ui-s003 .ui-lead{
    font-size:20px;
    line-height:1.8;

    color:var(--ui-heading);
    margin-bottom:30px;
}

.ui-s003-image{
    position:relative;
    overflow:hidden;
    border-radius:var(--ui-radius-xl);
    box-shadow:var(--ui-shadow-lg);
}

.ui-s003-image img{
    width:100%;
    display:block;

    transition:.8s ease;
}

.ui-s003:hover .ui-s003-image img{
    transform:scale(1.06);
}

/* Decorative background */

.ui-s003-image:before{
    content:"";
    position:absolute;

    width:160px;
    height:160px;

    right:-35px;
    top:-35px;

    border-radius:50%;
    background:rgba(225,26,167,.08);

    z-index:1;
}

.ui-s003-image:after{
    content:"";
    position:absolute;

    width:90px;
    height:90px;

    left:-20px;
    bottom:-20px;

    border-radius:24px;
    background:rgba(42,20,88,.06);
}

@media (max-width:991.98px){

    .ui-s003-content{
        padding-right:0;
        margin-bottom:40px;
    }

    .ui-s003 .ui-lead{
        font-size:18px;
    }

    .ui-s003-image:before,
    .ui-s003-image:after{
        display:none;
    }
}


/*==============================================================================
    UI-S004
    Two Column Editorial Content
==============================================================================*/

.ui-s004 .row:last-child{
    margin-top:20px;
}

.ui-s004-content{
    height:100%;
    padding-right:35px;
}

.ui-s004-content h4{
    margin-bottom:25px;
    position:relative;
    padding-bottom:18px;
}

.ui-s004-content h4:after{
    content:"";
    position:absolute;

    left:0;
    bottom:0;

    width:55px;
    height:3px;

    background:var(--ui-accent);
    border-radius:50px;
}

.ui-s004-content p:last-child{
    margin-bottom:0;
}

@media (max-width:991.98px){

    .ui-s004-content{
        padding-right:0;
        margin-bottom:50px;
    }

    .ui-s004 .col-lg-6:last-child .ui-s004-content{
        margin-bottom:0;
    }
}


/*==============================================================================
    UI-S005
    Feature Grid (Icon + Title + Description)
==============================================================================*/

.ui-s005-card{
    display:flex;
    align-items:flex-start;

    gap:30px;
    height:100%;
    padding:40px;

    background:#fff;

    border-radius:var(--ui-radius-lg);
    box-shadow:var(--ui-shadow-sm);
    transition:var(--ui-transition);
}

.ui-s005-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--ui-shadow-md);
}

.ui-s005-icon{
    flex:0 0 78px;

    width:78px;
    height:78px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:24px;

    background:rgba(225,26,167,.08);
    color:var(--theme-color);

    font-size:34px;
    transition:var(--ui-transition);
}

.ui-s005-card:hover .ui-s005-icon{
    background:var(--ui-primary);
    color:#fff;
}

.ui-s005-content{
    flex:1;
}

.ui-s005-content h4{
    margin-bottom:18px;
}

.ui-s005-content p{
    margin-bottom:0;
}

@media(max-width:991.98px){

    .ui-s005-card{
        padding:30px;
        gap:20px;
    }

    .ui-s005-icon{
        width:64px;
        height:64px;

        flex:0 0 64px;
        font-size:28px;
        border-radius:18px;
    }
}


/*==============================================================================
    UI-S006
    Numbered Editorial Content
==============================================================================*/

.ui-s006-heading{
    position:sticky;
    top:120px;
}

.ui-s006-item{
    display:flex;
    gap:40px;

    padding:45px 0;
    border-bottom:1px solid var(--ui-border);
}

.ui-s006-item:first-child{
    padding-top:0;
}

.ui-s006-item:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.ui-s006-number{
    flex:0 0 90px;

    font-size:60px;
    font-weight:800;
    line-height:1;

    /* color:#ECE8F6; */
    color:var(--theme-color);
}

.ui-s006-content{
    flex:1;
}

.ui-s006-content h4{
    margin-bottom:18px;
}

.ui-s006-content p{
    margin-bottom:0;
}

@media(max-width:991.98px){

    .ui-s006-heading{
        position:relative;
        top:auto;

        margin-bottom:50px;
    }

    .ui-s006-item{
        gap:20px;
        padding:35px 0;
    }

    .ui-s006-number{
        flex:0 0 55px;
        font-size:36px;
    }
}



/*==============================================================================
    UI-S007
    Quote / Highlight Statement
==============================================================================*/

.ui-s007{
    overflow:hidden;
}

.ui-s007-wrapper{
    position:relative;
    padding:90px 80px;

    background:linear-gradient(135deg,#2A1458 0%,#44237f 100%);
    border-radius:var(--ui-radius-xl);

    text-align:center;
    color:#fff;
    overflow:hidden;
}

.ui-s007-wrapper::before{
    content:"";
    position:absolute;

    width:320px;
    height:320px;

    top:-180px;
    right:-120px;

    border-radius:50%;
    background:rgba(255,255,255,.05);
}

.ui-s007-wrapper::after{
    content:"";
    position:absolute;

    width:220px;
    height:220px;

    bottom:-120px;
    left:-80px;

    border-radius:50%;
    background:rgba(225,26,167,.12);
}

.ui-s007-quote-icon{
    width:90px;
    height:90px;

    margin:0 auto 35px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,255,255,.10);
    backdrop-filter:blur(10px);

    font-size:34px;

    position:relative;
    z-index:2;
}

.ui-s007 .ui-section-label{
    color:#fff;
    opacity:.8;
}

.ui-s007-title{
    position:relative;
    z-index:2;

    max-width:900px;
    margin:0 auto;

    color:#fff;

    font-size:44px;
    line-height:1.35;
    font-weight:700;
}

.ui-s007 .ui-line{
    margin:35px auto;
    background:var(--ui-accent);
}

.ui-s007-author{

    position:relative;
    z-index:2;

    margin:0;

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

    font-size:18px;
    font-weight:500;
}

@media(max-width:991.98px){

    .ui-s007-wrapper{
        padding:60px 30px;
        border-radius:var(--ui-radius-lg);
    }

    .ui-s007-title{
        font-size:30px;
    }

    .ui-s007-quote-icon{
        width:70px;
        height:70px;

        font-size:28px;
        margin-bottom:25px;
    }

    .ui-s007-wrapper::before,
    .ui-s007-wrapper::after{
        display:none;
    }
}


/*==============================================================================
    UI-S008
    Alternating Editorial Story
==============================================================================*/

.ui-s008-item{
    margin-bottom:90px;
}

.ui-s008-item:last-child{
    margin-bottom:0;
}

.ui-s008-year{
    font-size:140px;
    font-weight:800;
    line-height:1;

    /* color:#EFEAF8; */
    color:var(--theme-color);
    user-select:none;
}

.ui-s008-year.ui-right{
    text-align:right;
}

.ui-s008-card{
    position:relative;
    padding:55px;
    background:#fff;

    border-radius:var(--ui-radius-xl);
    box-shadow:var(--ui-shadow-sm);
    transition:var(--ui-transition);
}

.ui-s008-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--ui-shadow-md);
}

.ui-s008-card h3{
    margin-bottom:25px;
}

.ui-s008-card p{
    margin-bottom:0;
}

.ui-s008-card::before{
    content:"";
    position:absolute;

    top:40px;
    left:-15px;

    width:5px;
    height:90px;

    border-radius:50px;
    background:var(--ui-accent);
}

.ui-s008-item:nth-child(even) .ui-s008-card::before{
    left:auto;
    right:-15px;
}

@media(max-width:991.98px){

    .ui-s008-item{
        margin-bottom:60px;
    }

    .ui-s008-year{
        font-size:72px;
        margin-bottom:20px;
        text-align:left !important;
    }

    .ui-s008-card{
        padding:35px;
        border-radius:var(--ui-radius-lg);
    }

    .ui-s008-card::before{
        display:none;
    }
}


/*==============================================================================
    UI-S009
    Process Timeline
==============================================================================*/

.ui-s009-process{
    position:relative;
    margin-top:80px;
}

.ui-s009-line{
    position:absolute;

    top:45px;
    left:12.5%;
    right:12.5%;

    height:2px;

    background:#ECECEC;
}

.ui-s009-item{
    position:relative;

    text-align:center;
    padding:0 20px;
    z-index:2;
}

.ui-s009-icon{
    width:90px;
    height:90px;

    margin:0 auto 25px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#fff;
    color:var(--theme-color);

    box-shadow:var(--ui-shadow-md);
    font-size:34px;
    transition:var(--ui-transition);
}

.ui-s009-item:hover .ui-s009-icon{
    background:var(--ui-primary);
    color:#fff;
    transform:translateY(-8px);
}

.ui-s009-item span{
    display:block;

    margin-bottom:12px;
    color:var(--ui-accent);

    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
}

.ui-s009-item h4{
    margin-bottom:18px;
}

.ui-s009-item p{
    margin-bottom:0;
}


@media(max-width:991.98px){

    .ui-s009-process{
        margin-top:50px;
    }

    .ui-s009-line{
        display:none;
    }

    .ui-s009-item{
        margin-bottom:50px;
    }

    .ui-s009-item:last-child{
        margin-bottom:0;
    }

    .ui-s009-icon{
        width:70px;
        height:70px;

        font-size:28px;
    }
}


/*==============================================================================
    UI-S010
    Statistics / Achievements
==============================================================================*/

.ui-s010{
    background:var(--ui-light);
}

.ui-s010-stat{
    position:relative;
    padding:45px 20px;
    border-bottom:1px solid var(--ui-border);
}

.ui-s010-stat h2{
    margin:0 0 10px;

    font-size:72px;
    font-weight:800;
    line-height:1;

    color:var(--ui-primary);
}

.ui-s010-stat span{
    display:block;
    color:var(--ui-text);

    font-size:16px;
    font-weight:500;

    letter-spacing:.3px;
}

.ui-s010 .col-6:nth-last-child(-n+2) .ui-s010-stat{
    border-bottom:none;
}

.ui-s010-stat::before{
    content:"";
    position:absolute;

    left:0;
    top:50px;

    width:5px;
    height:55px;

    border-radius:50px;
    background:var(--ui-accent);
}

@media(max-width:991.98px){

    .ui-s010 .ui-section-header{
        margin-bottom:50px !important;
    }

    .ui-s010-stat{
        padding:30px 15px;
    }

    .ui-s010-stat h2{
        font-size:44px;
    }

    .ui-s010-stat span{
        font-size:15px;
    }

    .ui-s010-stat::before{
        top:35px;
        height:40px;
    }
}


/*==================================================
    UI-S011
    SERVICE CARDS
==================================================*/

.ui-s011-card{
    position:relative;
    height:100%;
    background:#fff;
    border:1px solid rgba(236,236,236,.9);
    border-radius:22px;
    overflow:hidden;
    transition:.35s ease;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
}

.ui-s011-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.ui-s011-image{
    position:relative;
    overflow:hidden;
}

.ui-s011-image img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform .6s ease;
}

.ui-s011-card:hover .ui-s011-image img{
    transform:scale(1.08);
}

.ui-s011-thumbnail{
    position:relative;
}

.ui-s011-icon{
    position:absolute;
    left:25px;
    bottom:-28px;

    width:56px;
    height:56px;

    background:var(--theme-color);
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    font-size:22px;

    /* box-shadow:0 12px 30px rgba(255,43,140,.35); */
}

.ui-s011-content{
    padding:50px 28px 28px;
}

.ui-s011-content h3{
    font-size:1.45rem;
    font-weight:700;
    line-height:1.25;
    margin-bottom:15px;
}

.ui-s011-content h3 span{
    display:block;
    color:var(--theme-primary);
}

.ui-s011-content p{
    color:#666;
    line-height:1.8;
    margin-bottom:22px;
}

.ui-s011-link{
    display:inline-flex;
    align-items:center;
    gap:10px;

    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.ui-s011-link i{
    font-size:18px;
    transition:.3s;
}

.ui-s011-link:hover i{
    transform:translateX(5px);
}
/* 
.ui-s011-link{
    display:inline-flex;
    align-items:center;
    gap:6px;

    font-weight:600;
    color:var(--theme-primary);
    transition:.3s;
}

.ui-s011-link i{
    font-size:18px;
    transition:.3s;
}

.ui-s011-link:hover{
    text-decoration:none;
}

.ui-s011-link:hover i{
    transform:translateX(5px);
} */

@media (max-width:991.98px){

    .ui-s011-content{
        padding:42px 22px 24px;
    }

    .ui-s011-content h3{
        font-size:1.3rem;
    }

}

@media (max-width:767.98px){

    .ui-s011-card{
        border-radius:18px;
    }

    .ui-s011-image img{
        aspect-ratio:16/10;
    }

    .ui-s011-icon{

        width:50px;
        height:50px;

        left:20px;
        bottom:-25px;

        font-size:20px;
    }

    .ui-s011-content{
        padding:38px 20px 20px;
    }

    .ui-s011-content h3{
        font-size:1.2rem;
    }
}



/*==================================================
    UI-S012
    FEATURE CARD
==================================================*/

.ui-s012-card{
    height:100%;
    padding:35px 30px;
    background:#fff;
    border:1px solid rgba(236,236,236,.9);
    border-radius:20px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
    transition:all .35s ease;
}

.ui-s012-card:hover{
    transform:translateY(-8px);
    border-color:rgba(255,45,146,.25);
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.ui-s012-icon{
    width:70px;
    height:70px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,45,146,.08);
    color:var(--theme-color);

    font-size:30px;
    margin-bottom:25px;
    transition:.35s;
}

.ui-s012-card:hover .ui-s012-icon{
    background:var(--theme-primary);
    color:#fff;
    transform:rotate(-8deg) scale(1.08);
}

.ui-s012-card h3{
    font-size:1.35rem;
    font-weight:700;
    margin-bottom:15px;
    line-height:1.35;
}

.ui-s012-card p{
    margin:0;
    color:#666;
    line-height:1.8;
}

@media (max-width:991.98px){

    .ui-s012-card{
        padding:30px 25px;
    }

    .ui-s012-icon{
        width:64px;
        height:64px;
        font-size:28px;
        margin-bottom:22px;
    }
}

@media (max-width:767.98px){

    .ui-s012-card{
        padding:25px 22px;
        border-radius:18px;
    }

    .ui-s012-icon{
        width:58px;
        height:58px;
        font-size:24px;
        margin-bottom:18px;
    }

    .ui-s012-card h3{
        font-size:1.2rem;
    }

    .ui-s012-card p{
        font-size:.95rem;
    }
}

/*==================================================
    UI-S013
    ICON FEATURE LIST
==================================================*/

.ui-s013-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    height:100%;
    padding:20px 0;
}

.ui-s013-icon{
    width:58px;
    height:58px;
    flex-shrink:0;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

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

    color:var(--theme-color);
    font-size:24px;
    transition:.35s ease;
}

.ui-s013-item:hover .ui-s013-icon{
    background:var(--theme-primary);
    color:#fff;
    transform:translateY(-5px);
}

.ui-s013-content h4{
    font-size:1.15rem;
    font-weight:700;
    margin-bottom:8px;
}

.ui-s013-content p{
    margin:0;
    color:#666;
    line-height:1.7;
}

@media (max-width:991.98px){

    .ui-s013-item{
        gap:15px;
        padding:15px 0;
    }

    .ui-s013-icon{
        width:52px;
        height:52px;
        font-size:22px;
    }

    .ui-s013-content h4{
        font-size:1.05rem;
    }
}


/*==================================================
    UI-S014
    BENEFITS
==================================================*/

.ui-s014-image{
    overflow:hidden;
    border-radius:24px;
}

.ui-s014-image img{
    width:100%;
    display:block;
    transition:transform .6s ease;
}

.ui-s014-image:hover img{
    transform:scale(1.05);
}

.ui-s014-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-bottom:35px;
}

.ui-s014-item:last-child{
    margin-bottom:0;
}

.ui-s014-icon{

    width:56px;
    height:56px;
    flex-shrink:0;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(255,45,146,.08);
    color:var(--theme-color);
    font-size:22px;
    transition:.35s ease;
}

.ui-s014-item:hover .ui-s014-icon{
    background:var(--theme-primary);
    color:#fff;
}

.ui-s014-item h4{
    margin-bottom:10px;
    font-size:1.25rem;
    font-weight:700;
}

.ui-s014-item p{
    margin:0;
    color:#666;
    line-height:1.8;
}

@media (max-width:991.98px){

    .ui-s014-image{
        margin-bottom:40px;
    }

    .ui-s014-item{
        margin-bottom:25px;
    }

    .ui-s014-icon{
        width:50px;
        height:50px;
        font-size:20px;
    }

    .ui-s014-item h4{
        font-size:1.1rem;
    }

}


/*==================================================
    UI-S015
    STEPS
==================================================*/

.ui-s015-step{
    position:relative;
    height:100%;
    padding:40px 30px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
    transition:all .35s ease;
}

.ui-s015-step:hover{
    transform:translateY(-8px);
    border-color:rgba(255,45,146,.25);
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.ui-s015-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:72px;
    height:72px;

    margin-bottom:30px;

    border-radius:50%;

    background:var(--theme-primary);
    color:#fff;

    font-size:1.5rem;
    font-weight:700;
    line-height:1;

    transition: all 0.3s;
}

.ui-s015-step h3{
    margin-bottom:18px;
    font-size:1.35rem;
    font-weight:700;
    line-height:1.4;
}

.ui-s015-step p{
    margin:0;
    color:#666;
    line-height:1.8;
}

@media (max-width:991.98px){

    .ui-s015-step{
        padding:30px 25px;
    }

    .ui-s015-number{
        width:60px;
        height:60px;
        margin-bottom:20px;
        font-size:1.25rem;
    }

    .ui-s015-step h3{
        font-size:1.2rem;
    }

}


/*==================================================
    UI-S016
    COMPARISON
==================================================*/

.ui-s016-card{
    height:100%;
    padding:40px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
    transition:.35s ease;
}

.ui-s016-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.ui-s016-featured{
    border:2px solid var(--theme-primary);
}

.ui-s016-header{
    margin-bottom:30px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(0,0,0,.08);

    font-size:1.6rem;
    font-weight:700;
    color:var(--theme-primary);
}

.ui-s016-list{
    margin:0;
    padding:0;
    list-style:none;
}

.ui-s016-list li{
    display:flex;
    align-items:flex-start;
    gap:15px;
    padding:14px 0;
    color:#555;
    line-height:1.7;
}

.ui-s016-list i{
    color:var(--theme-primary);
    font-size:1.1rem;
    margin-top:3px;
}

@media (max-width:991.98px){

    .ui-s016-card{
        padding:30px;
    }

    .ui-s016-header{
        margin-bottom:20px;
        font-size:1.35rem;
    }

}

/*==================================================
    UI-S016A
==================================================*/

.ui-s016a-table{
    background:#fff;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.ui-s016a-table th{
    background:#fafafa;
    text-align:center;
    font-weight:700;
}

.ui-s016a-table th:first-child{
    text-align:left;
}

.ui-s016a-table td{
    padding:18px 20px;
    vertical-align:middle;
}

.ui-s016a-table td:not(:first-child){
    text-align:center;
    width:140px;
}

.ui-s016a-table .bi-check-lg{
    color:#28a745;
    font-size:1.25rem;
}

.ui-s016a-table .bi-x-lg{
    color:#dc3545;
    font-size:1.15rem;
}


/*==================================================
    UI-S017
    FAQ
==================================================*/

.ui-s017-item{
    margin-bottom:20px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.04);
}

.ui-s017-question{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:24px 30px;

    color:#222;
    font-size:1.15rem;
    font-weight:600;

    text-decoration:none;
    transition:.3s ease;
}

.ui-s017-question:hover{
    text-decoration:none;
    color:var(--theme-primary);
}

.ui-s017-question i{
    color:var(--theme-primary);
    transition:.3s ease;
}

.ui-s017-question:not(.collapsed) i{
    transform:rotate(45deg);
}

.ui-s017-answer{
    padding:0 30px 25px;
    color:#666;
    line-height:1.8;
}

@media (max-width:991.98px){

    .ui-s017-question{
        padding:20px;
        font-size:1.05rem;
    }

    .ui-s017-answer{
        padding:0 20px 20px;
    }
}


/*==================================================
    UI-S018
    TABS
==================================================*/

.ui-s018-nav{
    margin-bottom:40px;
    gap:15px;
}

.ui-s018-nav .nav-link{
    padding:14px 30px;

    border:none;
    border-radius:50px;

    background:#f8f8f8;
    color:#555;
    font-weight:600;

    transition:.35s ease;
}

.ui-s018-nav .nav-link:hover{
    color:var(--theme-primary);
}

.ui-s018-nav .nav-link.active{
    background:var(--theme-color);
    color:#fff;

    box-shadow:0 10px 25px rgba(255,45,146,.25);
}

.ui-s018-content{
    background:#fff;
    padding:45px;

    border-radius:24px;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.ui-s018-content h3{
    margin-bottom:20px;
    font-size:1.8rem;
    font-weight:700;
}

.ui-s018-content p{
    margin:0;
    color:#666;
    line-height:1.9;
}

@media (max-width:991.98px){

    .ui-s018-nav{
        margin-bottom:30px;
    }

    .ui-s018-nav .nav-link{
        padding:12px 22px;
        margin-bottom:10px;
    }

    .ui-s018-content{
        padding:30px;
    }

    .ui-s018-content h3{
        font-size:1.5rem;
    }

}


/*==================================================
    UI-S019
    PACKAGE CARDS
==================================================*/

.ui-s019-card{
    position:relative;
    height:100%;
    padding:40px 35px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:24px;
    box-shadow:0 8px 30px rgba(0,0,0,.05);
    transition:.35s ease;
}

.ui-s019-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.ui-s019-featured{
    border:2px solid var(--theme-primary);
}

.ui-s019-badge{
    position:absolute;
    top:20px;
    right:20px;
    padding:6px 14px;
    border-radius:50px;
    background:var(--theme-primary);
    color:#fff;
    font-size:.75rem;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.ui-s019-card h3{
    margin-bottom:25px;
    font-size:1.6rem;
    font-weight:700;
}

.ui-s019-price{
    margin-bottom:30px;
    font-size:3rem;
    font-weight:700;
    color:var(--theme-color);
    line-height:1;
}

.ui-s019-price span{
    font-size:1rem;
    font-weight:400;
    color:#777;
}

.ui-s019-features{
    margin:0 0 35px;
    padding:0;
    list-style:none;
}

.ui-s019-features li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:5px 0;
    color:#555;
}

.ui-s019-features i{
    color:var(--theme-primary);
    margin-top:3px;
}

@media (max-width:991.98px){

    .ui-s019-card{
        padding:30px;
    }

    .ui-s019-price{
        font-size:2.5rem;
    }

    .ui-s019-card h3{
        font-size:1.4rem;
    }
}


/*==================================================
    UI-S019A
==================================================*/

.ui-s019a-table{
    margin:0;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.ui-s019a-table th{
    background:#fafafa;
    font-weight:700;
    border-top:none;
    padding:22px;
}

.ui-s019a-table td{
    padding:22px;
    vertical-align:middle;
}

.ui-s019a-table strong{
    display:block;
    margin-bottom:10px;
}

.ui-s019a-table p{
    margin:0;
    color:#666;
}

.ui-s019a-price{
    font-size:1.5rem;
    font-weight:700;
    color:var(--theme-primary);
}

.ui-s019a-price small{
    display:block;
    margin-top:8px;
    color:#666;
    font-weight:400;
}

@media (max-width:991.98px){

    .ui-s019a-table,
    .ui-s019a-table thead,
    .ui-s019a-table tbody,
    .ui-s019a-table th,
    .ui-s019a-table td,
    .ui-s019a-table tr{
        display:block;
    }

    .ui-s019a-table thead{
        display:none;
    }

    .ui-s019a-table tr{
        margin-bottom:25px;
        border:1px solid #eee;
        border-radius:18px;
        overflow:hidden;
    }

    .ui-s019a-table td{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
    }

    .ui-s019a-table td:nth-child(2)::before{
        content:"Standard";
        font-weight:700;
    }

    .ui-s019a-table td:nth-child(3)::before{
        content:"Premium";
        font-weight:700;
    }
}


/*==================================================
    UI-S020
    CTA BANNER
==================================================*/

.ui-s020-banner{
    padding:70px 60px;

    background:#fff;

    border:1px solid rgba(0,0,0,.08);
    border-radius:28px;
    box-shadow:0 12px 40px rgba(0,0,0,.06);
    position:relative;
    overflow:hidden;
}

.ui-s020-banner::before{
    content:"";
    position:absolute;

    top:-120px;
    right:-120px;

    width:280px;
    height:280px;

    border-radius:50%;
    background:rgba(255,45,146,.05);
}

.ui-s020-content{
    position:relative;
    z-index:2;
}

.ui-s020-content h2{
    margin-bottom:20px;

    font-size:2.3rem;
    font-weight:700;
    line-height:1.3;
}

.ui-s020-content p{
    margin:0;

    color:#666;
    line-height:1.9;
    max-width:650px;
}

.ui-s020-buttons{
    height:100%;
    display:flex;

    justify-content:center;
    align-items:center;

    flex-wrap:wrap;
    gap:15px;
    position:relative;
    z-index:2;
}

.ui-s020-buttons .btn{
    min-width:190px;
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
}

@media (max-width:991.98px){

    .ui-s020-banner{
        padding:45px 35px;
        text-align:center;
    }

    .ui-s020-content{
        margin-bottom:35px;
    }

    .ui-s020-content h2{
        font-size:1.9rem;
    }

    .ui-s020-buttons{
        justify-content:center;
    }
}


/*==================================================
    UI-S022
    MASONRY GALLERY
==================================================*/

.ui-s022-grid{
    column-count:4;
    column-gap:24px;
}

.ui-s022-item{
    position:relative;
    display:block;
    margin-bottom:24px;

    overflow:hidden;
    border-radius:22px;
    break-inside:avoid;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.ui-s022-item img{
    width:100%;
    display:block;
    transition:transform .6s ease;
}

.ui-s022-item::before{
    content:"";
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.4);
    opacity:0;

    transition:.35s ease;
    z-index:1;
}
/* 
.ui-s022-item::after{

    content:"+";
    position:absolute;

    top:50%;
    left:50%;

    width:70px;
    height:70px;

    margin-top:-35px;
    margin-left:-35px;

    border-radius:50%;

    background:#fff;
    color:var(--theme-primary);

    font-size:2rem;
    font-weight:600;

    display:flex;
    align-items:center;
    justify-content:center;

    opacity:0;

    transform:scale(.7);
    transition:.35s ease;
    z-index:2;
} */

.ui-s022-item:hover img{
    transform:scale(1.08);
}

.ui-s022-item:hover::before{
    opacity:1;
}

.ui-s022-item:hover::after{
    opacity:1;
    transform:scale(1);
}

@media (max-width:991.98px){

    .ui-s022-grid{
        column-count:2;
        column-gap:18px;
    }

    .ui-s022-item{
        margin-bottom:18px;
        border-radius:18px;
    }

    .ui-s022-item::after{
        width:56px;
        height:56px;

        margin-top:-28px;
        margin-left:-28px;

        font-size:1.5rem;
    }
}


/*==================================================
    UI-S023
    IMAGE COMPARISON
==================================================*/

.ui-s023-wrapper{
    padding:35px;
    background:#fff;

    border:1px solid rgba(0,0,0,.08);
    border-radius:24px;
    box-shadow:0 10px 35px rgba(0,0,0,.06);
}

.ui-s023-image{
    position:relative;
    overflow:hidden;
    border-radius:20px;
}

.ui-s023-image img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    display:block;
    transition:transform .6s ease;
}

.ui-s023-image:hover img{
    transform:scale(1.06);
}

.ui-s023-label{
    position:absolute;
    left:20px;
    top:20px;
    padding:8px 18px;

    background:rgba(0,0,0,.70);
    color:#fff;
    border-radius:30px;
    font-size:.85rem;
    font-weight:600;

    letter-spacing:.05em;
    text-transform:uppercase;
}

@media (max-width:991.98px){

    .ui-s023-wrapper{
        padding:25px;
    }

    .ui-s023-image{
        border-radius:16px;
    }

    .ui-s023-label{
        top:15px;
        left:15px;

        padding:6px 14px;
        font-size:.75rem;
    }
}


/*==================================================
    UI-S024
    IMAGE COLLAGE
==================================================*/

.ui-s024-collage{
    position:relative;
    min-height:620px;
}

.ui-s024-image{
    position:absolute;
    overflow:hidden;

    border-radius:24px;
    background:#fff;

    padding:8px;
    box-shadow:0 15px 45px rgba(0,0,0,.10);
}

.ui-s024-image img{
    width:100%;
    height:100%;

    object-fit:cover;
    border-radius:18px;

    transition:transform .6s ease;
}

.ui-s024-image:hover img{
    transform:scale(1.08);
}

/* Large */

.ui-s024-image-large{
    width:68%;
    height:420px;

    top:0;
    left:0;
}

/* Small */

.ui-s024-image-small{
    width:36%;
    height:220px;

    top:40px;
    right:0;
}

/* Medium */

.ui-s024-image-medium{
    width:46%;
    height:260px;

    bottom:0;
    right:8%;
}

.ui-s024-content h2{
    margin-bottom:25px;

    font-size:2.4rem;
    font-weight:700;
    line-height:1.3;
}

.ui-s024-content p{
    color:#666;
    line-height:1.9;
    margin-bottom:20px;
}

@media (max-width:991.98px){

    .ui-s024-collage{
        min-height:auto;
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:20px;
    }

    .ui-s024-image{
        position:relative;

        width:100%;
        height:260px;

        top:auto;
        left:auto;
        right:auto;
        bottom:auto;

        padding:6px;
    }

    .ui-s024-image-large{
        grid-column:span 2;
    }

    .ui-s024-content{
        margin-top:20px;
    }

    .ui-s024-content h2{
        font-size:2rem;
    }
}


/*==================================================
    UI-S025
    LOGO GRID
==================================================*/

.ui-s025-item{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:30px;
    height:140px;

    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:22px;
    box-shadow:0 10px 35px rgba(0,0,0,.05);
    transition:all .35s ease;
}

.ui-s025-item:hover{
    transform:translateY(-8px);
    border-color:rgba(255,45,146,.25);
    box-shadow:0 18px 45px rgba(0,0,0,.10);
}

.ui-s025-item img{
    max-width:100%;
    max-height:65px;

    width:auto;
    height:auto;

    object-fit:contain;
    filter:grayscale(100%);
    opacity:.75;
    transition:all .35s ease;
}

.ui-s025-item:hover img{
    filter:none;
    opacity:1;
    transform:scale(1.05);
}

@media (max-width:991.98px){

    .ui-s025-item{
        height:120px;
        padding:20px;
        border-radius:18px;
    }

    .ui-s025-item img{
        max-height:55px;
    }
}


/*==================================================
    UI-S026 : LOGO MARQUEE
==================================================*/

.ui-s026 {
    padding:90px 0;
    background:#ffffff;
    overflow:hidden;
}

/* HEADER
-------------------------------------------------- */

.ui-s026-header {
    max-width:750px;
    margin:0 auto 60px;
}

.ui-s026-label {
    display:inline-block;

    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;

    margin-bottom:18px;
}

.ui-s026-title {
    font-size:42px;
    line-height:1.2;
    font-weight:700;
    color:#111;
    margin-bottom:20px;
}

.ui-s026-description {
    font-size:17px;
    line-height:1.7;
    color:#666;
    margin:0;
}

/* MARQUEE
-------------------------------------------------- */

.ui-s026-marquee-wrapper {
    position:relative;
    width:100%;
    overflow:hidden;
}

.ui-s026-track {
    display:flex;
    align-items:center;

    width:max-content;
    gap:30px;
}

.ui-s026-logo {
    width:180px;
    height:110px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:25px;

    background:#ffffff;
    border-radius:18px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.ui-s026-logo img {

    max-width:100%;
    max-height:55px;

    object-fit:contain;
    filter:grayscale(100%);

    opacity:.65;
    transition:.4s ease;
}

.ui-s026-logo:hover img {
    filter:grayscale(0);
    opacity:1;
}

@media (max-width:991.98px){

    .ui-s026 {
        padding:70px 0;
    }

    .ui-s026-header {
        margin-bottom:45px;
    }

    .ui-s026-title {
        font-size:32px;
    }

    .ui-s026-description {
        font-size:16px;
    }

    .ui-s026-logo {
        width:150px;
        height:95px;

        padding:20px;
    }
}


/*==================================================
    UI-S027 : TEAM
==================================================*/

.ui-s027{
    padding:90px 0;
    background:#f8f9fb;
}

.ui-s027-header{
    max-width:760px;
    margin:0 auto 60px;
}

.ui-s027-label{
    display:inline-block;
    margin-bottom:18px;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}

.ui-s027-title{
    margin-bottom:20px;
    font-size:42px;
    font-weight:700;
    line-height:1.2;
    color:#111;
}

.ui-s027-description{
    margin:0;
    font-size:17px;
    line-height:1.8;
    color:#666;
}

/* Card */

.ui-s027-card{
    height:100%;
    overflow:hidden;
    border-radius:20px;
    background:#fff;
    box-shadow:0 18px 45px rgba(0,0,0,.06);
    transition:.35s ease;
}

.ui-s027-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 60px rgba(0,0,0,.10);
}

.ui-s027-image{
    overflow:hidden;
    aspect-ratio:3/4;
}

.ui-s027-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.6s ease;
}

.ui-s027-card:hover .ui-s027-image img{
    transform:scale(1.08);
}

.ui-s027-content{
    padding:35px;
}

.ui-s027-name{
    margin-bottom:8px;
    font-size:26px;
    font-weight:700;
    color:#111;
}

.ui-s027-position{
    margin-bottom:18px;
    color:var(--ui-accent);
    font-size:15px;
    font-weight:600;
}

.ui-s027-text{
    margin-bottom:28px;
    color:#666;
    line-height:1.8;
}

.ui-s027-social{
    display:flex;
    gap:12px;
}

.ui-s027-social a{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-decoration:none;
    background:#f3f5f8;
    color:#555;
    transition:.3s ease;
}

.ui-s027-social a:hover{
    background:#111;
    color:#fff;
}

@media (max-width:991.98px){

    .ui-s027{
        padding:70px 0;
    }

    .ui-s027-header{
        margin-bottom:45px;
    }

    .ui-s027-title{
        font-size:32px;
    }

    .ui-s027-description{
        font-size:16px;
    }

    .ui-s027-card{
        margin-bottom:30px;
    }

    .ui-s027-content{
        padding:28px;
    }

    .ui-s027-name{
        font-size:22px;
    }
}



/*==================================================
    UI-S028 : PROFILE
==================================================*/

.ui-s028{
    padding:100px 0;
    background:#fff;
}

.ui-s028-image{
    overflow:hidden;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.ui-s028-image img{
    width:100%;
    display:block;
    transition:.6s ease;
}

.ui-s028-image:hover img{
    transform:scale(1.05);
}

/* Content */

.ui-s028-content{
    padding-left:40px;
}

.ui-s028-label{
    display:inline-block;
    margin-bottom:20px;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}

.ui-s028-name{
    margin-bottom:10px;
    font-size:48px;
    font-weight:700;
    line-height:1.15;
    color:#111;
}

.ui-s028-designation{
    margin-bottom:30px;
    font-size:18px;
    color: var(--ui-accent);
    font-weight:600;
}

.ui-s028-content p{
    margin-bottom:24px;
    color:#666;
    line-height:1.9;
}

.ui-s028-quote{
    margin:40px 0;
    padding-left:28px;
    border-left:4px solid var(--ui-accent);
    font-size:22px;
    font-style:italic;
    line-height:1.6;
    color:#111;
}

.ui-s028-actions{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

@media (max-width:991.98px){

    .ui-s028{
        padding:70px 0;
    }

    .ui-s028-image{
        margin-bottom:40px;
    }

    .ui-s028-content{
        padding-left:0;
    }

    .ui-s028-name{
        font-size:34px;
    }

    .ui-s028-designation{
        font-size:17px;
    }

    .ui-s028-quote{
        margin:30px 0;
        font-size:19px;
    }
}


/*==================================================
    UI-S029 : TESTIMONIALS
==================================================*/

.ui-s029{
    padding:100px 0;
    background:#f8f9fb;
}

.ui-s029-header{
    max-width:760px;
    margin:0 auto 60px;
}

.ui-s029-label{
    display:inline-block;
    margin-bottom:18px;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#777;
}

.ui-s029-title{
    margin-bottom:20px;
    font-size:42px;
    font-weight:700;
    line-height:1.2;
}

.ui-s029-description{
    font-size:17px;
    line-height:1.8;
    color:#666;
}

.ui-s029-card{
    position:relative;
    height:100%;
    padding:40px;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 20px 55px rgba(0,0,0,.06);
    transition:.35s ease;
}

.ui-s029-card:hover{
    transform:translateY(-10px);
    box-shadow:0 35px 70px rgba(0,0,0,.10);
}

.ui-s029-quote-icon{
    position:absolute;
    top:25px;
    right:30px;
    font-size:70px;
    color:rgba(0,0,0,.05);
}

.ui-s029-text{
    position:relative;
    margin-bottom:35px;
    color:#555;
    line-height:1.9;
}

.ui-s029-footer{
    display:flex;
    align-items:center;
}

.ui-s029-avatar{
    width:80px;
    height:80px;
    margin-right:18px;
    overflow:hidden;
    border-radius:50%;
}

.ui-s029-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ui-s029-info h4{
    margin-bottom:5px;
    font-size:20px;
    font-weight:700;
}

.ui-s029-info span{
    color:#777;
    font-size:15px;
}

@media (max-width:991.98px){

    .ui-s029{
        padding:70px 0;
    }

    .ui-s029-header{
        margin-bottom:45px;
    }

    .ui-s029-title{
        font-size:32px;
    }

    .ui-s029-card{
        margin-bottom:30px;
        padding:30px;
    }

    .ui-s029-avatar{
        width:65px;
        height:65px;
    }
}


/*==================================================
    UI-S030 : FEATURED TESTIMONIAL
==================================================*/

.ui-s030{
    padding:110px 0;
    background:#ffffff;
}

.ui-s030-image{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.ui-s030-image img{
    width:100%;
    display:block;
    transition:.6s ease;
}

.ui-s030-image:hover img{
    transform:scale(1.05);
}

.ui-s030-badge{

    position:absolute;

    left:25px;
    bottom:25px;

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

    padding:12px 18px;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(12px);
    border-radius:50px;

    font-size:14px;
    font-weight:600;
}

.ui-s030-content{
    position:relative;
    padding-left:50px;
}

.ui-s030-label{
    display:inline-block;
    margin-bottom:20px;

    font-size:13px;
    letter-spacing:2px;
    font-weight:600;
    text-transform:uppercase;

    color:#777;
}

.ui-s030-quote-icon{
    position:absolute;

    top:40px;
    right:0;

    font-size:90px;
    color:rgba(0,0,0,.05);
}

.ui-s030-quote{
    margin:0 0 40px;

    font-size:30px;
    line-height:1.55;
    font-weight:300;
    color:#111;
}

.ui-s030-author h3{
    margin-bottom:6px;

    font-size:28px;
    font-weight:700;
}

.ui-s030-author span{
    display:block;

    color: var(--ui-accent);
    font-weight:600;

    margin-bottom:4px;
}

.ui-s030-author small{
    font-size:15px;
    color:#777;
}

.ui-s030-rating{
    margin-top:35px;
    font-size:20px;
}

.ui-s030-rating i{
    margin-right:4px;
}

@media (max-width:991.98px){

    .ui-s030{
        padding:70px 0;
    }

    .ui-s030-image{
        margin-bottom:40px;
    }

    .ui-s030-content{
        padding-left:0;
    }

    .ui-s030-quote{
        font-size:24px;
    }

    .ui-s030-author h3{
        font-size:24px;
    }

    .ui-s030-quote-icon{
        display:none;
    }
}



/*==================================================
    UI-S031 : BLOG CARDS
==================================================*/

.ui-s031{
    padding:100px 0;
    background:#f8f9fb;
}

.ui-s031-header{
    max-width:760px;
    margin:0 auto 60px;
}

.ui-s031-label{
    display:inline-block;
    margin-bottom:18px;

    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;

    color:#777;
}

.ui-s031-title{
    margin-bottom:20px;

    font-size:42px;
    font-weight:700;
    line-height:1.2;
}

.ui-s031-description{
    font-size:17px;
    line-height:1.8;
    color:#666;
}

/* CARD */

.ui-s031-card{
    height:100%;
    overflow:hidden;
    background:#fff;

    border-radius:22px;
    box-shadow:0 18px 45px rgba(0,0,0,.06);

    transition:.35s ease;
}

.ui-s031-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(0,0,0,.10);
}

.ui-s031-image{
    position:relative;
    display:block;
    overflow:hidden;

    aspect-ratio:16/10;
}

.ui-s031-image img{
    width:100%;
    height:100%;

    object-fit:cover;
    transition:.6s;
}

.ui-s031-card:hover .ui-s031-image img{
    transform:scale(1.08);
}

.ui-s031-category{
    position:absolute;

    left:20px;
    top:20px;

    padding:8px 14px;

    background:var(--theme-color);
    color: #fff;

    backdrop-filter:blur(10px);
    border-radius:50px;

    font-size:13px;
    font-weight:600;
}

.ui-s031-content{
    padding:30px;
}

.ui-s031-meta{
    display:flex;

    gap:20px;
    margin-bottom:18px;

    font-size:14px;
    color:#777;
}

.ui-s031-meta i{
    margin-right:6px;
}

.ui-s031-heading{
    margin-bottom:18px;
    font-size:26px;
    line-height:1.35;
}

.ui-s031-heading a{
    color:#111;
    text-decoration:none;
}

.ui-s031-heading a:hover{
    color:#111;
}

.ui-s031-text{
    margin-bottom:30px;
    line-height:1.8;
    color:#666;
}

.ui-s031-link{
    display:inline-flex;
    align-items:center;

    gap:10px;

    font-weight:600;
    text-decoration:none;
}

.ui-s031-link i{
    transition:.3s;
}

.ui-s031-link:hover i{
    transform:translateX(5px);
}

@media (max-width:991.98px){

    .ui-s031{
        padding:70px 0;
    }

    .ui-s031-header{
        margin-bottom:45px;
    }

    .ui-s031-title{
        font-size:32px;
    }

    .ui-s031-content{
        padding:25px;
    }

    .ui-s031-heading{
        font-size:22px;
    }

    .ui-s031-card{
        margin-bottom:30px;
    }
}


/*==================================================
    UI-S032 : FEATURED BLOG
==================================================*/

.ui-s032{
    padding:100px 0;
    background:#ffffff;
}

.ui-s032-image{
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:24px;
    aspect-ratio:16/10;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
}

.ui-s032-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.7s ease;
}

.ui-s032-image:hover img{
    transform:scale(1.08);
}

.ui-s032-category{
    position:absolute;
    top:25px;
    left:25px;
    padding:10px 18px;
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(10px);
    border-radius:50px;
    font-size:13px;
    font-weight:600;
}

.ui-s032-content{
    padding-left:55px;
}

.ui-s032-meta{
    display:flex;
    gap:25px;
    margin-bottom:22px;
    color:#777;
    font-size:14px;
}

.ui-s032-title{
    margin-bottom:24px;
    font-size:46px;
    line-height:1.18;
    font-weight:700;
}

.ui-s032-title a{
    color:#111;
    text-decoration:none;
}

.ui-s032-title a:hover{
    color:#111;
}

.ui-s032-description{
    margin-bottom:35px;
    font-size:17px;
    line-height:1.9;
    color:#666;
}

.ui-s032-author{
    display:flex;
    align-items:center;
    margin-bottom:40px;
}

.ui-s032-author-image{
    width:70px;
    height:70px;
    overflow:hidden;
    border-radius:50%;
    margin-right:18px;
}

.ui-s032-author-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ui-s032-author-info h4{
    margin-bottom:4px;
    font-size:20px;
}

.ui-s032-author-info span{
    color:#777;
}

.ui-s032-button{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    text-decoration:none;
}

.ui-s032-button i{
    transition:.3s;
}

.ui-s032-button:hover i{
    transform:translateX(6px);
}

@media (max-width:991.98px){

    .ui-s032{
        padding:70px 0;
    }

    .ui-s032-image{
        margin-bottom:40px;
    }

    .ui-s032-content{
        padding-left:0;
    }

    .ui-s032-title{
        font-size:34px;
    }

    .ui-s032-description{
        font-size:16px;
    }
}


/*==================================================
UI-S033 : EVENT CARDS
==================================================*/

.ui-s033 .event-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
    display:flex;
    flex-direction:column;
}

.ui-s033 .event-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.14);
}

.ui-s033 .event-image{
    position:relative;
    overflow:hidden;
}

.ui-s033 .event-image img{
    width:100%;
    height:280px;
    object-fit:cover;
    transition:transform .6s ease;
}

.ui-s033 .event-card:hover .event-image img{
    transform:scale(1.08);
}

.ui-s033 .event-date{
    position:absolute;
    top:20px;
    left:20px;
    width:72px;
    height:72px;
    border-radius:18px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    line-height:1;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.ui-s033 .event-date strong{
    font-size:28px;
    font-weight:700;
}

.ui-s033 .event-date small{
    margin-top:4px;
    letter-spacing:2px;
    font-size:11px;
}

.ui-s033 .event-category{
    position:absolute;
    right:20px;
    bottom:20px;
    background:var(--theme-color);
    color:#fff;
    padding:8px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
}

.ui-s033 .event-content{
    padding:35px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.ui-s033 .event-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:18px;
    font-size:14px;
    color:#777;
}

.ui-s033 .event-meta span{
    display:flex;
    align-items:center;
}

.ui-s033 .event-meta i{
    margin-right:8px;
    color:var(--theme-color);
}

.ui-s033 h3{
    font-size:26px;
    margin-bottom:18px;
}

.ui-s033 p{
    margin-bottom:28px;
    flex:1;
}

.ui-s033 .btn{
    align-self:flex-start;
}

@media (max-width:991.98px){

    .ui-s033 .event-content{
        padding:28px;
    }

    .ui-s033 h3{
        font-size:22px;
    }

}

@media (max-width:767.98px){

    .ui-s033 .event-image img{
        height:230px;
    }

    .ui-s033 .event-content{
        padding:24px;
    }

    .ui-s033 .event-date{
        width:64px;
        height:64px;
    }

    .ui-s033 .event-date strong{
        font-size:24px;
    }

    .ui-s033 .event-meta{
        flex-direction:column;
        gap:10px;
    }
}


/*==================================================
UI-S033A : HORIZONTAL EVENT CARDS
==================================================*/

.ui-s033a{
    padding:80px 0;
}

.ui-s033a .s033a-event-list{
    display:flex;
    flex-direction:column;
    gap:35px;
}

.ui-s033a .s033a-event-card{
    display:grid;
    grid-template-columns:90px 1fr 360px;
    gap:35px;
    align-items:center;
    padding:32px;
    background:#fff;
    border:1px solid rgba(0,0,0,.05);
    border-radius:26px;
    box-shadow: var(--ui-shadow-md);
    transition:.4s;
    overflow:hidden;
    position:relative;
}

.ui-s033a .s033a-event-card::before{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:4px;
    background:var(--theme-color);
    border-radius:20px;
    transform:scaleY(1);
    transition:.4s;
}

.ui-s033a .s033a-event-card:hover{
    transform:translateY(-8px);
    box-shadow: var(--ui-shadow-lg);
}

.ui-s033a .s033a-event-card:hover::before{
    transform:scaleY(1);
}

/*--------------------------------------------------
Date
--------------------------------------------------*/

.ui-s033a .s033a-event-date{
    text-align:center;
    display: block;
    height: 100%;
}

.ui-s033a .s033a-event-day{
    display:block;
    font-size:15px;
    font-weight:600;
    text-transform:uppercase;
    color:#666;
    margin-bottom:8px;
}

.ui-s033a .s033a-event-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:72px;
    height:72px;
    background:linear-gradient(
        135deg,
        var(--theme-color),
        var(--theme-primary)
    );
    color:#fff;
    font-size:34px;
    font-weight:700;
    border-radius:20px;
    box-shadow:0 15px 30px rgba(var(--theme-color-rgb),.28);
}

/*--------------------------------------------------
Content
--------------------------------------------------*/

.ui-s033a .s033a-event-meta{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:18px;
    font-size:14px;
    color:#777;
}

.ui-s033a .s033a-event-meta span{
    display:flex;
    align-items:center;
}

.ui-s033a .s033a-event-meta i{
    margin-right:8px;
    color:var(--theme-color);
}

.ui-s033a h3{
    margin-bottom:18px;
    font-size:2rem;
    line-height:1.25;
}

.ui-s033a h3 a{
    color:#111;
    text-decoration:none;
    transition:.3s;
}

.ui-s033a h3 a:hover{
    color:var(--theme-color);
}

.ui-s033a p{
    color:#666;
    margin-bottom:24px;
    line-height:1.9;
}

/*--------------------------------------------------
Read More
--------------------------------------------------*/

.ui-s033a .s033a-event-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:var(--theme-color);
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.ui-s033a .s033a-event-link i{
    transition:.3s;
}

.ui-s033a .s033a-event-link:hover{
    gap:16px;
}

/*--------------------------------------------------
Image
--------------------------------------------------*/

.ui-s033a .s033a-event-image{
    border-radius:22px;
    overflow:hidden;
}

.ui-s033a .s033a-event-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:.6s;
}

.ui-s033a .s033a-event-card:hover .s033a-event-image img{
    transform:scale(1.08);
}

/*--------------------------------------------------
Alternate Layout
--------------------------------------------------*/

/* .ui-s033a .s033a-event-card:nth-child(even){
    grid-template-columns:360px 1fr 90px;
}

.ui-s033a .s033a-event-card:nth-child(even) .s033a-event-image{
    order:1;
}

.ui-s033a .s033a-event-card:nth-child(even) .s033a-event-content{
    order:2;
}

.ui-s033a .s033a-event-card:nth-child(even) .s033a-event-date{
    order:3;
} */

/*==================================================
UI-S033A : RESPONSIVE
==================================================*/

@media (max-width:991.98px){

    .ui-s033a{
        padding:60px 0;
    }

    .ui-s033a .s033a-event-list{
        gap:25px;
    }

    .ui-s033a .s033a-event-card,
    .ui-s033a .s033a-event-card:nth-child(even){
        display:flex;
        flex-direction:column;

        gap:22px;
        padding:22px;
        margin-bottom: 25px;
    }

    .ui-s033a .s033a-event-card::before{
        top:0;
        left:0;
        right:0;
        bottom:auto;

        width:100%;
        height:4px;

        transform:scaleX(.35);
        transform-origin:left;
        display:none;
    }

    .ui-s033a .s033a-event-card:hover::before{
        transform:scaleX(1);
    }

    /*------------------------------------
    Image
    ------------------------------------*/

    .ui-s033a .s033a-event-image{
        order:1;
        width:100%;
    }

    .ui-s033a .s033a-event-image img{
        aspect-ratio:16/9;
    }

    /*------------------------------------
    Date
    ------------------------------------*/

    .ui-s033a .s033a-event-date{
        order:2;
        /* display:flex; */
        display:none;

        align-items:center;
        justify-content:flex-start;
        gap:15px;

        text-align:left;
    }

    .ui-s033a .s033a-event-day{
        margin:0;
        min-width:42px;
    }

    .ui-s033a .s033a-event-number{
        width:58px;
        height:58px;

        border-radius:16px;
        font-size:26px;
        flex-shrink:0;
    }

    /*------------------------------------
    Content
    ------------------------------------*/

    .ui-s033a .s033a-event-content{
        order:3;
    }

    .ui-s033 .event-meta{
        flex-direction:column;
        gap:10px;
    }

    .ui-s033a h3{
        font-size:1.55rem;
        margin-bottom:15px;
    }

    .ui-s033a p{
        margin-bottom:20px;
        line-height:1.8;
    }

    .ui-s033a .s033a-event-link{
        width:100%;
        justify-content:center;

        padding:14px 20px;
        border-radius:50px;
        background:var(--ui-primary);
        color: #fff;
    }
}



/*==================================================
UI-S034 : FEATURED EVENT
==================================================*/

.ui-s034 .featured-event{
    background:#ffffff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.ui-s034 .featured-event-image{
    position:relative;
    height:100%;
    min-height:650px;
    overflow:hidden;
}

.ui-s034 .featured-event-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .8s ease;
}

.ui-s034 .featured-event:hover .featured-event-image img{
    transform:scale(1.08);
}

.ui-s034 .featured-event-date{
    position:absolute;
    left:35px;
    bottom:35px;
    width:120px;
    height:120px;
    border-radius:24px;
    background:#ffffff;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.ui-s034 .featured-event-date span{
    font-size:44px;
    font-weight:700;
    line-height:1;
}

.ui-s034 .featured-event-date small{
    margin-top:10px;
    text-align:center;
    line-height:1.4;
    font-size:12px;
    letter-spacing:1px;
    font-weight:600;
}

.ui-s034 .featured-event-content{
    padding:70px;
}

.ui-s034 .featured-event-label{
    display:inline-block;
    padding:10px 20px;
    border-radius:50px;
    background:rgba(var(--theme-color-rgb),.12);
    color:var(--theme-color);
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.ui-s034 .featured-event-content h2{
    margin-bottom:25px;
}

.ui-s034 .featured-event-content p{
    margin-bottom:35px;
}

.ui-s034 .featured-event-meta{
    margin-bottom:40px;
}

.ui-s034 .featured-event-meta>div{
    display:flex;
    align-items:center;
    margin-bottom:18px;
}

.ui-s034 .featured-event-meta i{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#f5f5f5;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--theme-color);
    margin-right:18px;
    font-size:18px;
}

.ui-s034 .featured-event-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

@media (max-width:991.98px){

    .ui-s034 .featured-event-image{
        min-height:420px;
    }

    .ui-s034 .featured-event-content{
        padding:40px 30px;
    }

    .ui-s034 .featured-event-date{
        width:90px;
        height:90px;
        left:25px;
        bottom:25px;
    }

    .ui-s034 .featured-event-date span{
        font-size:34px;
    }

    .ui-s034 .featured-event-date small{
        font-size:10px;
    }

    .ui-s034 .featured-event-buttons{
        flex-direction:column;
        align-items:flex-start;
    }
}


/*==================================================
UI-S035 : COUNTRY CARDS
==================================================*/

.ui-s035 .country-card{
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
    display:flex;
    flex-direction:column;
}

.ui-s035 .country-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.14);
}

.ui-s035 .country-image{
    overflow:hidden;
}

.ui-s035 .country-image img{
    width:100%;
    aspect-ratio:4/3;
    object-fit:cover;
    transition:transform .6s ease;
}

.ui-s035 .country-card:hover .country-image img{
    transform:scale(1.08);
}

.ui-s035 .country-content{
    padding:35px;
    text-align:center;
    display:flex;
    flex-direction:column;
    flex:1;
}

.ui-s035 .country-flag{
    width:72px;
    height:72px;
    border-radius:50%;
    overflow:hidden;
    margin:-70px auto 25px;
    border:5px solid #fff;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.ui-s035 .country-flag img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ui-s035 .country-content h3{
    margin-bottom:15px;
}

.ui-s035 .country-content p{
    margin-bottom:25px;
    flex:1;
}

.ui-s035 .country-meta{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:30px;
}

.ui-s035 .country-meta span{
    display:flex;
    justify-content:center;
    align-items:center;
    color:#666;
}

.ui-s035 .country-meta i{
    color:var(--theme-color);
    margin-right:10px;
}

@media (max-width:991.98px){

    .ui-s035 .country-content{
        padding:30px;
    }

    .ui-s035 .country-flag{
        width:64px;
        height:64px;
        margin:-60px auto 20px;
    }
}


/*==================================================
UI-S036 : PROGRAMME CARDS
==================================================*/

.ui-s036 .programme-card{
    height:100%;
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.4s;
    display:flex;
    flex-direction:column;
}

.ui-s036 .programme-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 60px rgba(0,0,0,.14);
}

.ui-s036 .programme-image{
    position:relative;
    overflow:hidden;
}

.ui-s036 .programme-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:transform .7s ease;
}

.ui-s036 .programme-card:hover .programme-image img{
    transform:scale(1.08);
}

.ui-s036 .programme-category{
    position:absolute;
    top:20px;
    left:20px;
    background:var(--theme-color);
    color:#fff;
    padding:8px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.ui-s036 .programme-content{
    padding:35px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.ui-s036 .programme-icon{
    width:72px;
    height:72px;
    border-radius:18px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-bottom:25px;
}

.ui-s036 .programme-content h3{
    margin-bottom:18px;
}

.ui-s036 .programme-content p{
    margin-bottom:25px;
}

.ui-s036 .programme-features{
    list-style:none;
    margin:0 0 35px;
    padding:0;
    flex:1;
}

.ui-s036 .programme-features li{
    position:relative;
    padding-left:28px;
    margin-bottom:12px;
}

.ui-s036 .programme-features li::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--theme-color);
}

.ui-s036 .btn{
    align-self:flex-start;
}

@media (max-width:991.98px){

    .ui-s036 .programme-content{
        padding:30px;
    }

    .ui-s036 .programme-icon{
        width:60px;
        height:60px;
        font-size:24px;
        margin-bottom:20px;
    }

    .ui-s036 .programme-content h3{
        font-size:26px;
    }
}


/*==================================================
UI-S037 : DOWNLOADS
==================================================*/

.ui-s037 .downloads-list{
    display:flex;
    flex-direction:column;
    gap:25px;
}

.ui-s037 .download-item{
    display:flex;
    align-items:center;
    gap:35px;
    padding:35px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.35s;
}

.ui-s037 .download-item:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 55px rgba(0,0,0,.12);
}

.ui-s037 .download-icon{
    width:90px;
    height:90px;
    flex-shrink:0;
    border-radius:22px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
}

.ui-s037 .download-content{
    flex:1;
}

.ui-s037 .download-category{
    display:inline-block;
    margin-bottom:12px;
    padding:6px 16px;
    border-radius:50px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    font-size:13px;
    font-weight:600;
}

.ui-s037 .download-content h3{
    margin-bottom:15px;
}

.ui-s037 .download-content p{
    margin-bottom:0;
}

.ui-s037 .download-meta{
    min-width:180px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:12px;
}

.ui-s037 .download-meta span{
    color:#777;
    font-size:14px;
}

@media (max-width:991.98px){

    .ui-s037 .download-item{
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
        padding:30px;
    }

    .ui-s037 .download-meta{
        min-width:100%;
        align-items:flex-start;
    }
}



/*==================================================
UI-S038 : RELATED CONTENT
==================================================*/

.ui-s038 .related-card{
    height:100%;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.4s;
    display:flex;
    flex-direction:column;
}

.ui-s038 .related-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 60px rgba(0,0,0,.14);
}

.ui-s038 .related-image{
    position:relative;
    overflow:hidden;
}

.ui-s038 .related-image img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    transition:transform .7s ease;
}

.ui-s038 .related-card:hover .related-image img{
    transform:scale(1.08);
}

.ui-s038 .related-type{
    position:absolute;
    top:20px;
    left:20px;
    background:var(--theme-color);
    color:#fff;
    padding:8px 18px;
    border-radius:50px;
    font-size:13px;
    font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
}

.ui-s038 .related-content{
    padding:35px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.ui-s038 .related-category{
    display:inline-block;
    margin-bottom:15px;
    color:var(--theme-color);
    font-size:14px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.ui-s038 .related-content h3{
    margin-bottom:18px;
}

.ui-s038 .related-content p{
    margin-bottom:30px;
    flex:1;
}

.ui-s038 .related-link{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    text-decoration:none;
    transition:.3s;
}

.ui-s038 .related-link i{
    transition:.3s;
}

.ui-s038 .related-card:hover .related-link i{
    transform:translateX(6px);
}

@media (max-width:991.98px){

    .ui-s038 .related-content{
        padding:30px;
    }

    .ui-s038 .related-content h3{
        font-size:26px;
    }
}



/*==================================================
UI-S039 : CONTACT DETAILS
==================================================*/

.ui-s039 .contact-card{
    height:100%;
    background:#fff;
    border-radius:24px;
    padding:45px 35px;
    text-align:center;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.35s;
}

.ui-s039 .contact-card:hover{
    transform:translateY(-8px);
    box-shadow:0 28px 60px rgba(0,0,0,.14);
}

.ui-s039 .contact-icon{
    width:82px;
    height:82px;
    margin:0 auto 25px;
    border-radius:22px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.ui-s039 .contact-card h3{
    margin-bottom:20px;
}

.ui-s039 .contact-card p{
    margin-bottom:12px;
}

.ui-s039 .contact-card a{
    color:inherit;
    text-decoration:none;
    transition:.3s;
}

.ui-s039 .contact-card a:hover{
    color:var(--theme-color);
}

.ui-s039 .contact-social{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:18px;
    margin-top:35px;
}

.ui-s039 .contact-social a{
    width:56px;
    height:56px;
    border-radius:50%;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--theme-color);
    font-size:20px;
    text-decoration:none;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.ui-s039 .contact-social a:hover{
    background:var(--theme-color);
    color:#fff;
    transform:translateY(-5px);
}

@media (max-width:991.98px){

    .ui-s039 .contact-card{
        padding:35px 25px;
    }

    .ui-s039 .contact-icon{
        width:70px;
        height:70px;
        font-size:28px;
        margin-bottom:20px;
    }

    .ui-s039 .contact-social{
        gap:14px;
        margin-top:25px;
    }
}



/*==================================================
UI-S040 : CONTACT FORM
==================================================*/

.ui-s040 .contact-wrapper{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:var(--ui-shadow-md);
}

.ui-s040 .contact-info{
    background:linear-gradient(135deg,#2A1458 0%,#44237f 100%);
    color:#fff;
    padding:70px 60px;
    height:100%;
}

.ui-s040 .contact-info h2{
    color:#fff;
    margin:20px 0 25px;
}

.ui-s040 .contact-info>p{
    opacity:.9;
    margin-bottom:45px;
}

.ui-s040 .contact-info-list{
    display:flex;
    flex-direction:column;
    gap:45px;
}

.ui-s040 .contact-info-item{
    display:flex;
    align-items:flex-start;
}

.ui-s040 .contact-info-icon{
    width:60px;
    height:60px;
    border-radius:18px;
    background:rgba(255,255,255,.15);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    margin-right:18px;
    flex-shrink:0;
}

.ui-s040 .contact-info-item h6{
    color:#fff;
    margin-bottom:6px;
}

.ui-s040 .contact-info-item p{
    margin:0;
    opacity:.9;
}

.ui-s040 .contact-form-wrapper{
    padding:70px 60px;
}

.ui-s040 .form-control{
    height:58px;
    border:none;
    border-radius:16px;
    background:#f7f8fb;
    padding:0 20px;
    box-shadow:none;
}

.ui-s040 textarea.form-control{
    height:auto;
    min-height:180px;
    padding:18px 20px;
    resize:vertical;
}

.ui-s040 .form-control:focus{
    /* background:#fff; */
    border:1px solid var(--theme-border);
    box-shadow:none;
}

.ui-s040 .btn{
    min-width:190px;
}


@media (max-width:991.98px){

    .ui-s040 .contact-info{
        padding:45px 30px;
    }

    .ui-s040 .contact-form-wrapper{
        padding:45px 30px;
    }

    .ui-s040 .contact-info>p{
        margin-bottom:35px;
    }
}



/*==================================================
UI-S041 : OFFICE LOCATIONS
==================================================*/

.ui-s041 .office-card{
    height:100%;
    background:#fff;
    border-radius:26px;
    padding:40px;
    box-shadow:0 20px 55px rgba(0,0,0,.08);
    transition:.35s;
    display:flex;
    flex-direction:column;
}

.ui-s041 .office-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 65px rgba(0,0,0,.14);
}

.ui-s041 .office-header{
    display:flex;
    align-items:center;
    margin-bottom:35px;
}

.ui-s041 .office-icon{
    width:72px;
    height:72px;
    border-radius:20px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-right:20px;
    flex-shrink:0;
}

.ui-s041 .office-header h3{
    margin-bottom:5px;
}

.ui-s041 .office-header span{
    color:#777;
    font-size:15px;
}

.ui-s041 .office-info{
    list-style:none;
    margin:0 0 35px;
    padding:0;
    flex:1;
}

.ui-s041 .office-info li{
    display:flex;
    align-items:flex-start;
    margin-bottom:18px;
    color:#555;
    line-height:1.7;
}

.ui-s041 .office-info i{
    width:22px;
    margin-right:14px;
    color:var(--theme-color);
    font-size:18px;
    margin-top:3px;
}

.ui-s041 .btn{
    align-self:flex-start;
}

@media (max-width:991.98px){

    .ui-s041 .office-card{
        padding:30px;
    }

    .ui-s041 .office-header{
        margin-bottom:25px;
    }

    .ui-s041 .office-icon{
        width:60px;
        height:60px;
        font-size:24px;
        margin-right:15px;
    }
}


/*==================================================
UI-S042 : GOOGLE MAP
==================================================*/

.ui-s042 .map-wrapper{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--ui-shadow-md);
}

.ui-s042 .map-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:35px 40px;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.ui-s042 .map-office{
    display:flex;
    align-items:center;
}

.ui-s042 .map-icon{
    width:72px;
    height:72px;
    border-radius:20px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    margin-right:20px;
    flex-shrink:0;
}

.ui-s042 .map-office h3{
    margin-bottom:8px;
}

.ui-s042 .map-office p{
    margin:0;
    color:#777;
}

.ui-s042 .map-container{
    position:relative;
    height:600px;
}

.ui-s042 .map-container iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}


@media (max-width:991.98px){

    .ui-s042 .map-header{
        flex-direction:column;
        align-items:flex-start;
        gap:25px;
        padding:30px;
    }

    .ui-s042 .map-icon{
        width:60px;
        height:60px;
        font-size:24px;
        margin-right:15px;
    }

    .ui-s042 .map-container{
        height:420px;
    }
}


/*==================================================
UI-S043 : NEWSLETTER
==================================================*/

.ui-s043 .newsletter-wrapper{
    position:relative;
    padding:70px;
    border-radius:30px;
    overflow:hidden;
    background:linear-gradient(135deg,var(--theme-color),#19243d);
    color:#fff;
    box-shadow:0 25px 70px rgba(0,0,0,.12);
}

.ui-s043 .newsletter-wrapper::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:320px;
    height:320px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
}

.ui-s043 .newsletter-wrapper::after{
    content:"";
    position:absolute;
    bottom:-140px;
    left:-140px;
    width:340px;
    height:340px;
    border-radius:50%;
    background:rgba(255,255,255,.04);
}

.ui-s043 .newsletter-content,
.ui-s043 .newsletter-form{
    position:relative;
    z-index:2;
}

.ui-s043 .newsletter-content h2{
    color:#fff;
    margin:18px 0 22px;
}

.ui-s043 .newsletter-content p{
    color:rgba(255,255,255,.85);
    margin-bottom:0;
}

.ui-s043 .newsletter-field{
    display:flex;
    align-items:center;
    background:#fff;
    padding:8px;
    border-radius:60px;
}

.ui-s043 .newsletter-field .form-control{
    height:58px;
    border:none;
    background:transparent;
    box-shadow:none;
    padding:0 25px;
}

.ui-s043 .newsletter-field .btn{
    border-radius:50px;
    min-width:170px;
}

.ui-s043 .newsletter-form small{
    display:block;
    margin-top:18px;
    color:rgba(255,255,255,.75);
}

@media (max-width:991.98px){

    .ui-s043 .newsletter-wrapper{
        padding:45px 30px;
    }

    .ui-s043 .newsletter-content{
        margin-bottom:35px;
    }

    .ui-s043 .newsletter-field{
        flex-direction:column;
        padding:15px;
        border-radius:22px;
    }

    .ui-s043 .newsletter-field .form-control{
        width:100%;
        margin-bottom:15px;
        padding:0 5px;
        text-align:center;
    }

    .ui-s043 .newsletter-field .btn{
        width:100%;
        min-width:100%;
    }
}


/*==================================================
UI-S044 : BREADCRUMB
==================================================*/

.ui-s044{
    position:relative;
    padding:60px 0;
    background:#f8f9fc;
    overflow:hidden;
}

.ui-s044::before{
    content:"";
    position:absolute;
    top:-140px;
    right:-120px;
    width:360px;
    height:360px;
    border-radius:50%;
    background:rgba(var(--theme-color-rgb),.15);
}

.ui-s044::after{
    content:"";
    position:absolute;
    bottom:-180px;
    left:-150px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:rgba(var(--theme-color-rgb),.08);
}

.ui-s044 .breadcrumb-wrapper{
    position:relative;
    z-index:2;
}

.ui-s044 .breadcrumb-content{
    margin-top:100px;
    margin-bottom:30px;
}

.ui-s044 .breadcrumb-content h1{
    margin-bottom:15px;
}

.ui-s044 .breadcrumb-content p{
    max-width:650px;
    margin-bottom:0;
}

.ui-s044 .breadcrumb{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    margin:0;
    padding:12px 24px;
    border-radius:50px;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.ui-s044 .breadcrumb-item{
    font-size:15px;
}

.ui-s044 .breadcrumb-item+.breadcrumb-item::before{
    color:#999;
}

.ui-s044 .breadcrumb-item a{
    color:#666;
    text-decoration:none;
    transition:.3s;
}

.ui-s044 .breadcrumb-item a:hover{
    color:var(--theme-color);
}

.ui-s044 .breadcrumb-item.active{
    color:var(--theme-color);
    font-weight:600;
}

@media (max-width:991.98px){

    .ui-s044{
        padding:45px 0;
    }

    .ui-s044 .breadcrumb-content{
        margin-bottom:25px;
    }

    .ui-s044 .breadcrumb{
        padding:10px 18px;
        border-radius:18px;
    }
}


/*==================================================
UI-S045 : STICKY NAVIGATION
==================================================*/

.ui-s045{
    position:fixed;
    top:20px;
    left:0;
    right:0;
    z-index:1050;
    padding:0;
}

.ui-s045-navbar{
    background:#fff;
    border-radius:60px;
    min-height:74px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:12px 28px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    position:relative;
}

.ui-s045-logo img{
    height:48px;
    display:block;
}

.ui-s045-menu{
    list-style:none;
    display:flex;
    align-items:center;

    gap:32px;
    margin:0;
    padding:0;
}

.ui-s045-menu li{
    position:relative;
}

.ui-s045-menu a{
    color:#222;
    text-decoration:none;
    font-weight:500;
}

.ui-s045-menu a:hover{
    color:var(--theme-primary);
}

.ui-s045-submenu .ui-s045-dropdown > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.ui-s045-submenu{
    position:absolute;
    top:100%;
    left:0;
    width:300px;

    list-style:none;
    margin:0;
    padding:12px 0;

    background:#fff;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    display:none;
}

.ui-s045-submenu li{
    width:100%;
}

.ui-s045-submenu a{
    display:block;
    padding:10px 22px;
}

.ui-s045-submenu a:hover{
    background:#f7f7f7;
}

.ui-s045-dropdown.open>.ui-s045-submenu{
    display:block;
}

.ui-s045-btn{
    border-radius:40px;
    padding:12px 24px;
}

.ui-s045-toggle{
    display:none;
    width:46px;
    height:46px;

    border:none;
    background:none;
    cursor:pointer;
}

.ui-s045-toggle span{
    display:block;
    width:26px;
    height:2px;

    background:#222;
    margin:6px auto;
}

@media (max-width:991.98px){

    .ui-s045{
        padding:0px;
        top:10px;
        left:0;
        right:0;
    }

    .ui-s045-navbar{
        position:relative;
        flex-wrap:nowrap;
        align-items:center;
        border-radius:24px;
    }

    .ui-s045-logo{
        flex:1;
    }

    .ui-s045-toggle{
        display:block;
        flex-shrink:0;
        margin-left:auto;
    }

    .ui-s045-btn{
        display:none;
    }

    .ui-s045-menu{
        position:absolute;
        top:calc(100% + 12px);
        left:0;
        right:0;

        display:none;
        flex-direction:column;
        align-items:flex-start;
        gap:0;

        background:#fff;
        border-radius:24px;
        padding:20px;
        box-shadow:0 12px 35px rgba(0,0,0,.08);
        z-index:1000;
    }

    .ui-s045-navbar.open .ui-s045-menu{
        display:flex;
    }

    .ui-s045-menu li{
        width:100%;
    }

    .ui-s045-menu a{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
        padding:14px 0;
    }

    .ui-s045-submenu{
        position:static;
        width:100%;
        margin:0;
        padding:0 0 0 18px;
        background:transparent;
        border-radius:0;
        box-shadow:none;
    }

    .ui-s045-dropdown.open > .ui-s045-submenu{
        display:block;
    }
}

@media (min-width:992px){

    .ui-s045-dropdown:hover > .ui-s045-submenu{
        display:block;
    }
}

/*=========================================
Second Level Dropdown
=========================================*/

@media (min-width:992px){

    .ui-s045-submenu .ui-s045-submenu{
        top:0;
        left:100%;
        margin-left:2px;
        display:none;
    }

    .ui-s045-submenu .ui-s045-dropdown:hover > .ui-s045-submenu{
        display:block;
    }
}

@media (max-width:991.98px){

    .ui-s045-submenu .ui-s045-submenu{
        position:static;
        width:100%;
        margin:0;
        padding-left:18px;
        box-shadow:none;
        background:transparent;
        display:none;
    }

    .ui-s045-submenu .ui-s045-dropdown.open > .ui-s045-submenu{
        display:block;
    }
}


/*==================================================
UI-S046 : FLOATING CARDS
==================================================*/

.ui-s046 .floating-content{
    padding-right:60px;
}

.ui-s046 .floating-content h2{
    margin:18px 0 25px;
}

.ui-s046 .floating-content p{
    margin-bottom:35px;
}

.ui-s046 .floating-wrapper{
    position:relative;
    min-height:600px;
}

.ui-s046 .floating-card{
    position:absolute;
    width:290px;
    padding:35px;
    background:#fff;
    border-radius:24px;
    box-shadow:0 20px 55px rgba(0,0,0,.08);
    transition:.35s;
}

.ui-s046 .floating-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(0,0,0,.14);
    z-index:5;
}

.ui-s046 .card-one{
    top:20px;
    left:0;
}

.ui-s046 .card-two{
    top:180px;
    right:10px;
}

.ui-s046 .card-three{
    bottom:20px;
    left:70px;
}

.ui-s046 .floating-icon{
    width:70px;
    height:70px;
    margin-bottom:25px;
    border-radius:20px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.ui-s046 .floating-card h4{
    margin-bottom:15px;
}

.ui-s046 .floating-card p{
    margin-bottom:0;
}

@media (max-width:991.98px){

    .ui-s046 .floating-content{
        padding-right:0;
        margin-bottom:50px;
    }

    .ui-s046 .floating-wrapper{
        min-height:auto;
        display:flex;
        flex-direction:column;
        gap:25px;
    }

    .ui-s046 .floating-card{
        position:relative;
        width:100%;
        top:auto;
        right:auto;
        bottom:auto;
        left:auto;
    }
}


/*==================================================
UI-S047 : KPI CARDS
==================================================*/

.ui-s047 .kpi-card{
    position:relative;
    height:100%;
    padding:45px 35px;
    background:#fff;
    border-radius:26px;
    text-align:center;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.4s;
}

.ui-s047 .kpi-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:var(--theme-color);
    transform:scaleX(0);
    transform-origin:left;
    transition:.4s;
}

.ui-s047 .kpi-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(0,0,0,.14);
}

.ui-s047 .kpi-card:hover::before{
    transform:scaleX(1);
}

.ui-s047 .kpi-icon{
    width:82px;
    height:82px;
    margin:0 auto 30px;
    border-radius:22px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
}

.ui-s047 .kpi-card h3{
    font-size:56px;
    line-height:1;
    margin-bottom:12px;
}

.ui-s047 .kpi-card span{
    display:block;
    margin-bottom:20px;
    font-weight:600;
    color:var(--theme-color);
}

.ui-s047 .kpi-card p{
    margin:0;
}

@media (max-width:991.98px){

    .ui-s047 .kpi-card{
        padding:35px 25px;
    }

    .ui-s047 .kpi-icon{
        width:68px;
        height:68px;
        margin-bottom:25px;
        font-size:28px;
    }

    .ui-s047 .kpi-card h3{
        font-size:42px;
    }
}


/*==================================================
UI-S048 : AWARDS
==================================================*/

.ui-s048 .awards-content{
    padding-right:60px;
}

.ui-s048 .awards-content h2{
    margin:18px 0 25px;
}

.ui-s048 .awards-content p{
    margin-bottom:35px;
}

.ui-s048 .award-card{
    position:relative;
    height:100%;
    padding:35px;
    background:#fff;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.35s;
}

.ui-s048 .award-card:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 65px rgba(0,0,0,.14);
}

.ui-s048 .award-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:5px;
    height:100%;
    background:var(--theme-color);
}

.ui-s048 .award-icon{
    width:72px;
    height:72px;
    margin-bottom:25px;
    border-radius:20px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.ui-s048 .award-year{
    display:inline-block;
    margin-bottom:15px;
    padding:6px 14px;
    border-radius:30px;
    background:rgba(var(--theme-color-rgb),.08);
    color:var(--theme-color);
    font-size:13px;
    font-weight:600;
}

.ui-s048 .award-card h3{
    margin-bottom:15px;
}

.ui-s048 .award-card p{
    margin-bottom:0;
}

@media (max-width:991.98px){

    .ui-s048 .awards-content{
        padding-right:0;
        margin-bottom:50px;
    }

    .ui-s048 .award-card{
        padding:30px;
    }

    .ui-s048 .award-icon{
        width:60px;
        height:60px;
        font-size:26px;
        margin-bottom:20px;
    }
}
 
.ui-s048-dark{
    background-color: #161a33 !important;
}

.ui-s048-dark .awards-content h2{
    color: #fff !important;
}

.ui-s048-dark .awards-content p{
    color: rgba(255,255,255,0.6) !important;
}

.ui-s048-dark .award-card{
    background: rgba(255,255,255,0.1) !important;
    color: rgba(255,255,255,0.5) !important;
}

.ui-s048-dark .award-card:hover{
    box-shadow:0 28px 65px rgba(0,0,0,.14);
}

.ui-s048-dark .award-card::before{
    background: rgba(255,255,255,0.4);
}

.ui-s048-dark .award-icon{
    background:rgba(255,255,255,.09);
    color:#fff;
    color: var(--theme-color);
}

.ui-s048-dark .award-year{
    background:rgba(255,255,255,.09);
    color:#fff;
}

.ui-s048-dark .award-card h3{
    color:#fff;
}

.ui-s048-dark .award-card p{
    margin-bottom:0;
}



/*==================================================
UI-S049 : PARTNERS
==================================================*/

.ui-s049 .partner-card{
    height:100%;
    padding:40px;
    background:#fff;
    border-radius:26px;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.35s;
    display:flex;
    flex-direction:column;
}

.ui-s049 .partner-card:hover{
    transform:translateY(-10px);
    box-shadow:0 30px 70px rgba(0,0,0,.14);
}

.ui-s049 .partner-logo{
    height:90px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:30px;
}

.ui-s049 .partner-logo img{
    max-width:180px;
    max-height:70px;
    width:auto;
    height:auto;
    object-fit:contain;
    filter:grayscale(100%);
    opacity:.75;
    transition:.35s;
}

.ui-s049 .partner-card:hover .partner-logo img{
    filter:none;
    opacity:1;
}

.ui-s049 .partner-type{
    display:inline-block;
    align-self:flex-start;
    padding:7px 16px;
    margin-bottom:18px;
    border-radius:50px;
    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);
    font-size:13px;
    font-weight:600;
}

.ui-s049 .partner-card h3{
    margin-bottom:18px;
}

.ui-s049 .partner-card p{
    margin-bottom:30px;
    flex:1;
}

.ui-s049 .partner-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-top:20px;
    border-top:1px solid rgba(0,0,0,.08);
}

.ui-s049 .partner-footer span{
    color:#888;
    font-size:14px;
}

.ui-s049 .partner-footer a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--theme-color);
    font-weight:600;
    text-decoration:none;
}

.ui-s049 .partner-footer i{
    transition:.3s;
}

.ui-s049 .partner-card:hover .partner-footer i{
    transform:translateX(5px);
}

@media (max-width:991.98px){

    .ui-s049 .partner-card{
        padding:30px;
    }

    .ui-s049 .partner-logo{
        height:75px;
        margin-bottom:25px;
    }

    .ui-s049 .partner-logo img{
        max-width:150px;
        max-height:60px;
    }

    .ui-s049 .partner-footer{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
}


/*==================================================
UI-S050 : CLOSING CTA
==================================================*/

.ui-s050 .closing-cta{
    position:relative;
    overflow:hidden;
    border-radius:36px;
    padding:100px 80px;
    text-align:center;
    color:#fff;
    background:linear-gradient(135deg,#1a2745 0%, var(--theme-color) 100%);
    box-shadow:0 35px 90px rgba(0,0,0,.18);
}

.ui-s050 .closing-background{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,.12), transparent 35%),
        radial-gradient(circle at bottom left, rgba(255,255,255,.08), transparent 40%);
    pointer-events:none;
}

.ui-s050 .closing-pattern{
    position:absolute;
    width:420px;
    height:420px;
    right:-180px;
    bottom:-180px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:50%;
}

.ui-s050 .closing-pattern::before,
.ui-s050 .closing-pattern::after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
}

.ui-s050 .closing-pattern::before{
    inset:45px;
}

.ui-s050 .closing-pattern::after{
    inset:90px;
}

.ui-s050 .closing-content{
    position:relative;
    z-index:2;
    max-width:820px;
    margin:0 auto;
}

.ui-s050 .closing-content h2{
    color:#fff;
    margin:20px 0 25px;
}

.ui-s050 .closing-content p{
    color:rgba(255,255,255,.88);
    margin:0 auto 40px;
    max-width:700px;
}

.ui-s050 .closing-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

.ui-s050 .closing-actions .btn{
    min-width:220px;
}

.ui-s050 .closing-actions .btn-light{
    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.ui-s050 .closing-actions .btn-outline-light:hover{
    background:#fff;
    color:var(--theme-color);
}

@media (max-width:991.98px){

    .ui-s050 .closing-cta{
        padding:60px 30px;
        border-radius:24px;
    }

    .ui-s050 .closing-pattern{
        width:260px;
        height:260px;
        right:-120px;
        bottom:-120px;
    }

    .ui-s050 .closing-actions{
        flex-direction:column;
    }

    .ui-s050 .closing-actions .btn{
        width:100%;
        min-width:100%;
    }
}




/*==================================================
UI-S054 : BLOG CONTENT
==================================================*/

.ui-s054{
    font-size:18px;
    line-height:1.9;

    color:#555;
    word-break:break-word;
    overflow-wrap:break-word;
}

/*--------------------------------------------------
Paragraph
--------------------------------------------------*/

.ui-s054 p{
    margin:0 0 1.8rem;
}

/*--------------------------------------------------
Headings
--------------------------------------------------*/

.ui-s054 h1,
.ui-s054 h2,
.ui-s054 h3,
.ui-s054 h4,
.ui-s054 h5,
.ui-s054 h6{
    color:#111;
    font-weight:700;
    line-height:1.3;
    margin:2.5rem 0 1rem;
}

.ui-s054 h1{
    font-size:2.4rem;
}

.ui-s054 h2{
    font-size:2rem;
}

.ui-s054 h3{
    font-size:1.7rem;
}

.ui-s054 h4{
    font-size:1.45rem;
}

.ui-s054 h5{
    font-size:1.2rem;
}

.ui-s054 h6{
    font-size:1rem;
}

/*--------------------------------------------------
Links
--------------------------------------------------*/

.ui-s054 a{
    color:var(--theme-color);
    text-decoration:none;
    transition:.3s;
}

.ui-s054 a:hover{
    color:var(--theme-primary);
}

/*--------------------------------------------------
Strong / Bold
--------------------------------------------------*/

.ui-s054 strong,
.ui-s054 b{
    color:#111;
    font-weight:700;
}

/*--------------------------------------------------
Italic
--------------------------------------------------*/

.ui-s054 em,
.ui-s054 i{
    font-style:italic;
}

/*--------------------------------------------------
Underline
--------------------------------------------------*/

.ui-s054 u{
    text-decoration-thickness:2px;
}

/*--------------------------------------------------
Lists
--------------------------------------------------*/

.ui-s054 ul,
.ui-s054 ol{
    margin:0 0 2rem;
    padding-left:28px;
}

.ui-s054 li{
    margin-bottom:10px;
    line-height:1.8;
}

.ui-s054 ul ul,
.ui-s054 ol ol,
.ui-s054 ul ol,
.ui-s054 ol ul{
    margin-top:10px;
    margin-bottom:10px;
}

/*--------------------------------------------------
Blockquote
--------------------------------------------------*/

.ui-s054 blockquote{
    position:relative;
    margin:40px 0;
    padding:35px 40px;

    background:#fafafa;

    border-left:5px solid var(--theme-color);
    border-radius:20px;

    font-size:1.25rem;
    font-style:italic;
    color:#444;
}

.ui-s054 blockquote::before{
    content:"“";
    position:absolute;

    top:-10px;
    left:18px;

    font-size:80px;
    color:rgba(var(--theme-color-rgb),.15);
    font-family:Georgia, serif;
}

.ui-s054 blockquote p:last-child{
    margin-bottom:0;
}

/*--------------------------------------------------
Horizontal Rule
--------------------------------------------------*/

.ui-s054 hr{
    margin:50px 0;
    border:none;
    height:1px;
    background:#e5e5e5;
}

/*--------------------------------------------------
Text Utilities
--------------------------------------------------*/

.ui-s054 small{
    font-size:.88em;
}

.ui-s054 mark{
    background:#fff3c2;
    padding:2px 6px;
    border-radius:4px;
}

.ui-s054 sup{
    font-size:70%;
}

.ui-s054 sub{
    font-size:70%;
}

/*--------------------------------------------------
Selection
--------------------------------------------------*/

.ui-s054 ::selection{
    background:rgba(var(--theme-color-rgb),.18);
    color:#111;
}

/*--------------------------------------------------
Images
--------------------------------------------------*/

.ui-s054 img{
    max-width:100%;
    height:auto;
    display:block;

    border-radius:20px;
    margin:35px auto;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    display: none;
}

/*--------------------------------------------------
Linked Images
--------------------------------------------------*/

.ui-s054 a img{
    transition:.35s;
}

.ui-s054 a:hover img{
    transform:scale(1.02);
}

/*--------------------------------------------------
Figure
--------------------------------------------------*/

.ui-s054 figure{
    margin:45px 0;
}

.ui-s054 figure img{
    margin:0;
}

/*--------------------------------------------------
Caption
--------------------------------------------------*/

.ui-s054 figcaption{
    margin-top:14px;
    text-align:center;
    color:#777;

    font-size:.95rem;
    font-style:italic;
}

/*--------------------------------------------------
Blogger Caption Container
--------------------------------------------------*/

.ui-s054 .tr-caption-container{
    width:100% !important;
    max-width:100% !important;
    margin:40px auto;
}

.ui-s054 .tr-caption-container img{
    margin:0;
}

.ui-s054 .tr-caption-container .tr-caption{
    margin-top:14px;
    text-align:center;
    color:#777;

    font-size:.95rem;
    font-style:italic;
}

/*--------------------------------------------------
Image Alignment
--------------------------------------------------*/

.ui-s054 .alignleft,
.ui-s054 .img-left{
    float:left;
    margin:8px 30px 20px 0;
    max-width:45%;
}

.ui-s054 .alignright,
.ui-s054 .img-right{
    float:right;
    margin:8px 0 20px 30px;
    max-width:45%;
}

.ui-s054 .aligncenter,
.ui-s054 .img-center{
    display:block;
    margin:40px auto;
}

/*--------------------------------------------------
Clear Floats
--------------------------------------------------*/

.ui-s054::after{
    content:"";
    display:block;
    clear:both;
}

/*--------------------------------------------------
Tables
--------------------------------------------------*/

.ui-s054 table{
    width:100%;
    margin:40px 0;

    border-collapse:collapse;

    overflow:hidden;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
}

/*--------------------------------------------------
Table Header
--------------------------------------------------*/

.ui-s054 thead{
    background:var(--theme-color);
}

.ui-s054 th{
    padding:18px 20px !important;
    text-align:left;
    font-weight:600;
}

/*--------------------------------------------------
Table Body
--------------------------------------------------*/

.ui-s054 td{
    padding:18px 20px !important;
    border-top:1px solid #eee;
}

.ui-s054 tbody tr:nth-child(even){
    /* background:#fafafa; */
}

.ui-s054 tbody tr:hover{
    /* background:rgba(var(--theme-color-rgb),.05); */
}

/*--------------------------------------------------
Definition List
--------------------------------------------------*/

.ui-s054 dl{
    margin:35px 0;
}

.ui-s054 dt{
    font-weight:700;
    color:#111;
    margin-bottom:8px;
}

.ui-s054 dd{
    margin:0 0 20px 25px;
}

/*--------------------------------------------------
Address
--------------------------------------------------*/

.ui-s054 address{
    padding:25px 30px;
    margin:35px 0;

    background:#fafafa;

    border-left:4px solid var(--theme-color);
    border-radius:16px;

    font-style:normal;
}

/*--------------------------------------------------
Image Gallery
--------------------------------------------------*/

.ui-s054 .separator{
    text-align:center;
    margin:40px 0;
}

.ui-s054 .separator a{
    display:inline-block;
}

.ui-s054 .separator img{
    margin:0 auto;
}

/*--------------------------------------------------
Embedded Iframe
--------------------------------------------------*/

.ui-s054 iframe{
    width:100%;
    max-width:100%;

    border:none;
    border-radius:18px;

    margin:40px 0;
    aspect-ratio:16/9;
    display: none;
}

/*--------------------------------------------------
Inline Code
--------------------------------------------------*/

.ui-s054 code{
    padding:3px 8px;

    background:#f5f5f5;
    border-radius:6px;

    font-family:Consolas, Monaco, monospace;
    font-size:.92em;
    color:var(--theme-color);
}

/*--------------------------------------------------
Code Block
--------------------------------------------------*/

.ui-s054 pre{
    margin:40px 0;
    padding:25px;

    background:#1f2430;
    color:#f8f8f2;

    border-radius:18px;
    overflow:auto;

    font-size:15px;
    line-height:1.7;
}

.ui-s054 pre code{
    padding:0;
    background:none;
    color:inherit;
}

/*--------------------------------------------------
Keyboard
--------------------------------------------------*/

.ui-s054 kbd{
    display:inline-block;
    padding:4px 10px;

    background:#fafafa;
    border:1px solid #ddd;
    border-radius:6px;

    font-size:.9em;
    font-family:inherit;
    box-shadow:0 2px 5px rgba(0,0,0,.08);
}

/*--------------------------------------------------
Details
--------------------------------------------------*/

.ui-s054 details{
    margin:35px 0;
    background:#fafafa;

    border-radius:16px;
    overflow:hidden;
    border:1px solid #eee;
}

.ui-s054 summary{
    padding:18px 24px;
    cursor:pointer;
    font-weight:600;

    color:#111;
    list-style:none;
}

.ui-s054 summary::-webkit-details-marker{
    display:none;
}

.ui-s054 details[open] summary{
    border-bottom:1px solid #eee;
}

.ui-s054 details>*:not(summary){
    padding:20px 24px;
}

/*--------------------------------------------------
Abbreviation
--------------------------------------------------*/

.ui-s054 abbr{
    text-decoration:dotted underline;
    cursor:help;
}

/*--------------------------------------------------
Citation
--------------------------------------------------*/

.ui-s054 cite{
    color:#777;
    font-style:italic;
}

/*--------------------------------------------------
Inserted / Deleted
--------------------------------------------------*/

.ui-s054 ins{
    color:#28a745;
    text-decoration:none;
}

.ui-s054 del{
    color:#dc3545;
}

/*--------------------------------------------------
Prevent Overflow
--------------------------------------------------*/

.ui-s054 *{
    max-width:100%;
}

/*--------------------------------------------------
Responsive
--------------------------------------------------*/

@media (max-width:991.98px){

    .ui-s054{
        font-size:16px;
        line-height:1.8;
        padding: 15px;
    }

    .ui-s054 h1{
        font-size:2.4rem;
    }

    .ui-s054 h2{
        font-size:2rem;
    }

    .ui-s054 h3{
        font-size:1.7rem;
    }

    .ui-s054 h4{
        font-size:1.45rem;
    }

    .ui-s054 h5{
        font-size:1.2rem;
    }

    .ui-s054 h6{
        font-size:1rem;
    }

    .ui-s054 img{
        margin:25px auto;
        border-radius:16px;
    }

    .ui-s054 figure{
        margin:30px 0;
    }

    .ui-s054 blockquote{
        padding:28px;
        font-size:1.05rem;
    }

    .ui-s054 blockquote::before{
        font-size:60px;
    }

    .ui-s054 pre{
        padding:20px;
        font-size:14px;
    }

    .ui-s054 table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    .ui-s054 .alignleft,
    .ui-s054 .alignright{
        float:none;
        display:block;
        max-width:100%;
        margin:30px auto;
    }

    .ui-s054 iframe{
        margin:30px 0;
    }

    .ui-s054 details{
        margin:30px 0;
    }

}


/*==================================================
UI-S055 : VIDEO SECTION
==================================================*/

.ui-s055{
    padding:80px 0;
}

.ui-s055 .video-card{
    background:#fff;
    border-radius:26px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.35s;
}

.ui-s055 .video-card:hover{
    transform:translateY(-6px);
    box-shadow:0 28px 70px rgba(0,0,0,.12);
}


/*------------------------------------
Video
------------------------------------*/

.ui-s055 .video-frame{
    position:relative;
    overflow:hidden;
    aspect-ratio:16/9;
    background:#000;
}

.ui-s055 .video-frame iframe{
    width:100%;
    height:100%;
    border:0;
}


/*------------------------------------
Content
------------------------------------*/

.ui-s055 .video-content{
    padding:35px;
}

.ui-s055 .video-category{
    display:inline-block;
    padding:8px 18px;
    margin-bottom:18px;
    border-radius:50px;
    background:rgba(var(--theme-color-rgb),.08);
    color:var(--theme-color);
    font-size:14px;
    font-weight:600;
}

.ui-s055 h3{
    margin-bottom:18px;
    font-size:2rem;
    line-height:1.3;
    color:#111;
}

.ui-s055 p{
    margin:0;
    color:#666;
    line-height:1.9;
}

@media (max-width:991.98px){

    .ui-s055{
        padding:60px 0;
    }

    .ui-s055 .video-card{
        border-radius:20px;
    }

    .ui-s055 .video-content{
        padding:25px;
    }

    .ui-s055 h3{
        font-size:1.6rem;
    }

}