/* Minification failed. Returning unminified contents.
(117,32): run-time error CSS1039: Token not allowed after unary operator: '-black'
(126,25): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue'
(136,46): run-time error CSS1039: Token not allowed after unary operator: '-clr-dgreen'
(318,38): run-time error CSS1039: Token not allowed after unary operator: '-clr-dgreen'
(341,32): run-time error CSS1039: Token not allowed after unary operator: '-clr-yellow'
(349,36): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue'
(446,32): run-time error CSS1039: Token not allowed after unary operator: '-black'
(484,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-yellow'
(488,33): run-time error CSS1039: Token not allowed after unary operator: '-clr-yellow'
(571,36): run-time error CSS1039: Token not allowed after unary operator: '-black'
(601,32): run-time error CSS1039: Token not allowed after unary operator: '-orange'
(755,36): run-time error CSS1039: Token not allowed after unary operator: '-clr-yellow'
(771,28): run-time error CSS1039: Token not allowed after unary operator: '-orange'
(791,21): run-time error CSS1039: Token not allowed after unary operator: '-black'
(854,28): run-time error CSS1039: Token not allowed after unary operator: '-UNFont'
(947,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(948,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(949,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(950,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(951,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(952,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(953,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(954,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(955,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(956,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(964,29): run-time error CSS1039: Token not allowed after unary operator: '-clr-white'
(1053,24): run-time error CSS1039: Token not allowed after unary operator: '-clr-blue'
 */
/*#region || SHARED PROPERTIES */

body {
    margin      : 0;
    line-height : 1.7;
    font-family : 'Montserrat', "Open San";
}

body, p, ul {
    margin  : 0;
    padding : 0;
}

*, *:before, *:after {
    -moz-box-sizing     : border-box;
    -webkit-box-sizing  : border-box;
    box-sizing          : border-box;
}

html {
    scroll-behavior : smooth;
}

a, ul, li {
    color           : black;
    list-style      : none;
    list-style-type : none;
    text-decoration : none;
}

p {
    margin : 0 0 20px;
}

h4 {
    font-size : 1.1em;
}

.scroll-to-top {
    color               : #FFF;
    right               : 10px;
    bottom              : 0;
    height              : 9px;
    display             : block;
    opacity             : 0;
    padding             : 13px 10px 35px;    
    position            : fixed;
    min-width           : 49px;
    text-align          : center;
    background          : #404040;
    border-radius       : 7px 7px 0 0;
    text-decoration     : none;  
    
    transition          : opacity 0.3s;
    -moz-transition     : opacity 0.3s;
    -webkit-transition  : opacity 0.3s;
}

    .scroll-to-top.visible {
        opacity : 0.75;
    }

/*#region || -- BACKGROUND */

