/* =========================================================
   LION TREE SERVICE
   DIGITAL SOCIAL CARD
========================================================= */

:root{

    --social-dark:#03130d;
    --social-dark-2:#061d14;
    --social-green:#0b3324;
    --social-green-2:#18543b;
    --social-green-3:#267553;

    --social-gold:#f2bf3f;
    --social-gold-light:#ffe29a;

    --social-white:#ffffff;

    --social-text:#14261c;
    --social-muted:#718078;

    --social-soft:#f4f7f4;
    --social-border:#e1e8e3;

}


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

*{

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    width:100%;

    margin:0;

    padding:0;

    overflow-x:hidden;

    color:var(--social-text);

    background:
        #eef3ef;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    -webkit-font-smoothing:
        antialiased;

}


button,
a{

    font:inherit;

}


a{

    text-decoration:none;

}


button{

    border:0;

}


img{

    max-width:100%;

}


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

.social-background{

    position:fixed;

    inset:0;

    z-index:-1;

    overflow:hidden;

    background:

        linear-gradient(
            150deg,
            #e8efe9 0%,
            #f8faf8 42%,
            #e9f0eb 100%
        );

}


.social-glow{

    position:absolute;

    border-radius:50%;

    filter:
        blur(5px);

    pointer-events:none;

}


.social-glow-one{

    width:500px;
    height:500px;

    top:-230px;
    right:-220px;

    background:
        rgba(242,191,63,.13);

}


.social-glow-two{

    width:450px;
    height:450px;

    left:-250px;
    bottom:-200px;

    background:
        rgba(18,93,62,.10);

}


.social-tree-rings{

    width:520px;
    height:520px;

    position:absolute;

    top:20%;
    left:50%;

    border-radius:50%;

    border:
        1px solid
        rgba(16,68,45,.035);

    transform:
        translateX(-50%);

    box-shadow:

        0 0 0 60px
        rgba(16,68,45,.016),

        0 0 0 120px
        rgba(16,68,45,.012),

        0 0 0 180px
        rgba(16,68,45,.008);

}


/* =========================================================
   PAGE
========================================================= */

.social-page{

    width:100%;

    padding:
        28px
        0
        70px;

}


.social-container{

    width:
        min(
            calc(100% - 28px),
            620px
        );

    margin:
        0 auto;

}


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

.social-profile-card{

    overflow:hidden;

    border:
        1px solid
        rgba(7,45,30,.08);

    border-radius:27px;

    background:#fff;

    box-shadow:
        0 25px 60px
        rgba(5,40,26,.12);

}


.social-profile-cover{

    min-height:155px;

    position:relative;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 85% 10%,
            rgba(242,191,63,.25),
            transparent 35%
        ),

        linear-gradient(
            140deg,
            var(--social-dark),
            var(--social-green-2)
        );

}


.social-profile-cover::after{

    content:"";

    width:240px;
    height:240px;

    position:absolute;

    right:-90px;
    bottom:-145px;

    border-radius:50%;

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

    box-shadow:

        0 0 0 28px
        rgba(255,255,255,.017),

        0 0 0 56px
        rgba(242,191,63,.025);

}


.social-cover-tree{

    position:absolute;

    right:25px;
    bottom:-50px;

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

    font-size:170px;

}


.social-status{

    position:absolute;

    top:18px;
    right:18px;

    z-index:3;

    padding:
        8px
        12px;

    display:flex;

    align-items:center;

    gap:7px;

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

    border-radius:50px;

    color:#fff;

    background:
        rgba(0,0,0,.20);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    font-size:11px;

    font-weight:700;

}


.social-status span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#57da85;

    box-shadow:
        0 0 0 4px
        rgba(87,218,133,.10);

}


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

.social-profile-content{

    position:relative;

    padding:
        0
        25px
        25px;

}


/* =========================================================
   LOGO
========================================================= */

.social-logo-shell{

    width:116px;
    height:116px;

    position:relative;

    margin-top:-58px;

    z-index:4;

}


.social-logo-wrap{

    width:116px;
    height:116px;

    padding:8px;

    display:flex;

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

    overflow:hidden;

    border:
        5px solid #fff;

    border-radius:25px;

    background:#fff;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.14);

}


.social-logo-wrap img{

    width:100%;
    height:100%;

    object-fit:contain;

}


