/*==================================================
UI-S051 : PRIMARY HERO
==================================================*/

.ui-s051{
    position:relative;
    overflow:hidden;
    min-height:100vh;
    padding:30px 0 40px;
    /* background:
        radial-gradient(circle at top right,#39206f 0%,transparent 30%),
        radial-gradient(circle at bottom left,#1d1244 0%,transparent 40%),
        #08051d; */
    
}

/*--------------------------------------------------
Background Layers
--------------------------------------------------*/

.ui-s051 .hero-grid{
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:60px 60px;
    mask-image:radial-gradient(circle at center,black 35%,transparent 95%);
    -webkit-mask-image:radial-gradient(circle at center,black 35%,transparent 95%);
    opacity:.25;
    pointer-events:none;
}

.ui-s051 .hero-noise{
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
    background-size:14px 14px;
    opacity:.08;
    pointer-events:none;
}

.ui-s051 .hero-stars{
    position:absolute;
    inset:0;
    /* background-image:
        radial-gradient(circle,#ffffff 1px,transparent 1px),
        radial-gradient(circle,#ffffff 1px,transparent 1px),
        radial-gradient(circle,#ffffff 1px,transparent 1px); */
    background-image:
        radial-gradient(circle,var(--ui-primary) 1px,transparent 1px),
        radial-gradient(circle,var(--ui-primary) 1px,transparent 1px),
        radial-gradient(circle,var(--ui-primary) 1px,transparent 1px);
    background-size:
        180px 180px,
        260px 260px,
        340px 340px;
    background-position:
        30px 80px,
        180px 140px,
        320px 60px;
    opacity:.45;
    pointer-events:none;
}

/*--------------------------------------------------
Glow Effects
--------------------------------------------------*/

.ui-s051 .hero-bg-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
}

.ui-s051 .hero-glow-1{
    width:360px;
    height:360px;
    top:-140px;
    right:-120px;
    background:rgba(255,0,153,.45);
}

.ui-s051 .hero-glow-2{
    width:260px;
    height:260px;
    bottom:5%;
    right:15%;
    /* background:rgba(98,74,255,.35); */
    background:rgba(98,74,255,.0);
}

.ui-s051 .hero-glow-3{
    width:360px;
    height:360px;
    /* top:40%; */
    bottom:-80px;
    left:-80px;
    /* background:rgba(0,174,255,.18); */
    background:rgba(98,74,255,.45);
}

/*--------------------------------------------------
Container
--------------------------------------------------*/

.ui-s051 .container{
    position:relative;
    z-index:5;
}

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

.ui-s051 .hero-content{
    min-height:calc(100vh - 180px);
    padding:120px 0 40px;
}

.ui-s051 .hero-subtitle{
    display:inline-flex;
    align-items:center;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.10);
    color:#ffffff;
    font-size:13px;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:28px;
    text-transform:uppercase;
}

.ui-s051 h1{
    color:#ffffff;
    font-size:72px;
    font-weight:700;
    line-height:1.05;
    margin-bottom:30px;
}

.ui-s051 h1 span{
    color:var(--theme-color);
}

.ui-s051 p{
    max-width:560px;
    /* color:rgba(255,255,255,.78); */
    color:rgba(0,0,0,.78);
    font-size:18px;
    line-height:1.9;
    margin-bottom:42px;
}

.ui-s051 .hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.ui-s051 .hero-buttons .btn{
    min-width:210px;
}

.ui-s051 .hero-buttons .btn-outline-light{
    backdrop-filter:blur(8px);
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.35);
}

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