.sta-bg {
/* Layout */
    width                   : 100%;
    min-height              : 100%;    
    overflow-x              : hidden;

/* Appearance */
    background              : white;
    background              : linear-gradient(100deg, #ffffff 20%, #d7e1ec 74%);
    background-repeat       : no-repeat;

/* Others */
    user-select             : none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
    -ms-user-select         : none; /* Internet Explorer/Edge */
    -moz-user-select        : none; /* Old versions of Firefox */
    -webkit-user-select     : none; /* Safari */
    -webkit-touch-callout   : none; /* iOS Safari */
}

    .sta-bg::before {
        content             : "";
        position            : absolute;        
        
        top                 : 0;
        left                : 0;
        width               : 100%;        
        height              : 470px;
        clip-path           : polygon(0 0, 0 100%, 100% 13%);
        background-color    : #fff;
        -webkit-clip-path   : polygon(0 0, 0 100%, 100% 13%);
    }

/*#endregion */

/*#region || -- TITLE */

.sta-main-body {
    margin      : auto;
    position    : relative;    
    max-width   : 1400px;
    box-shadow  : 0 16px 48px #e3e7eb;
}

.sta-title-container {
    padding-top : 35px;
}

.sta-title {
    max-width : min(800px, 100%);
}

    .sta-title h1 {
        color           : var(--black);
        margin          : 0 0 15px;
        font-size       : 28px;
        transition      : color .35s ease-in-out;
        font-weight     : 600;
        line-height     : 1.35;
        text-transform  : capitalize;
    }
        .sta-title h1:hover {
            color: var(--clr-blue);
        }
    
        .sta-title.border {
        /* Layout */  
            padding         : 1.5em 1.4rem 5em;  
            position        : relative;
            margin-bottom   : -5em;

        /* Appearance */
            border          : 5px solid var(--clr-dgreen);
            border-right    : 0;
            border-bottom   : 0;                 
        }

.sta-content-container {
    margin          : 0 2%;
    position        : relative;
    padding-bottom  : 85px;
}

/*#endregion */

/*#region || -- ANIMATION */

.flowing-obj {
    top         : 0;
    right       : 0;
    width       : 30%;
    height      : 100%;
    z-index     : 0;
    overflow    : hidden;
    position    : absolute;
    margin: 0 0 10px 0; 
}

    .flowing-obj li {
        bottom      : -100px;
        display     : block;
        position    : absolute;
        animation   : animate 25s linear infinite;
        list-style  : none;
        background  : rgba(255, 255, 255, 0.2);
    }

        .flowing-obj li:nth-child(1) {
            left                : 25%;
            width               : 40px;
            height              : 40px;
            animation-delay     : 0s;
        }

        .flowing-obj li:nth-child(2) {
            left                : 10%;
            width               : 20px;
            height              : 20px;
            animation-delay     : 2s;
            animation-duration  : 12s;
        }

        .flowing-obj li:nth-child(3) {
            left                : 70%;
            width               : 20px;
            height              : 20px;
            animation-delay     : 4s;
        }

        .flowing-obj li:nth-child(4) {
            left                : 40%;
            width               : 30px;
            height              : 30px;
            animation-delay     : 0s;
            animation-duration  : 18s;
        }

        .flowing-obj li:nth-child(5) {
            left                : 65%;
            width               : 20px;
            height              : 20px;
            animation-delay     : 0s;
        }

        .flowing-obj li:nth-child(6) {
            left                : 75%;
            width               : 65px;
            height              : 65px;
            animation-delay     : 3s;
        }

        .flowing-obj li:nth-child(7) {
            left                : 35%;
            width               : 75px;
            height              : 75px;
            animation-delay     : 7s;
        }

        .flowing-obj li:nth-child(8) {
            left                : 50%;
            width               : 25px;
            height              : 25px;
            animation-delay     : 15s;
            animation-duration  : 45s;
        }

        .flowing-obj li:nth-child(9) {
            left                : 20%;
            width               : 15px;
            height              : 15px;
            animation-delay     : 2s;
            animation-duration  : 35s;
        }

        .flowing-obj li:nth-child(10) {
            left                : 85%;
            width               : 75px;
            height              : 75px;
            animation-delay     : 0s;
            animation-duration  : 11s;
        }

@keyframes animate {
    from {
        opacity         : 1;
        transform       : translateY(0) rotate(0deg);
        border-radius   : 0;
    }
    to {
        opacity         : 0;
        transform       : translateY(-1000px) rotate(720deg);
        border-radius   : 50%;
    }
}

/*#endregion */

/*#endregion */

/*#region || INDEX PAGE */

/*#region || -- MAIN */

.sta-intro, .sta-conclusion {
    position    : relative;
    max-width   : 800px;
}

    .sta-intro::after {        
        content         : '';
        position        : absolute;
        
        border          : 1px solid grey;
        z-index         : 1;
        min-width       : min(800px, 100%);
        border-bottom   : 0;
    }

    .sta-intro p, .sta-conclusion p {
        color       : black;
        font-size   : 14px;
        text-align  : justify;
    }
        .sta-intro p:last-child {
            padding-bottom : 5px;
        }

.sta-conclusion {
    padding-top : 20px;
}

.un-sdg {
/* Layout */
    left                        : -2%;
    width                       : min(827px, 100%);
    display                     : flex;
    padding                     : 0 0 40px 2%;
    position                    : relative;
    flex-wrap                   : wrap;
    justify-content             : flex-start; /* Desktop View */
    -webkit-justify-content     : flex-start; /* Desktop View */
/*  Appearance  */
    background                  : #fff; 
}

    .un-sdg::after {
        content     : "";
        position    : absolute;
    /* Layout */
        left        : 26px;
        width       : 97%;  
        bottom      : 0;      
        padding     : .5em 2rem 5em;
    /* Appearance */     
        border      : 5px solid var(--clr-dgreen);
        border-top  : 0;
        border-left : 0;
    }

    .un-sdg input {
        width           : 140px;
        transition      : 0.5s;
        margin-top      : 30px;
        margin-right    : 15px;
        aspect-ratio    : 1/1;
    }

        .un-sdg input:hover:enabled {
            transform : translateY(-20px);
        }
    
.sta-content-btn {
/* Layout */
    padding             : 10px 50px;
/* Appearance */
    border              : 1px solid #fff;
    transition          : color .35s ease-in-out, background-color .35s ease-in-out;
    background-color    : var(--clr-yellow);
/* Text */
    font-size           : 14px;
    line-height         : 1.5;
    text-decoration     : none !important;
}
    .sta-content-btn:hover {
        color               : #fff;
        background-color    : var(--clr-blue);
    }

/*#endregion */

/*#region || -- SIDE PANEL */

.cd-panel {
/* Layout */
    top                 : 0;
    left                : 0;
    height              : 100%;
    z-index             : 1;
    visibility          : hidden;
/* Animation */
    transition          : visibility 0s 0.6s;
    -webkit-transition  : visibility 0s 0.6s;
}

    .cd-panel.cd-panel--is-visible {
        visibility          : visible;
        transition          : visibility 0s 0s;
        -webkit-transition  : visibility 0s 0s;
    }

        .cd-panel.cd-panel--is-visible::after {
            transition          : background 0.3s 0s;
            -webkit-transition  : background 0.3s 0s;
        }

.cd-panel__close {
    top         : 0;
    left        : 20px;
    position    : absolute;
    font-size   : 40px;
}

/*#region || Animation for X */

.cd-panel--is-visible .cd-panel__close::before {
    animation           : cd-close-1 0.6s 0.3s;
    -webkit-animation   : cd-close-1 0.6s 0.3s;
}

.cd-panel--is-visible .cd-panel__close::after {
    animation           : cd-close-2 0.6s 0.3s;
    -webkit-animation   : cd-close-2 0.6s 0.3s;
}

/*#endregion */

.sta-panel_container {
/* Layout */
    top                 : 0;
    width               : min(520px,100%);
    height              : 100%;
    z-index             : 1;
    position            : absolute;
/* Appearance */
    background          : rgba(255,255,255,0.2);
/* Animation */
    transition          : -webkit-transform 0.3s 0.3s;
    transition          : transform 0.3s 0.3s;
    transition          : transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
    -webkit-transition  : -webkit-transform 0.3s 0.3s;
}

.cd-panel--from-right .sta-panel_container {
    right               : 0;
    transform           : translate3d(100%, 0, 0);
    -webkit-transform   : translate3d(100%, 0, 0);
}

.cd-panel--is-visible .sta-panel_container {
    transform                   : translate3d(0, 0, 0);
    transition-delay            : 0s;
    -webkit-transform           : translate3d(0, 0, 0);
    -webkit-transition-delay    : 0s;
}

.sta-panel_content {
    top                         : 0;
    left                        : 0;
    width                       : 100%;
    height                      : 100%;
    padding                     : 50px 5%;
    overflow                    : auto;
    position                    : absolute;
    -webkit-overflow-scrolling  : touch; /* Smooth scrolling on touch devices */
}

.sta-panel_content > h3 {
    margin-top     : 17px;
    text-transform : uppercase;
}

    .sta-panel_content p {
        color           : var(--black);
        font-size       : 36px;
        font-weight     : 600;
        line-height     : 1.3;
    }

#dvGoalsDescription p {
    font-size   : 14px;
    text-align  : justify;
    font-weight : unset;
    line-height : 1.5;
}