.social-verified{

    width:29px;
    height:29px;

    position:absolute;

    right:-4px;
    bottom:5px;

    display:flex;

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

    border:
        3px solid #fff;

    border-radius:50%;

    color:
        var(--social-dark);

    background:
        var(--social-gold);

    font-size:11px;

}


/* =========================================================
   COMPANY
========================================================= */

.social-company{

    margin-top:15px;

}


.social-category{

    display:inline-block;

    margin-bottom:7px;

    color:
        var(--social-green-3);

    font-size:11px;

    line-height:1.4;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.8px;

}


.social-company h1{

    margin:0;

    color:
        var(--social-text);

    font-family:
        "Oswald",
        Arial,
        sans-serif;

    font-size:
        clamp(
            31px,
            7vw,
            43px
        );

    line-height:1;

    text-transform:uppercase;

}


.social-company h1 span{

    display:block;

    margin-top:5px;

    color:
        var(--social-green-2);

    font-size:.69em;

}


.social-owner,
.social-location{

    margin:
        13px
        0
        0;

    display:flex;

    align-items:center;

    gap:8px;

    color:
        var(--social-muted);

    font-size:13px;

}


.social-location{

    margin-top:6px;

}


.social-owner i,
.social-location i{

    width:18px;

    color:
        var(--social-gold-dark, #d69a1b);

}


/* =========================================================
   MAIN ACTIONS
========================================================= */

.social-main-actions{

    margin-top:23px;

    display:grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:10px;

}


.social-main-button{

    min-height:66px;

    padding:8px 12px;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    gap:11px;

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

    border-radius:14px;

    color:
        var(--social-text);

    background:
        var(--social-soft);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;

}


.social-main-button:hover{

    transform:
        translateY(-2px);

    border-color:
        rgba(242,191,63,.45);

    box-shadow:
        0 10px 24px
        rgba(5,40,26,.08);

}


.social-main-button > span{

    width:44px;
    height:44px;

    min-width:44px;

    display:flex;

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

    border-radius:12px;

    color:
        var(--social-dark);

    background:
        var(--social-gold);

}


.social-main-button small,
.social-main-button strong{

    display:block;

}


.social-main-button small{

    margin-bottom:2px;

    color:
        var(--social-muted);

    font-size:10px;

    text-transform:uppercase;

}


.social-main-button strong{

    color:
        var(--social-text);

    font-size:13px;

}


.social-main-call{

    color:#fff;

    border-color:
        transparent;

    background:

        linear-gradient(
            135deg,
            var(--social-dark-2),
            var(--social-green-2)
        );

}


.social-main-call small{

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

}


.social-main-call strong{

    color:#fff;

}


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

.social-section{

    margin-top:15px;

    padding:22px;

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

    border-radius:21px;

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

    box-shadow:
        0 12px 35px
        rgba(5,40,26,.055);

}


.social-section-heading{

    margin-bottom:18px;

    display:flex;

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

    gap:15px;

}


.social-section-heading > div > span{

    display:block;

    margin-bottom:3px;

    color:
        var(--social-green-3);

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.8px;

}


.social-section-heading h2{

    margin:0;

    color:
        var(--social-text);

    font-family:
        "Oswald",
        Arial,
        sans-serif;

    font-size:25px;

    text-transform:uppercase;

}


.social-section-heading > i{

    color:
        var(--social-gold);

    font-size:19px;

}


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

.social-app-grid{

    display:grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:10px;

}


.social-app{

    min-width:0;
    min-height:126px;

    padding:14px 7px;

    position:relative;

    overflow:hidden;

    display:flex;

    flex-direction:column;

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

    gap:4px;

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

    border-radius:17px;

    color:
        var(--social-text);

    background:
        var(--social-soft);

    text-align:center;

    cursor:pointer;

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease;

    -webkit-tap-highlight-color:
        transparent;

}


.social-app:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(242,191,63,.45);

    background:#fff;

    box-shadow:
        0 12px 25px
        rgba(5,40,26,.08);

}


.social-app:active{

    transform:
        scale(.96);

}


.social-app-icon{

    width:49px;
    height:49px;

    margin-bottom:5px;

    display:flex;

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

    border-radius:15px;

    color:
        var(--social-dark);

    background:

        linear-gradient(
            145deg,
            var(--social-gold-light),
            var(--social-gold)
        );

    font-size:18px;

}