.ui-s051 .hero-image{
    position:relative;
    width:100%;
    max-width:760px;
    margin-left:auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ui-s051 .hero-image img{
    position:relative;
    z-index:5;
    width:100%;
    max-width:650px;
    display:block;
}

/*--------------------------------------------------
Orbit Rings
--------------------------------------------------*/

.ui-s051 .hero-orbit{
    position:absolute;
    border-radius:50%;
    /* border:1px solid rgba(255,255,255,.10); */
    border:2px solid rgba(var(--theme-color-rgb),.2);
    pointer-events:none;
}

.ui-s051 .hero-orbit-1{
    width:520px;
    height:520px;
}

.ui-s051 .hero-orbit-2{
    width:640px;
    height:640px;
    border-style:dashed;
    opacity:.55;
}

/*--------------------------------------------------
Light Glow
--------------------------------------------------*/

.ui-s051 .hero-light{
    position:absolute;
    width:340px;
    height:340px;
    border-radius:50%;

    /* background:radial-gradient(circle,
    rgba(255,255,255,.28) 0%,
    rgba(255,255,255,.05) 45%,
    transparent 70%); */

    background:radial-gradient(circle,
    rgba(var(--theme-color-rgb),.28) 0%,
    rgba(var(--theme-color-rgb),.05) 45%,
    transparent 70%);

    filter:blur(45px);
    z-index:2;
}

/*--------------------------------------------------
Particles
--------------------------------------------------*/

.ui-s051 .hero-particles{
    position:absolute;
    inset:0;
    z-index:3;
    pointer-events:none;
}

.ui-s051 .hero-particles::before,
.ui-s051 .hero-particles::after{
    content:"";
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:#ffffff;

    /* box-shadow:
    80px 45px rgba(255,255,255,.8),
    160px -20px rgba(255,255,255,.7),
    210px 120px rgba(255,255,255,.8),
    -80px 100px rgba(255,255,255,.6),
    -160px 30px rgba(255,255,255,.8),
    140px 220px rgba(255,255,255,.6),
    -60px 210px rgba(255,255,255,.7); */

    box-shadow:
    80px 45px rgba(var(--theme-color-rgb),.8),
    160px -20px rgba(var(--theme-color-rgb),.7),
    210px 120px rgba(var(--theme-color-rgb),.8),
    -80px 100px rgba(var(--theme-color-rgb),.6),
    -160px 30px rgba(var(--theme-color-rgb),.8),
    140px 220px rgba(var(--theme-color-rgb),.6),
    -60px 210px rgba(var(--theme-color-rgb),.7);

}

.ui-s051 .hero-particles::before{
    top:25%;
    left:32%;
}

.ui-s051 .hero-particles::after{
    bottom:20%;
    right:22%;
}

/*--------------------------------------------------
Highlights
--------------------------------------------------*/

.ui-s051 .hero-highlights{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;

    margin-top:20px;
    padding-top:35px;

    border-top:1px solid rgba(255,255,255,.08);
}

.ui-s051 .hero-highlights div{
    display:flex;
    align-items:center;

    color:#ffffff;

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

.ui-s051 .hero-highlights i{
    margin-right:10px;

    font-size:22px;
    color:var(--theme-color);
}

/*--------------------------------------------------
Scroll Indicator
--------------------------------------------------*/

.ui-s051 .hero-scroll{
    display:flex;
    justify-content:center;

    margin-top:45px;
}

.ui-s051 .hero-scroll span{
    position:relative;

    width:28px;
    height:48px;

    border:2px solid rgba(255,255,255,.45);
    border-radius:30px;
}

.ui-s051 .hero-scroll span i{
    position:absolute;
    left:50%;
    top:8px;
    width:6px;
    height:6px;
    margin-left:-3px;
    border-radius:50%;
    background:#fff;
}

/*==================================================
UI-S051 : PRIMARY HERO
==================================================*/

@media (max-width:991.98px){

    .ui-s051{
        min-height:auto;
        padding:20px 0 30px;
    }

    /*----------------------------------------
    Background
    ----------------------------------------*/

    .ui-s051 .hero-grid{
        background-size:40px 40px;
        opacity:.18;
    }

    .ui-s051 .hero-noise{
        opacity:.05;
    }

    .ui-s051 .hero-stars{
        opacity:.25;
    }

    .ui-s051 .hero-glow-1{
        width:220px;
        height:220px;
        top:-60px;
        right:-80px;
    }

    .ui-s051 .hero-glow-2{
        width:180px;
        height:180px;
    }

    .ui-s051 .hero-glow-3{
        display:none;
    }

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

    .ui-s051 .hero-content{
        min-height:auto;
        padding:120px 0 40px;
        text-align:center;
    }

    .ui-s051 .hero-subtitle{
        font-size:12px;
        letter-spacing:1.5px;
        margin-bottom:22px;
    }

    .ui-s051 h1{
        font-size:46px;
        margin-bottom:22px;
    }

    .ui-s051 p{
        max-width:100%;
        font-size:16px;
        line-height:1.8;
        margin:0 auto 35px;
    }

    .ui-s051 .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

    .ui-s051 .hero-buttons .btn{
        width:100%;
        min-width:100%;
    }

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

    .ui-s051 .hero-image{
        margin-top:70px;
        max-width:100%;
    }

    .ui-s051 .hero-image img{
        max-width:360px;
        margin:auto;
    }

    .ui-s051 .hero-orbit-1{
        width:320px;
        height:320px;
    }

    .ui-s051 .hero-orbit-2{
        width:390px;
        height:390px;
    }

    .ui-s051 .hero-light{
        width:220px;
        height:220px;
    }

    /*----------------------------------------
    Highlights
    ----------------------------------------*/

    .ui-s051 .hero-highlights{
        justify-content:center;
        gap:18px;

        margin-top:40px;
        padding-top:30px;
    }

    .ui-s051 .hero-highlights div{
        width:calc(50% - 10px);
        justify-content:center;

        font-size:14px;
    }

    .ui-s051 .hero-highlights i{
        font-size:18px;
        margin-right:8px;
    }

    /*----------------------------------------
    Scroll Indicator
    ----------------------------------------*/

    .ui-s051 .hero-scroll{
        margin-top:35px;
    }
}



/*==================================================
UI-S052 : SUBPAGE HERO
==================================================*/

.ui-s052{
    position:relative;
    overflow:hidden;
    padding:160px 0 110px;
    background:#f7f8fc;
}

/*--------------------------------------------------
Background Gradient
--------------------------------------------------*/

.ui-s052 .subpage-gradient{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top left,
        rgba(var(--theme-color-rgb),.12) 0%,
        transparent 40%),

        radial-gradient(circle at bottom right,
        rgba(108,99,255,.10) 0%,
        transparent 35%);
    pointer-events:none;
}

/*--------------------------------------------------
Dot Pattern
--------------------------------------------------*/

.ui-s052 .subpage-dots{
    position:absolute;

    right:5%;
    top:100px;

    width:260px;
    height:260px;

    opacity:.25;

    background-image:
        radial-gradient(var(--theme-color) 1.5px,transparent 1.5px);
    background-size:18px 18px;

    pointer-events:none;
}

/*--------------------------------------------------
Decorative Circles
--------------------------------------------------*/

.ui-s052 .subpage-circle{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.ui-s052 .subpage-circle-1{
    width:340px;
    height:340px;

    left:-170px;
    top:-120px;

    background:rgba(var(--theme-color-rgb),.08);
}

.ui-s052 .subpage-circle-2{
    width:180px;
    height:180px;

    right:12%;
    bottom:40px;

    background:rgba(var(--theme-color-rgb),.12);
}

/*--------------------------------------------------
Container
--------------------------------------------------*/

.ui-s052 .container{
    position:relative;
    z-index:2;
}

/*--------------------------------------------------
Breadcrumb
--------------------------------------------------*/

.ui-s052 .hero-breadcrumb{
    display:flex;
    align-items:center;

    gap:12px;
    margin-bottom:35px;

    font-size:14px;
}

.ui-s052 .hero-breadcrumb a{
    color:#777;

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

.ui-s052 .hero-breadcrumb a:hover{
    color:var(--theme-color);
}

.ui-s052 .hero-breadcrumb span{
    color:#999;
}

/*--------------------------------------------------
Hero Tag
--------------------------------------------------*/

.ui-s052 .hero-tag{
    display:inline-flex;
    align-items:center;

    padding:10px 18px;
    margin-bottom:28px;

    border-radius:50px;

    background:rgba(var(--theme-color-rgb),.10);
    color:var(--theme-color);

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

    letter-spacing:1.5px;
    text-transform:uppercase;
}

/*--------------------------------------------------
Heading
--------------------------------------------------*/

.ui-s052 h1{
    margin-bottom:28px;

    font-size:64px;
    line-height:1.08;

    font-weight:700;
    color:#181818;
}

.ui-s052 h1 span{
    color:var(--theme-color);
}

/*--------------------------------------------------
Description
--------------------------------------------------*/

.ui-s052 p{
    max-width:560px;
    margin-bottom:40px;

    color:#666;

    font-size:18px;
    line-height:1.9;
}

/*--------------------------------------------------
Buttons
--------------------------------------------------*/

.ui-s052 .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.ui-s052 .hero-actions .btn{
    min-width:200px;
}

/*--------------------------------------------------
Hero Image Wrapper
--------------------------------------------------*/

.ui-s052 .hero-image-wrapper{
    position:relative;
    max-width:620px;
    margin-left:auto;
    padding:25px;
}

/*--------------------------------------------------
Decorative Shape
--------------------------------------------------*/

.ui-s052 .hero-image-shape{
    position:absolute;
    top:-35px;
    right:-35px;
    width:220px;
    height:220px;
    border-radius:40px;
    background:linear-gradient(135deg,
        rgba(var(--theme-color-rgb),.15),
        rgba(var(--theme-color-rgb),.04));
    transform:rotate(15deg);
    z-index:1;
}

/*--------------------------------------------------
Glow
--------------------------------------------------*/

.ui-s052 .hero-image-glow{
    position:absolute;
    left:50%;
    top:50%;
    width:460px;
    height:460px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,
        rgba(var(--theme-color-rgb),.18),
        rgba(var(--theme-color-rgb),.05) 45%,
        transparent 70%);
    filter:blur(45px);
    z-index:0;
}

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

.ui-s052 .hero-image-wrapper img{
    position:relative;
    display:block;

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;
    object-position:center;

    border-radius:32px;

    box-shadow:
        0 35px 90px rgba(0,0,0,.12);

    z-index:2;

    transition:
        transform .8s ease,
        box-shadow .5s ease;
}

.ui-s052 .hero-image-wrapper:hover img{

    transform:
        translateY(-8px)
        scale(1.03);

    box-shadow:
        0 45px 110px rgba(0,0,0,.18);
}

/*--------------------------------------------------
Border Frame
--------------------------------------------------*/

.ui-s052 .hero-image-wrapper::before{
    content:"";
    position:absolute;

    inset:55px -20px -20px 55px;

    border:2px solid rgba(var(--theme-color-rgb),.12);
    border-radius:36px;

    z-index:1;
}

/*--------------------------------------------------
Floating Badge (Optional)
--------------------------------------------------*/

.ui-s052 .hero-image-wrapper::after{
    content:"Over 50+ Countries";
    position:absolute;

    left:-25px;
    bottom:55px;
    padding:14px 22px;

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

    box-shadow:
        0 18px 45px rgba(0,0,0,.10);

    color:#222;
    font-size:14px;
    font-weight:600;

    z-index:3;
}

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

.ui-s052 .hero-image-wrapper .hero-image-shape::after{
    content:"";
    position:absolute;

    inset:28px;

    border:2px dashed rgba(255,255,255,.45);
    border-radius:28px;
}

/*--------------------------------------------------
Extra Decorative Accent
--------------------------------------------------*/

.ui-s052 .hero-image-wrapper .hero-image-shape::before{
    content:"";
    position:absolute;

    width:90px;
    height:90px;

    left:-35px;
    bottom:-35px;

    border-radius:50%;

    background:rgba(var(--theme-color-rgb),.18);
    filter:blur(8px);
}

/*==================================================
UI-S052 : SUBPAGE HERO
==================================================*/

@media (max-width:991.98px){

    .ui-s052{
        padding:120px 0 70px;
        text-align:center;
    }

    /*----------------------------------------
    Background Elements
    ----------------------------------------*/

    .ui-s052 .subpage-gradient{
        opacity:.8;
    }

    .ui-s052 .subpage-dots{
        width:170px;
        height:170px;

        right:-40px;
        top:80px;

        opacity:.12;
        background-size:14px 14px;
    }

    .ui-s052 .subpage-circle-1{
        width:180px;
        height:180px;

        left:-90px;
        top:-70px;
    }

    .ui-s052 .subpage-circle-2{
        width:120px;
        height:120px;

        right:-40px;
        bottom:20px;
    }

    /*----------------------------------------
    Breadcrumb
    ----------------------------------------*/

    .ui-s052 .hero-breadcrumb{
        justify-content:center;
        margin-bottom:25px;

        flex-wrap:wrap;
    }

    /*----------------------------------------
    Tag
    ----------------------------------------*/

    .ui-s052 .hero-tag{
        margin-bottom:22px;
        font-size:12px;

        letter-spacing:1px;
    }

    /*----------------------------------------
    Heading
    ----------------------------------------*/

    .ui-s052 h1{
        font-size:42px;
        line-height:1.15;

        margin-bottom:22px;
    }

    /*----------------------------------------
    Description
    ----------------------------------------*/

    .ui-s052 p{
        max-width:100%;
        margin:0 auto 35px;

        font-size:16px;
        line-height:1.8;
    }

    /*----------------------------------------
    Buttons
    ----------------------------------------*/

    .ui-s052 .hero-actions{
        justify-content:center;
        flex-direction:column;
        gap:15px;
    }

    .ui-s052 .hero-actions .btn{
        width:100%;
        min-width:100%;
    }

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

    .ui-s052 .hero-image-wrapper{
        margin:60px auto 0;
        max-width:430px;

        padding:15px;
    }

    .ui-s052 .hero-image-wrapper img{
        border-radius:24px;
    }

    .ui-s052 .hero-image-wrapper::before{
        inset:35px -10px -10px 35px;
        border-radius:26px;
    }

    .ui-s052 .hero-image-wrapper::after{
        left:50%;
        bottom:-18px;

        transform:translateX(-50%);
        font-size:13px;

        padding:12px 18px;
        white-space:nowrap;
    }

    .ui-s052 .hero-image-shape{
        width:130px;
        height:130px;

        right:-5px;
        top:-5px;
        border-radius:26px;
    }

    .ui-s052 .hero-image-shape::before{
        width:60px;
        height:60px;

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

    .ui-s052 .hero-image-shape::after{
        inset:16px;
        border-radius:18px;
    }

    .ui-s052 .hero-image-glow{
        width:280px;
        height:280px;
    }
}



/*==================================================
UI-S053 : FOOTER
==================================================*/

.ui-s053{
    position:relative;
    overflow:hidden;
    background:#090b18;
    padding:120px 0 0;
    color:#ffffff;
}

/*--------------------------------------------------
Background Glow
--------------------------------------------------*/

.ui-s053 .footer-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    pointer-events:none;
}

.ui-s053 .footer-glow-1{
    width:420px;
    height:420px;
    top:-180px;
    left:-150px;
    background:rgba(var(--theme-color-rgb),.4);
}

.ui-s053 .footer-glow-2{
    width:360px;
    height:360px;
    right:-140px;
    bottom:0;
    background:rgba(108,99,255,.2);
}

/*--------------------------------------------------
Container
--------------------------------------------------*/

.ui-s053 .container{
    position:relative;
    z-index:2;
}

/*--------------------------------------------------
Footer CTA
--------------------------------------------------*/

.ui-s053 .footer-cta{
    position:relative;
    overflow:hidden;

    padding:70px;

    margin-bottom:90px;
    border-radius:36px;

    background:
        linear-gradient(135deg,
        var(--theme-color),
        #5a34ff);

    box-shadow:
        0 35px 80px rgba(0,0,0,.25);
}

.ui-s053 .footer-cta::before{
    content:"";
    position:absolute;

    width:420px;
    height:420px;

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

    border-radius:50%;

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

.ui-s053 .footer-cta::after{
    content:"";
    position:absolute;

    width:220px;
    height:220px;

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

    border-radius:50%;

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

/*--------------------------------------------------
Tag
--------------------------------------------------*/

.ui-s053 .footer-tag{
    display:inline-flex;
    align-items:center;

    padding:10px 18px;
    margin-bottom:25px;

    border-radius:40px;
    background:rgba(255,255,255,.14);

    color:#ffffff;

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

/*--------------------------------------------------
Heading
--------------------------------------------------*/

.ui-s053 .footer-cta h2{
    margin-bottom:25px;

    color:#ffffff;

    font-size:58px;
    line-height:1.1;
    font-weight:700;
}

.ui-s053 .footer-cta h2 span{
    color:#ffffff;
    opacity:.9;
}

/*--------------------------------------------------
Description
--------------------------------------------------*/

.ui-s053 .footer-cta p{
    max-width:560px;
    margin-bottom:40px;

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

    font-size:18px;
    line-height:1.9;
}

/*--------------------------------------------------
Buttons
--------------------------------------------------*/

.ui-s053 .footer-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.ui-s053 .footer-cta-buttons .btn{
    min-width:210px;
}

.ui-s053 .footer-cta-buttons .btn-outline-light{
    border-color:rgba(255,255,255,.35);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
}

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

.ui-s053 .footer-cta-image{
    position:relative;
    display:flex;

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

.ui-s053 .footer-cta-image img{
    position:relative;
    display:block;

    width:100%;
    max-width:420px;
    margin:auto;

    z-index:2;
    transition:
        transform .7s ease,
        filter .5s ease;

}

.ui-s053 .footer-cta-image:hover img{
    transform:
        translateY(-10px)
        scale(1.04);
}

.ui-s053 .footer-cta-image::before{
    content:"";
    position:absolute;

    width:360px;
    height:360px;

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

    filter:blur(45px);
    z-index:1;
}

/*--------------------------------------------------
Footer Main
--------------------------------------------------*/

.ui-s053 .footer-main{
    padding-bottom:60px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.ui-s053 .footer-main>.row{
    row-gap:50px;
}

/*--------------------------------------------------
Logo
--------------------------------------------------*/

.ui-s053 .footer-logo{
    display:inline-block;
    margin-bottom:28px;
    color: #fff;
}

.ui-s053 .footer-logo h3{
    color: #fff;
}

.ui-s053 .footer-logo img{
    height:52px;
}

/*--------------------------------------------------
About
--------------------------------------------------*/

.ui-s053 .footer-about{
    max-width:360px;
    margin-bottom:30px;

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

    line-height:1.9;
}

/*--------------------------------------------------
Column Titles
--------------------------------------------------*/

.ui-s053 h5{
    margin-bottom:28px;

    color:#ffffff;

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

/*--------------------------------------------------
Lists
--------------------------------------------------*/

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

.ui-s053 li{
    margin-bottom:16px;
}

/*--------------------------------------------------
Links
--------------------------------------------------*/

.ui-s053 ul a{
    color:rgba(255,255,255,.70);
    text-decoration:none;
    transition:.35s;
}

.ui-s053 ul a:hover{
    color:#ffffff;
    padding-left:8px;
}

/*--------------------------------------------------
Contact
--------------------------------------------------*/

.ui-s053 .footer-contact li{
    display:flex;
    align-items:flex-start;

    gap:14px;

    color:rgba(255,255,255,.72);
    line-height:1.7;
}

.ui-s053 .footer-contact i{
    margin-top:2px;
    font-size:18px;
    color:var(--theme-color);
}

/*--------------------------------------------------
Social
--------------------------------------------------*/

.ui-s053 .footer-social{
    display:flex;
    gap:14px;
}

.ui-s053 .footer-social a{
    display:flex;
    align-items:center;
    justify-content:center;

    width:48px;
    height:48px;
    
    border-radius:50%;
    color:#ffffff;
    text-decoration:none;
    background:rgba(255,255,255,.5);
    transition:.35s;
}

.ui-s053 .footer-social a:hover{
    background:var(--theme-color);
    transform:translateY(-6px);
}

/*--------------------------------------------------
Footer Bottom
--------------------------------------------------*/

.ui-s053 .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:28px 0;
}

.ui-s053 .footer-bottom p{
    margin:0;
    color:rgba(255,255,255,.60);
}

.ui-s053 .footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:25px;
}

.ui-s053 .footer-links a{
    color:rgba(255,255,255,.60);
    text-decoration:none;
    transition:.35s;
}

.ui-s053 .footer-links a:hover{
    color:#ffffff;
}

/*==================================================
UI-S053 : FOOTER
==================================================*/

@media (max-width:991.98px){

    .ui-s053{
        padding:40px 0 0;
        text-align:center;
    }

    /*----------------------------------------
    Background
    ----------------------------------------*/

    .ui-s053 .footer-glow-1{
        width:240px;
        height:240px;
        top:-80px;
        left:-100px;
    }

    .ui-s053 .footer-glow-2{
        width:220px;
        height:220px;
        right:-90px;
        bottom:-50px;
    }

    /*----------------------------------------
    CTA
    ----------------------------------------*/

    .ui-s053 .footer-cta{
        padding:45px 30px;
        margin-bottom:60px;
        border-radius:26px;
    }

    .ui-s053 .footer-tag{
        font-size:12px;
        letter-spacing:1px;
        margin-bottom:20px;
    }

    .ui-s053 .footer-cta h2{
        font-size:40px;
        line-height:1.15;
        margin-bottom:20px;
    }

    .ui-s053 .footer-cta p{
        max-width:100%;
        font-size:16px;
        line-height:1.8;
        margin-bottom:30px;
    }

    .ui-s053 .footer-cta-buttons{
        flex-direction:column;
        gap:15px;
    }

    .ui-s053 .footer-cta-buttons .btn{
        width:100%;
        min-width:100%;
    }

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

    .ui-s053 .footer-cta-image{
        margin-top:40px;
    }

    .ui-s053 .footer-cta-image img{
        max-width:300px;
    }

    .ui-s053 .footer-cta-image::before{
        width:240px;
        height:240px;
    }

    /*----------------------------------------
    Footer Main
    ----------------------------------------*/

    .ui-s053 .footer-main{
        padding-bottom:40px;
    }

    .ui-s053 .footer-main .col-lg-4,
    .ui-s053 .footer-main .col-lg-2{
        margin-bottom:35px;
    }

    .ui-s053 .footer-about{
        max-width:100%;
        margin:0 auto 30px;
    }

    /*----------------------------------------
    Social
    ----------------------------------------*/

    .ui-s053 .footer-social{
        justify-content:center;
    }

    /*----------------------------------------
    Contact
    ----------------------------------------*/

    .ui-s053 .footer-contact li{
        justify-content:center;
        text-align:left;
    }

    /*----------------------------------------
    Bottom
    ----------------------------------------*/

    .ui-s053 .footer-bottom{
        flex-direction:column;
        gap:18px;
        padding:25px 0;
    }

    .ui-s053 .footer-links{
        justify-content:center;
        gap:18px;
    }
}