.sta-panel_content_focusarea {
    display         : flex;
    flex-wrap       : wrap;
}

#dvFocusArealst {
    width           : 100%;
    padding         : 0;
    list-style-type : none;
}

.sta-focusarea-container {
    cursor              : pointer;
    border              : 2px solid #fff;
    padding             : 15px 20px;
    border-radius       : 5px;
    margin-bottom       : 1.1rem;
    background-color    : #f2f2f2;
}

    .sta-focusarea-container:hover, .sta-ss-focusarea-btn:hover {
        background-color : white;
    }

.active-click {
    background-color : var(--clr-yellow);
}

    .active-click:not(.disable):hover { /* When button is clicked, effects below will disable hover effect */   
        background-color : var(--clr-yellow); 
    }

div.sta-focusarea-container.active-click h3, div.sta-focusarea-container.active-click p {
    color: black !important;
}

#dvFocusArealst li div div div h3 { /* Focus Area Name */
    color           : black;
    margin          : 0 0 5px;
    font-size       : 16px;
    font-weight     : inherit;
    text-transform  : none;
}

#dvFocusArealst li div div div div p { /* Focus Area Synopsis */
    color           : #83838f;
    margin          : 0 0 10px;
    font-size       : 14px;
    line-height     : 1.5;
    font-weight     : normal;
}

