/* Home page Social Media + Download App section */
.socialmaindiv{
    width:99.5%;
    height:auto;
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin:0;
    background:#ffffff;
    color:#18212b;
    transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}

.socialdiv,
.appdiv{
    background:#ffffff;
    border:1px solid #dfe5ea;
    box-shadow:0 2px 10px rgba(20,35,48,.08);
    overflow:hidden;
    transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease;
}

.socialdiv{width:68%}
.appdiv{width:31%;text-align:center}

.socialp,
.appp{
    margin:0;
    padding:8px 10px;
    font-size:15px;
    font-weight:800;
    text-align:center;
    color:#27323d;
    background:#f4f7f9;
    border:0;
    border-bottom:1px solid #dfe5ea;
    transition:background-color .22s ease,color .22s ease,border-color .22s ease;
}

.sci{
    list-style:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    width:100%;
    margin:0;
    padding:13px 10px;
    background:#ffffff;
    transition:background-color .22s ease;
}

.sci li{margin:0;padding:0}

.sci li a{
    width:38px;
    height:38px;
    margin:0;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#087551;
    background:#eaf8f2;
    border:1px solid #cfe9de;
    font-size:19px;
    text-decoration:none;
    box-shadow:0 2px 7px rgba(8,117,81,.12);
    transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}

.sci li a:hover,
.sci li a:focus-visible{
    color:#ffffff;
    background:#18a866;
    border-color:#18a866;
    box-shadow:0 4px 12px rgba(24,168,102,.30);
    transform:translateY(-2px);
    outline:none;
}

.appul{
    list-style:none;
    margin:0;
    padding:10px;
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ffffff;
    transition:background-color .22s ease;
}

.applogo{
    width:60px;
    height:60px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid #dbe5e0;
    background:#ffffff;
}

/* Dark mode */
html.sadia-dark .socialmaindiv{
    background:#0e151c !important;
    color:#eef3f6 !important;
}

html.sadia-dark .socialdiv,
html.sadia-dark .appdiv{
    background:#111a22 !important;
    border-color:#31404c !important;
    box-shadow:0 2px 12px rgba(0,0,0,.35) !important;
}

html.sadia-dark .socialp,
html.sadia-dark .appp{
    color:#f1f5f7 !important;
    background:#17232d !important;
    border-bottom-color:#31404c !important;
}

html.sadia-dark .sci,
html.sadia-dark .appul{
    background:#111a22 !important;
}

html.sadia-dark .sci li a{
    color:#72e3b5 !important;
    background:#1a2b32 !important;
    border-color:#35535a !important;
    box-shadow:0 2px 9px rgba(0,0,0,.35) !important;
}

html.sadia-dark .sci li a:hover,
html.sadia-dark .sci li a:focus-visible{
    color:#07110d !important;
    background:#65dca9 !important;
    border-color:#65dca9 !important;
    box-shadow:0 4px 14px rgba(101,220,169,.25) !important;
}

html.sadia-dark .applogo{
    background:#ffffff;
    border-color:#4a5b68;
    box-shadow:0 2px 10px rgba(0,0,0,.38);
}

@media(max-width:700px){
    .socialmaindiv{
        width:100%;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:stretch;
        gap:5px;
    }
    .socialdiv{
        width:68% !important;
        min-width:0;
    }
    .appdiv{
        width:32% !important;
        min-width:0;
    }
    .socialp,.appp{
        padding:7px 4px;
        font-size:11px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .sci{
        flex-wrap:wrap;
        gap:4px;
        padding:8px 4px;
    }
    .sci li a{
        width:28px;
        height:28px;
        font-size:14px;
    }
    .appul{
        min-height:58px;
        padding:6px 3px;
    }
    .applogo{
        width:46px;
        height:46px;
    }
}