.social-app strong{

    display:block;

    max-width:100%;

    overflow:hidden;

    color:
        var(--social-text);

    font-size:12px;

    line-height:1.25;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.social-app small{

    color:
        var(--social-muted);

    font-size:9px;

    line-height:1.25;

}


/* =========================================================
   SERVICES
========================================================= */

.social-services{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

}


.social-service-chip{

    min-height:42px;

    padding:
        5px
        12px
        5px
        5px;

    display:inline-flex;

    align-items:center;

    gap:8px;

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

    border-radius:50px;

    color:
        var(--social-text);

    background:
        var(--social-soft);

    font-size:11px;

    font-weight:700;

}


.social-service-chip > span{

    width:31px;
    height:31px;

    min-width:31px;

    display:flex;

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

    border-radius:50%;

    color:
        var(--social-dark);

    background:
        var(--social-gold);

    font-size:11px;

}


/* =========================================================
   INFORMATION
========================================================= */

.social-info-list{

    display:flex;

    flex-direction:column;

}


.social-info-row{

    min-height:68px;

    display:grid;

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

    align-items:center;

    gap:11px;

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

}


.social-info-row:last-child{

    border-bottom:0;

}


.social-info-icon{

    width:42px;
    height:42px;

    min-width:42px;

    display:flex;

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

    border-radius:13px;

    color:
        var(--social-green-2);

    background:
        rgba(20,86,59,.08);

}


.social-info-row small{

    display:block;

    color:
        var(--social-muted);

    font-size:10px;

    text-transform:uppercase;

}


.social-info-row strong{

    display:block;

    margin-top:2px;

    overflow-wrap:anywhere;

    color:
        var(--social-text);

    font-size:12px;

    line-height:1.4;

}


.social-info-row > a{

    width:35px;
    height:35px;

    display:flex;

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

    border-radius:50%;

    color:
        var(--social-green-2);

    background:
        var(--social-soft);

    font-size:10px;

}


.social-open-badge{

    padding:
        6px
        9px;

    border-radius:30px;

    color:
        #126837;

    background:
        #e8f7ee;

    font-size:9px;

    font-weight:800;

    text-transform:uppercase;

}


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

.social-emergency{

    margin-top:15px;

    padding:22px;

    position:relative;

    overflow:hidden;

    display:grid;

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

    align-items:start;

    gap:15px;

    border-radius:21px;

    color:#fff;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(242,191,63,.17),
            transparent 40%
        ),

        linear-gradient(
            140deg,
            var(--social-dark),
            var(--social-green-2)
        );

    box-shadow:
        0 18px 42px
        rgba(4,32,21,.17);

}


.social-emergency::after{

    content:"";

    width:170px;
    height:170px;

    position:absolute;

    right:-90px;
    bottom:-100px;

    border-radius:50%;

    border:
        1px solid
        rgba(242,191,63,.15);

}


.social-emergency-icon{

    width:53px;
    height:53px;

    display:flex;

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

    border-radius:16px;

    color:
        var(--social-dark);

    background:
        var(--social-gold);

    font-size:19px;

}


.social-emergency-content{

    min-width:0;

    position:relative;

    z-index:2;

}


.social-emergency-content > span{

    color:
        var(--social-gold-light);

    font-size:10px;

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.7px;

}


.social-emergency h2{

    margin:
        4px
        0
        6px;

    color:#fff;

    font-family:
        "Oswald",
        Arial,
        sans-serif;

    font-size:24px;

    line-height:1.15;

    text-transform:uppercase;

}


.social-emergency p{

    margin:
        0
        0
        14px;

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

    font-size:11px;

    line-height:1.5;

}


.social-emergency a{

    min-height:43px;

    padding:
        0 13px;

    display:inline-flex;

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

    gap:8px;

    border-radius:9px;

    color:
        var(--social-dark);

    background:
        var(--social-gold);

    font-size:11px;

    font-weight:800;

}


/* =========================================================
   FOOTER
========================================================= */