.sta-panel_content_btn {
    width               : 100%;
    color               : black !important;
    cursor              : pointer;
    padding             : 8px 0;
    font-size           : 16px;
    border-radius       : 10px;
    background-color    : #e3e7eb !important;
}

.btn-primary, .sta-panel_content_btn:hover {
    cursor          : pointer;
    padding         : 8px 16px;
    border-style    : solid;
    border-width    : 1px;
}

.btn-primary[disabled] {
    border-color: #f5b5a5;
}

/*#endregion */

/*#endregion */

/*#region || LIST PAGE */

.sta-focusarea-list-container {
    display     : flex;
    min-height  : 97rem;
}

.sta-list-responsive-title {
/* Layout */
    width            : 100vw;        
    display          : none;
    padding          : 15px;    
    visibility       : hidden;
    margin-left      : calc(50% - 50vw);
    margin-bottom    : 2rem;
/* Appearance */
    background-color : white;
/* Text */
    font-size        : 20px;
}

/*#region || -- NAVIGATION */

.sta-focusarea-list-nav-container {
    width: 20%;
}

    .sta-focusarea-list-nav-container > div {
    /* Layout */
        width               : 90%;
        display             : flex;
        flex-wrap           : wrap;  
        text-align          : center;
        justify-content     : center;
    /* Appearance */
        color               : var(--black);
        background-color    : #F0F0F0;        
    /* Others */    
        border-radius       : 10px;
    }

.sta-focusarea-list-nav-container-main {
    width           : 100%;
    display         : flex;
    font-size       : 2.2em !important;
    align-items     : center;
    flex-direction  : column;
}

    .sta-focusarea-list-nav-container-main > p:nth-child(2){
        color       : black;
        font-size   : 16px;
    }

.sta-focusarea-list-title {
    margin : 5% 0;
}

.sta-focusarea-list-nav-container-dvFocusAreaPtn {
    display     : contents;
    text-align  : center;
}

.active-click.list {
    box-shadow          : 0 2px 0 0 white;
    background-color    : var(--orange);
    -webkit-box-shadow  : 0 2px 0 0 white;
}

.sta-list-font-style {
    font-size   : 14px !important;
    font-weight : normal !important;
}

.sta-focusarea-list-nav-container-main > #dvFocusArealst {
    width   : 95%;
    margin  : 0;
}

    .sta-focusarea-list-nav-container-main > #dvFocusArealst > li {
        margin-bottom: 1rem;
    }

    .sta-focusarea-list-nav-container-main > #dvFocusArealst + button {
        width           : 95%;
        border-radius   : 10px;
        margin-bottom   : 150px;
    }

.sta-ss-focusarea-submit-btn {
    color               : black !important;
    font-size           : 14px;
    background-color    : #e3e7eb !important;
}

.sta-focusarea-openNav {
    position    : fixed;
    font-size   : 30px;
    visibility  : hidden;
}

.closebtn {
    visibility : hidden;
}

/*#endregion */

/*#region || -- CONTENT */

.sta-focusarea-list-standard-container {
    width: 80%;
}

    .sta-focusarea-list-standard-container ul {
        margin          : 0;
        display         : flex;
        flex-wrap       : wrap;
        padding-left    : 0;
        list-style-type : none;
        justify-content : space-between;
    }

.sta-focusarea-list-standard-container-list {
/* Layout */
    width               : 48%;
    z-index             : 1;
    padding             : 25px;
    margin-bottom       : 2rem;
/* Appearance */
    background-color    : #fff;
    box-shadow          : rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
/* Others */
    border-radius       : 10px;
}

.sta-std {
    top             : -1rem;
    left            : -0.5rem;
    width           : 100%;
    position        : relative;
    border-radius   : 1rem 1rem 0 1rem;
}

.sta-std-name {
    color           : #1d2127;
    margin          : 0 1% 0 1%;
    padding-top     : 7px;
    line-height     : 2.5;
    text-transform  : uppercase;
}

.sta-std-name > strong:last-child {
    display         : block;
    font-size       : 14px;
    line-height     : 1.5;
    padding-bottom  : 5px;
}

.sta-stds-benefit, .sta-stds-scope {
    color           : #1d2127;
    margin          : auto;    
    font-size       : 14px;    
    line-height     : 2;
}

    .sta-stds-benefit + p, .sta-stds-scope + p {
        color       : black;
        margin      : 0 0 10px 0;
        font-size   : 14px;
        text-align  : justify;
    }

.sta-ss-int-btn::after {
    content             : "";
    position            : absolute;
    
    width               : 100%;
    border              : 1px solid grey;
    border-bottom       : 0;
}

.sta-ss-int-btn a {
/* Layout */
    z-index             : 1;
    display             : block;
    position            : relative;
    padding             : 10px 20px;
/* Apperance */
    background-color    : #F0F0F0;
/* Text */
    font-size           : 15px;
    text-align          : center;
    font-weight         : 600;
    text-decoration     : none;
/* Others */
    transition          : 0.5s;    
}

    .sta-ss-int-btn a::before, .sta-ss-int-btn a::after {
        content     : '';
        position    : absolute;
        
        left        : 0;
        width       : 100%;
        height      : 100%;
        opacity     : 0;
    }

    .sta-ss-int-btn a::before {  
        top             : 0;
        transform       : scaleY(1);
        transition      : 0.3s;
    }

    .sta-ss-int-btn a::after {
        top                 : 2px;
        z-index             : -1;
        transform           : scale(0);
        transition          : 0.3s;
        background-color    : var(--clr-yellow);
    }

    .sta-ss-int-btn a:hover::before, .sta-ss-int-btn a:hover::after {
        transform: scaleY(1);
        opacity: 1;
    }

.sta-list-pagination-alt {
    display         : flex;
    justify-content : center;
}

.pagination > .active > a, body.dark .pagination > .active > a,
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    color: #ffffff;
    background-color: var(--orange);
}

/*#endregion */

/*#endregion*/

/*#region || ERROR PAGE */