.social-footer{

    padding:
        38px
        15px
        10px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


.social-footer img{

    width:64px;
    height:64px;

    margin-bottom:10px;

    object-fit:contain;

}


.social-footer strong{

    color:
        var(--social-text);

    font-family:
        "Oswald",
        Arial,
        sans-serif;

    font-size:16px;

    text-transform:uppercase;

}


.social-footer p{

    margin:
        4px
        0
        9px;

    color:
        var(--social-muted);

    font-size:10px;

}


.social-footer small{

    color:
        #9aa59f;

    font-size:9px;

}


/* =========================================================
   MOBILE QUICK ACTION BAR
========================================================= */

.social-mobile-actions{

    display:none;

}


/* =========================================================
   TOAST
========================================================= */

.social-toast{

    min-width:180px;

    min-height:48px;

    padding:
        8px
        15px;

    position:fixed;

    left:50%;
    bottom:25px;

    z-index:9999;

    display:flex;

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

    gap:8px;

    border-radius:50px;

    color:#fff;

    background:
        var(--social-dark);

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

    font-size:12px;

    font-weight:700;

    opacity:0;

    visibility:hidden;

    transform:
        translate(
            -50%,
            15px
        );

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;

}


.social-toast.social-toast-visible{

    opacity:1;

    visibility:visible;

    transform:
        translate(
            -50%,
            0
        );

}


.social-toast i{

    color:
        var(--social-gold);

}


/* =========================================================
   HIDDEN DATA
========================================================= */

#socialCardData{

    display:none !important;

}


/* =========================================================
   REVEAL
========================================================= */

.social-reveal{

    opacity:0;

    transform:
        translateY(20px);

    transition:
        opacity .65s ease,
        transform .65s
        cubic-bezier(.22,.61,.36,1);

}


.social-reveal.social-visible{

    opacity:1;

    transform:none;

}


/* =========================================================
   RIPPLE
========================================================= */

.social-ripple-effect{

    width:15px;
    height:15px;

    position:absolute;

    border-radius:50%;

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

    transform:
        translate(
            -50%,
            -50%
        )
        scale(0);

    animation:
        socialRipple
        .55s ease-out;

    pointer-events:none;

}


@keyframes socialRipple{

    to{

        opacity:0;

        transform:
            translate(
                -50%,
                -50%
            )
            scale(14);

    }

}


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

@media(max-width:600px){

    body{

        padding-bottom:94px;

    }


    .social-page{

        padding-top:12px;

        padding-bottom:35px;

    }


    .social-container{

        width:
            calc(
                100% - 20px
            );

    }


    .social-profile-card{

        border-radius:23px;

    }


    .social-profile-cover{

        min-height:137px;

    }


    .social-profile-content{

        padding:
            0
            18px
            20px;

    }


    .social-logo-shell,
    .social-logo-wrap{

        width:104px;
        height:104px;

    }


    .social-logo-shell{

        margin-top:-52px;

    }


    .social-company h1{

        font-size:
            clamp(
                29px,
                9vw,
                40px
            );

    }


    .social-main-actions{

        grid-template-columns:1fr 1fr;

    }


    .social-main-button{

        min-height:63px;

        padding:
            7px
            9px;

    }


    .social-main-button > span{

        width:40px;
        height:40px;

        min-width:40px;

    }


    .social-section{

        padding:18px;

        border-radius:19px;

    }


    .social-app{

        min-height:112px;

    }


    .social-app-icon{

        width:45px;
        height:45px;

    }


    /* ===============================================
       MOBILE ACTION BAR
    =============================================== */

    .social-mobile-actions{

        height:73px;

        display:grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );

        position:fixed;

        left:10px;
        right:10px;

        bottom:10px;

        z-index:9900;

        padding:6px;

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

        border-radius:20px;

        background:
            rgba(4,23,15,.97);

        box-shadow:
            0 15px 40px
            rgba(0,0,0,.28);

        backdrop-filter:
            blur(15px);

        -webkit-backdrop-filter:
            blur(15px);

    }


    .social-mobile-actions a,
    .social-mobile-actions button{

        display:flex;

        flex-direction:column;

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

        gap:4px;

        border:0;

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

        background:transparent;

        font-size:9px;

        font-weight:700;

        cursor:pointer;

    }


    .social-mobile-actions span{

        width:37px;
        height:34px;

        display:flex;

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

        border-radius:11px;

        color:
            var(--social-gold);

        background:
            rgba(242,191,63,.09);

        font-size:14px;

    }


    .social-mobile-actions a:first-child span{

        color:
            var(--social-dark);

        background:
            var(--social-gold);

    }


    .social-toast{

        bottom:98px;

    }

}


/* =========================================================
   VERY SMALL
========================================================= */

@media(max-width:370px){

    .social-app-grid{

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

    }


    .social-main-actions{

        grid-template-columns:1fr;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    html{

        scroll-behavior:auto;

    }


    .social-reveal{

        opacity:1;

        transform:none;

        transition:none;

    }


    .social-app,
    .social-main-button{

        transition:none;

    }

}