.sta-err-container {
    height      : 97rem;
    padding-top : 15px;
}  

    .sta-err-container h1 {
        font-size   : 40px;
        font-weight : 600;
    }

    .sta-err-container h1, .sta-err-container p {
        color: var(--black);
    }

/*#endregion */

@media screen and (max-width: 506px) {  /* For Mobile View (width of 506px & below) */

    .sta-panel_container {
        position:fixed !important;
    }

    .sta-title.border {
        padding: 1.5em 1.5rem 5em;
    }

    .sta-title h3 {
        font-size: 2.1em;
    }

    .sta-intro::after {
        left: 0;
        bottom: -2% !important;
    }

    .sta-content-container {
        margin: 0 5%;
    }

    .un-sdg input {
        width           : 45% !important;
        height          : 45% !important;
        margin-right    : 0px !important;
        border-radius   : 0px !important;
    }

        .un-sdg input:nth-child(odd) {
            margin-right: 1% !important;
        }

        .un-sdg input:nth-child(n+3) {
            margin-top: 10px !important;
        }

    .sta-content-btn {
        float       : left;
        width       : 50%;
        display     : block;
        text-align  : center;
    }

    .un-sdg {
        padding                 : 0 9px 40px;
        justify-content         : space-evenly; /* None Desktop Display */
        -webkit-justify-content : space-evenly; /* None Desktop Display */
    }
}

@media screen and (max-width: 1120px) { /* If width of the screen is 1120 maximum & below */

    .sta-list-responsive-title {
        display     : inherit;
        visibility  : visible;
        text-align  : center;
        font-family : var(--UNFont);
    }

    .sta-focusarea-list-standard-container, .sta-focusarea-list-standard-container-list, .sta-focusarea-list-nav-container > div {
        width: 100%;
    }

    .sta-focusarea-openNav { /* Show navigation */
    /* Layout */
        left                : 0;        
        z-index             : 2;        
        padding             : 10px;        
        visibility          : visible;
    /* Appearance */
        color               : white;
        background-color    : grey;
    /* Opacity */
        opacity             : 0.3;
        border-radius       : 0px 25px 25px 0px;
    }

    .closebtn {
        visibility: visible;
    }

    .sta-focusarea-list-nav-container { /* Convert side navigation to mobile */
    /* Layout */
        top                 : 0;
        right               : 0;
        width               : 0;
        height              : 100%;
        z-index             : 6;
        position            : fixed;
        overflow-x          : hidden;
        padding-top         : 60px;
    /* Appearance */    
        background-color    : whitesmoke;           
    /* Animation */    
        transition          : 0.5s;
    }

        .sta-focusarea-list-nav-container .closebtn { /* Mobile 'X' button */
            top         : 0;
            left        : 20px;
            position    : absolute;
            font-size   : 40px;
        }

            .sta-focusarea-list-nav-container > div > p {
                color: #777;
            }
}

@media screen and (max-width: 450px) {
    .sta-std {
        width: 100%;
    }

    .sta-stds-benefit {
        margin: 5px 0 0 0;
    }
}

@media screen and (max-width: 1300px) {
    .sta-ss-int-btn {
        top: unset;
    }

    .flowing-obj {
        z-index: -1;
    }
}

@media screen and (max-width: 1451px) { /* Mobile View */
    .sta-panel_container {
        background-color: whitesmoke !important;
    }
}

@media screen and (max-width: 844px) { /* For Mobile View (width of 844px maximum & below) */
    .un-sdg, .un-sdg::after {
        left: unset;
    }   

    .un-sdg {
        padding: 0 0px 40px;
    }

    .un-sdg::after {
        width: 100%;
    }
}
:root {
    --nav-width     : 270px;
    --ssnav-width   : 300px;
    --clr-red       : #A6051A;
    --clr-blue      : #00458B;
    --clr-lgrey     : #D1D1D1;
    --clr-green     : #99E1D9;
    --clr-white     : #FBFBFB;
    --clr-yellow    : #FAED26;
    --clr-purple    : #32293F;
    --clr-dgreen    : #70ABAF;
}

footer {
    padding          : 2rem;
    margin-top       : auto;
    font-family      : 'Montserrat', "Open San";
    flex-direction   : column;
    background-color : var(--clr-white);
}
    footer > div {
        display : flex;
    }

.footer-flex-cont {
    width       : 100%;
    display     : flex;
    align-items : stretch;
}

#footer_abtus_cont {
    width : 20%;
}

/*#footer_ufl_cont {
    margin : 0 2em;
}*/

#footer_contactus_cont {
    width       : 80%;
    position    : relative;
    margin-left : 2em;
}
    #footer_contactus_cont::before {
        content      : '';
        position     : absolute;

        left         : -2em;
        height       : 95%;
        border       : 1px solid #D5D2D1;
        border-width : thin;
    }

    #footer_contactus_cont p {
        font-size   : 14px;
        line-height : 2;
    }

    .abtus-a, .ufl-a, .contactus-a {
        width       : fit-content;
        display     : block;
        font-size   : 14px;
        line-height : 2.5;
    }
        .contactus-a[aria-email="true"] {
            color   : black;
            display : inline-block;
        }

#footer_abtus_cont > ul {
    margin  : 0;
    padding : 0;
}
    #footer_abtus_cont > ul > li, #footer_abtus_cont > ul > li > a {
        color           : black;
        list-style      : none;
        text-decoration : none;
    }

#footer_contus {
    gap     : 1rem;
    display : flex;
}
    #footer_contus > div {
        margin-top : .5em;
    }

.col--footer-left, .col--footer-right {
    width       : 50%;
    align-self  : flex-end;
}

.col--footer-right {
    text-align : right;
}
    .col--footer-right .connect-with-us {
        font-size : 1.7rem;
    }
        .col--footer-right .connect-with-us i {
            margin-right : 20px;
        }

#footer_contus div p, .col--footer-left > p, .col--footer-right .copyright p {
    margin : 0;
}

.a-link {
    color       : var(--clr-blue) !important;
    font-weight : bold;
}
    .a-link.sdo {
        font-size : 12px;
    }

.b-sdo {
    font-size : 14px;
}

.sdo-li {
    margin-left : .5rem;
    line-height : 2;
}

.fb-cc      { color: #3B5998;  } /* Color code for Facebook */
.yt-cc      { color : #FF0000; } /* Color code for Youtube */
.in-cc      { color : #0E76A8; } /* Color code for Linkedin */
.tele-cc    { color : #229ED9; } /* Color code for Telegram */

@media screen and (max-width: 750px) {
    footer {
        padding: 1.5em;
    }
        footer > div {
            flex-direction : column;
        }

    #footer_abtus_cont, #footer_contactus_cont {
        width   : 100%;
        margin  : 0;
    }

    #footer_ufl_cont ,#footer_contactus_cont {
        margin-top : 1em;
    }

    #footer_contus {
        flex-direction : column;
    }
        #footer_contus > div:nth-child(2) {
            margin-left : 0;
        }

    .footer-managed-border {
        border-top : 1px solid black;
        margin-top : 2em;
    }
        .footer-managed-border > div {
            text-align : center;
        }

    .col--footer-right .connect-with-us {
        font-size   : 20px;
        margin-top  : 1rem;
    }

    #footer_ufl_cont {
        margin : 1em 0 0;
    }
}

@media screen and (max-width: 768px) {    
/*    #footer_contus {
        flex-direction : column;
    }*/

        #footer_contus > div:nth-child(2) {
            margin-left : 0;
        }

    .footer-managed-border {
        font-size : 14px;
    }

    .col--footer-left, .col--footer-right {
        width : 100%;
    }

    .col--footer-left {
        margin-top: 1rem;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    #footer_ufl_cont {
        margin          : 0 2em;
        padding-bottom  : 1rem;
    }
}

@media screen and (min-width : 768px) {
    #footer_contus > div {
        width: min(50%, 360px);
    }
}
