* {
    font-family: 'Roboto', sans-serif;
}

body {
    padding: 0px;
    margin: 0px;
    background-image: url(../images/RLPLBG.jpg);
    background-attachment: fixed;
    background-position: bottom;    
}

/* Bootstrap Color Reset Start */

:root {
    --theme-default: #2b5f60;
    --theme-secondary: #c06240;
    --light-bg: #eef1f6;
    --white: #fff;
    --light2: #f5f6f9;
    --body-font-color: #86909c;

    /* Theme Colors */
    --bs-primary: #3d3b75; /* Deep Twilight Indigo */
    --bs-secondary: #6c567b; /* Dusty Amethyst */
    --bs-success: #116957; /* Deep Emerald/Teal */
    --bs-info: #007fa3; /* Vibrant Cosmic Cyan */
    --bs-warning: #d97706; /* Rich Amber/Marigold */
    --bs-danger: #b91c1c; /* Crimson Berry */
    --bs-light: #f8fafc; /* Crisp Off-White */
    --bs-dark: #1e1b4b; /* Space Obsidian */
    /* RGB variants for Bootstrap background-opacity utilities */
    --bs-primary-rgb: 61, 59, 117;
    --bs-secondary-rgb: 108, 86, 123;
    --bs-success-rgb: 17, 105, 87;
    --bs-info-rgb: 0, 127, 163;
    --bs-warning-rgb: 217, 119, 6;
    --bs-danger-rgb: 185, 28, 28;
    --bs-light-rgb: 248, 250, 252;
    --bs-dark-rgb: 30, 27, 75;
    /* Body settings to work beautifully over your image */
    --bs-body-color: #1e1b4b; /* Dark space obsidian for default text readability */
}

/* Optional: Ensure text on buttons remains perfectly readable */
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-dark {
    color: #ffffff !important;
    font-weight: 600; /* Bolder font helps contrast against soft backgrounds */
}

.btn-warning, .btn-info {
    color: #ffffff !important; /* Switched to white text for better contrast on the darkened variants */
    font-weight: 600;
}

/* Optional: Gives your cards or container backgrounds a soft glassmorphism 
   so they float perfectly over the watercolor art without hiding it entirely */
.custom-glass-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
}

/* Bootstrap Color Reset Complete */




h1, h2, h3, h4, h5 {
    font-family: 'Kanit', sans-serif;
}

h1 {
    border-bottom: solid 1px DarkGray;
    font-size: 32pt;
    padding-top: 30px;
    text-align: center;
}

h2 {
    font-size: 20pt;
    border-bottom: solid 1px LightGray;
}

h3 {
    font-size: 16pt;
}

h4 {
    font-size: 14pt;
}

/*h5 {
    font-size: 12pt;
}*/

footer .copy {
    font-size: 11pt;
    color: #5a5a5a;
    letter-spacing: 0.3pt;
}

.tiny, .small {
    font-size: 9pt !important;
}


.topNav {
    font-family: outfit;
    font-size: 14pt;
}

    .topNav a:hover {
        font-weight: bold;
    }

.glassFrame {
    /* Semi-transparent background */
    background: rgba(255, 255, 255, 0.15);
    /* The magic blur effect for elements behind the div */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    /* Subtle white border to simulate light reflection/sheen */
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Rounded corners look best with glass designs */
    border-radius: 16px;
    /* Smooth drop shadow to separate the glass from the background */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

.glassFrame-dark {
    /* Semi-transparent background */
    background: rgba(0, 0, 0, 0.2);
    /* The magic blur effect for elements behind the div */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Safari support */
    /* Subtle white border to simulate light reflection/sheen */
    border: 1px solid rgba(255, 255, 255, 0.25);
    /* Rounded corners look best with glass designs */
    border-radius: 16px;
    /* Smooth drop shadow to separate the glass from the background */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
}

.highlight {
    border-top-color: #e0e0e0 !important;
    border-left-color: #e0e0e0 !important;
    border-right-color: #e0e0e0 !important;
    border-bottom-width: 2px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.fancyText {
    padding-top: 40px;
    padding-left: 40px;
    padding-right: 20px;
    font-size: 50pt;
    font-family: "Special Elite", system-ui;
    opacity: 0.8;
    color: orangered;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.fancySubText {
    font-family: Courgette;
    font-size: 18pt;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.homeImage {
    position: relative;
    top: -40px;
}

@media (max-width: 430px) {
    .fancyText {
        font-size: 20pt;
        padding: 10px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        text-align: center;
    }

    .homeImage{
        position: relative; top: 0px;
    }
}

/* RIBBON */


[class*=ribbon-wrapper] {
    padding: 58px 18px 28px;
    position: relative
}

.ribbon {
    clear: left;
    color: #fff;
    height: 30px;
    left: 0;
    line-height: 30px;
    padding: 0 20px;
    position: absolute;
    top: 12px;
    z-index: 2
}

.ribbon-clip {
    left: -14px
}

    .ribbon-clip:before {
        border-color: #121313 #121313 transparent transparent;
        border-style: solid;
        border-width: 7px;
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        top: 30px;
        width: 0
    }

.ribbon-vertical-left-wrapper {
    padding-left: 40px;
    position: relative
}

.ribbon-vertical-right-wrapper {
    padding-right: 40px
}

.ribbon-wrapper-bottom {
    padding-bottom: 40px;
    padding-top: 0
}

.ribbon-wrapper-right-bottom {
    padding-right: 40px
}

.ribbon-space-bottom {
    top: 0
}

.ribbon-bookmark:before {
    border: 15px solid #121313;
    border-right: 10px solid transparent;
    content: "";
    display: block;
    height: 0;
    left: 100%;
    position: absolute;
    top: 0;
    width: 0
}

.ribbon-right {
    left: auto;
    right: -2px
}

.ribbon-clip-right {
    right: -14px
}

    .ribbon-clip-right:before {
        border-color: #121313 #121313 transparent transparent;
        border-style: solid;
        border-width: 7px;
        content: "";
        height: 0;
        position: absolute;
        right: 0;
        top: 30px;
        width: 0
    }

.ribbon-clip-bottom {
    bottom: 12px;
    left: -14px;
    top: auto
}

    .ribbon-clip-bottom:before {
        border-color: #121313 #121313 transparent transparent;
        border-style: solid;
        border-width: 7px;
        bottom: 30px;
        content: "";
        height: 0;
        left: 0;
        position: absolute;
        width: 0
    }

.ribbon-clip-bottom-right {
    bottom: 12px;
    left: auto;
    right: -14px;
    top: auto
}

    .ribbon-clip-bottom-right:before {
        border-color: #121313 #121313 transparent transparent;
        border-style: solid;
        border-width: 7px;
        bottom: 30px;
        content: "";
        height: 0;
        position: absolute;
        right: 0;
        width: 0
    }

.ribbon-bookmark.ribbon-right:before {
    border-left: 10px solid transparent;
    border-right: 15px solid #121313;
    left: auto;
    right: 100%
}

.ribbon-vertical-left {
    left: 12px
}

.ribbon-vertical-left, .ribbon-vertical-right {
    clear: none;
    height: 70px;
    line-height: 70px;
    padding: 0 5px;
    text-align: center;
    top: -2px;
    width: 30px
}

.ribbon-vertical-right {
    left: auto;
    right: 20px
}

[dir=rtl] .ribbon-vertical-right {
    left: auto !important;
    right: 20px !important
}

.ribbon-bookmark.ribbon-vertical-left:before, .ribbon-bookmark.ribbon-vertical-right:before {
    border-bottom: 10px solid transparent;
    border-right: 15px solid #121313;
    left: 0;
    margin-top: -14px;
    top: 100%
}

.ribbon-primary {
    background: #2b5e5e
}

.ribbon-bookmark.ribbon-primary:before {
    border-color: #2b5e5e transparent #2b5e5e #2b5e5e
}

.ribbon-bookmark.ribbon-right.ribbon-primary:before {
    border-left-color: transparent;
    border-right-color: #2b5e5e
}

.ribbon-bookmark.ribbon-vertical-left.ribbon-primary:before, .ribbon-bookmark.ribbon-vertical-right.ribbon-primary:before {
    border-bottom-color: transparent;
    border-right-color: #2b5e5e
}

.ribbon-primary.ribbon-corner:before {
    border-left-color: #2b5e5e;
    border-top-color: #2b5e5e
}

.ribbon-primary.ribbon-corner.ribbon-right:before {
    border-left-color: transparent;
    border-right-color: #2b5e5e
}

.ribbon-primary.ribbon-corner.ribbon-bottom:before {
    border-bottom-color: #2b5e5e;
    border-top-color: transparent
}

.ribbon-primary.ribbon-clip:before {
    border-color: #1b3b3b #1b3b3b transparent transparent
}

.ribbon-primary.ribbon-clip-right:before {
    border-left-color: #1b3b3b;
    border-right-color: transparent;
    border-top-color: #1b3b3b
}

.ribbon-primary.ribbon-clip-bottom:before {
    border-bottom-color: #1b3b3b;
    border-right-color: #1b3b3b;
    border-top-color: transparent
}

.ribbon-primary.ribbon-clip-bottom-right:before {
    border-color: transparent transparent #1b3b3b #1b3b3b
}

.ribbon-secondary {
    background: #c06240
}

.ribbon-bookmark.ribbon-secondary:before {
    border-color: #c06240 transparent #c06240 #c06240
}

.ribbon-bookmark.ribbon-right.ribbon-secondary:before {
    border-left-color: transparent;
    border-right-color: #c06240
}

.ribbon-bookmark.ribbon-vertical-left.ribbon-secondary:before, .ribbon-bookmark.ribbon-vertical-right.ribbon-secondary:before {
    border-bottom-color: transparent;
    border-right-color: #c06240
}

.ribbon-secondary.ribbon-corner:before {
    border-left-color: #c06240;
    border-top-color: #c06240
}

.ribbon-secondary.ribbon-corner.ribbon-right:before {
    border-left-color: transparent;
    border-right-color: #c06240
}

.ribbon-secondary.ribbon-corner.ribbon-bottom:before {
    border-bottom-color: #c06240;
    border-top-color: transparent
}

.ribbon-secondary.ribbon-clip:before {
    border-color: #9a4e33 #9a4e33 transparent transparent
}

.ribbon-secondary.ribbon-clip-right:before {
    border-left-color: #9a4e33;
    border-right-color: transparent;
    border-top-color: #9a4e33
}

.ribbon-secondary.ribbon-clip-bottom:before {
    border-bottom-color: #9a4e33;
    border-right-color: #9a4e33;
    border-top-color: transparent
}

.ribbon-secondary.ribbon-clip-bottom-right:before {
    border-color: transparent transparent #9a4e33 #9a4e33
}

.ribbon-success {
    background: #28a745
}

.ribbon-bookmark.ribbon-success:before {
    border-color: #28a745 transparent #28a745 #28a745
}

.ribbon-bookmark.ribbon-right.ribbon-success:before {
    border-left-color: transparent;
    border-right-color: #28a745
}

.ribbon-bookmark.ribbon-vertical-left.ribbon-success:before, .ribbon-bookmark.ribbon-vertical-right.ribbon-success:before {
    border-bottom-color: transparent;
    border-right-color: #28a745
}

.ribbon-success.ribbon-corner:before {
    border-left-color: #28a745;
    border-top-color: #28a745
}

.ribbon-success.ribbon-corner.ribbon-right:before {
    border-left-color: transparent;
    border-right-color: #28a745
}

.ribbon-success.ribbon-corner.ribbon-bottom:before {
    border-bottom-color: #28a745;
    border-top-color: transparent
}

.ribbon-success.ribbon-clip:before {
    border-color: #1e7e34 #1e7e34 transparent transparent
}

.ribbon-success.ribbon-clip-right:before {
    border-left-color: #1e7e34;
    border-right-color: transparent;
    border-top-color: #1e7e34
}

.ribbon-success.ribbon-clip-bottom:before {
    border-bottom-color: #1e7e34;
    border-right-color: #1e7e34;
    border-top-color: transparent
}

.ribbon-success.ribbon-clip-bottom-right:before {
    border-color: transparent transparent #1e7e34 #1e7e34
}

.ribbon-danger {
    background: #dc3545
}

.ribbon-bookmark.ribbon-danger:before {
    border-color: #dc3545 transparent #dc3545 #dc3545
}

.ribbon-bookmark.ribbon-right.ribbon-danger:before {
    border-left-color: transparent;
    border-right-color: #dc3545
}

.ribbon-bookmark.ribbon-vertical-left.ribbon-danger:before, .ribbon-bookmark.ribbon-vertical-right.ribbon-danger:before {
    border-bottom-color: transparent;
    border-right-color: #dc3545
}

.ribbon-danger.ribbon-corner:before {
    border-left-color: #dc3545;
    border-top-color: #dc3545
}

.ribbon-danger.ribbon-corner.ribbon-right:before {
    border-left-color: transparent;
    border-right-color: #dc3545
}

.ribbon-danger.ribbon-corner.ribbon-bottom:before {
    border-bottom-color: #dc3545;
    border-top-color: transparent
}

.ribbon-danger.ribbon-clip:before {
    border-color: #bd2130 #bd2130 transparent transparent
}

.ribbon-danger.ribbon-clip-right:before {
    border-left-color: #bd2130;
    border-right-color: transparent;
    border-top-color: #bd2130
}

.ribbon-danger.ribbon-clip-bottom:before {
    border-bottom-color: #bd2130;
    border-right-color: #bd2130;
    border-top-color: transparent
}

.ribbon-danger.ribbon-clip-bottom-right:before {
    border-color: transparent transparent #bd2130 #bd2130
}

.ribbon-info {
    background: #17a2b8
}

.ribbon-bookmark.ribbon-info:before {
    border-color: #17a2b8 transparent #17a2b8 #17a2b8
}

.ribbon-bookmark.ribbon-right.ribbon-info:before {
    border-left-color: transparent;
    border-right-color: #17a2b8
}

.ribbon-bookmark.ribbon-vertical-left.ribbon-info:before, .ribbon-bookmark.ribbon-vertical-right.ribbon-info:before {
    border-bottom-color: transparent;
    border-right-color: #17a2b8
}

.ribbon-info.ribbon-corner:before {
    border-left-color: #17a2b8;
    border-top-color: #17a2b8
}

.ribbon-info.ribbon-corner.ribbon-right:before {
    border-left-color: transparent;
    border-right-color: #17a2b8
}

.ribbon-info.ribbon-corner.ribbon-bottom:before {
    border-bottom-color: #17a2b8;
    border-top-color: transparent
}

.ribbon-info.ribbon-clip:before {
    border-color: #117a8b #117a8b transparent transparent
}

.ribbon-info.ribbon-clip-right:before {
    border-left-color: #117a8b;
    border-right-color: transparent;
    border-top-color: #117a8b
}

.ribbon-info.ribbon-clip-bottom:before {
    border-bottom-color: #117a8b;
    border-right-color: #117a8b;
    border-top-color: transparent
}

.ribbon-info.ribbon-clip-bottom-right:before {
    border-color: transparent transparent #117a8b #117a8b
}

.ribbon-light {
    background: #f5f5f5
}

.ribbon-bookmark.ribbon-light:before {
    border-color: #f5f5f5 transparent #f5f5f5 #f5f5f5
}

.ribbon-bookmark.ribbon-right.ribbon-light:before {
    border-left-color: transparent;
    border-right-color: #f5f5f5
}

.ribbon-bookmark.ribbon-vertical-left.ribbon-light:before, .ribbon-bookmark.ribbon-vertical-right.ribbon-light:before {
    border-bottom-color: transparent;
    border-right-color: #f5f5f5
}

.ribbon-light.ribbon-corner:before {
    border-left-color: #f5f5f5;
    border-top-color: #f5f5f5
}

.ribbon-light.ribbon-corner.ribbon-right:before {
    border-left-color: transparent;
    border-right-color: #f5f5f5
}

.ribbon-light.ribbon-corner.ribbon-bottom:before {
    border-bottom-color: #f5f5f5;
    border-top-color: transparent
}

.ribbon-light.ribbon-clip:before {
    border-color: #dcdcdc #dcdcdc transparent transparent
}

.ribbon-light.ribbon-clip-right:before {
    border-left-color: #dcdcdc;
    border-right-color: transparent;
    border-top-color: #dcdcdc
}

.ribbon-light.ribbon-clip-bottom:before {
    border-bottom-color: #dcdcdc;
    border-right-color: #dcdcdc;
    border-top-color: transparent
}

.ribbon-light.ribbon-clip-bottom-right:before {
    border-color: transparent transparent #dcdcdc #dcdcdc
}

.ribbon-dark {
    background: #121313
}

.ribbon-bookmark.ribbon-dark:before {
    border-color: #121313 transparent #121313 #121313
}

.ribbon-bookmark.ribbon-right.ribbon-dark:before {
    border-left-color: transparent;
    border-right-color: #121313
}

.ribbon-bookmark.ribbon-vertical-left.ribbon-dark:before, .ribbon-bookmark.ribbon-vertical-right.ribbon-dark:before {
    border-bottom-color: transparent;
    border-right-color: #121313
}

.ribbon-dark.ribbon-corner:before {
    border-left-color: #121313;
    border-top-color: #121313
}

.ribbon-dark.ribbon-corner.ribbon-right:before {
    border-left-color: transparent;
    border-right-color: #121313
}

.ribbon-dark.ribbon-corner.ribbon-bottom:before {
    border-bottom-color: #121313;
    border-top-color: transparent
}

.ribbon-dark.ribbon-clip:before {
    border-color: #000 #000 transparent transparent
}

.ribbon-dark.ribbon-clip-right:before {
    border-left-color: #000;
    border-right-color: transparent;
    border-top-color: #000
}

.ribbon-dark.ribbon-clip-bottom:before {
    border-bottom-color: #000;
    border-right-color: #000;
    border-top-color: transparent
}

.ribbon-dark.ribbon-clip-bottom-right:before {
    border-color: transparent transparent #000 #000
}

.ribbon-warning {
    background: #eeb407
}

.ribbon-bookmark.ribbon-warning:before {
    border-color: #eeb407 transparent #eeb407 #eeb407
}

.ribbon-bookmark.ribbon-right.ribbon-warning:before {
    border-left-color: transparent;
    border-right-color: #eeb407
}

.ribbon-bookmark.ribbon-vertical-left.ribbon-warning:before, .ribbon-bookmark.ribbon-vertical-right.ribbon-warning:before {
    border-bottom-color: transparent;
    border-right-color: #eeb407
}

.ribbon-warning.ribbon-corner:before {
    border-left-color: #eeb407;
    border-top-color: #eeb407
}

.ribbon-warning.ribbon-corner.ribbon-right:before {
    border-left-color: transparent;
    border-right-color: #eeb407
}

.ribbon-warning.ribbon-corner.ribbon-bottom:before {
    border-bottom-color: #eeb407;
    border-top-color: transparent
}

.ribbon-warning.ribbon-clip:before {
    border-color: #bc8f06 #bc8f06 transparent transparent
}

.ribbon-warning.ribbon-clip-right:before {
    border-left-color: #bc8f06;
    border-right-color: transparent;
    border-top-color: #bc8f06
}

.ribbon-warning.ribbon-clip-bottom:before {
    border-bottom-color: #bc8f06;
    border-right-color: #bc8f06;
    border-top-color: transparent
}

.ribbon-warning.ribbon-clip-bottom-right:before {
    border-color: transparent transparent #bc8f06 #bc8f06
}


.card-header-right-icon .btn.badge-light-primary:hover {
    color: var(--white)
}

.card {
    background-color: #fff;
    border: 1px solid #ecf3fa;
    border-radius: 10px;
    letter-spacing: .5px;
    margin-bottom: 30px
}

    .card, .card:hover {
        transition: all .3s ease
    }

        .card:hover {
            box-shadow: 0 0 40px rgba(8,21,66,.05)
        }

        .card .card-header {
            background-color: #fff;
            border-bottom: none;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            padding: 18px;
            position: relative
        }

            .card .card-header.card-no-border {
                border-bottom: none !important
            }

            .card .card-header h5:not(.m-0), .card .card-header h5:not(.mb-0) {
                margin-bottom: 0;
                text-transform: capitalize
            }

            .card .card-header h4 {
                display: -webkit-box !important;
                overflow: hidden;
                text-overflow: ellipsis;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                white-space: normal
            }

            .card .card-header p {
                color: #848789
            }

            .card .card-header > span {
                color: #848789;
                display: block;
                font-size: 12px;
                letter-spacing: 1px;
                margin-top: 5px
            }

            .card .card-header .card-header-right {
                background-color: var(--white) !important;
                border-radius: 25px;
                display: inline-block;
                float: right;
                padding: 6px 0;
                position: absolute;
                right: 12px;
                top: 12px;
                z-index: 1
            }

                .card .card-header .card-header-right .card-option {
                    height: 20px;
                    overflow: hidden;
                    text-align: center;
                    transition: .3s ease-in-out;
                    width: 35px
                }

                    .card .card-header .card-header-right .card-option li {
                        display: inline-block
                    }

                        .card .card-header .card-header-right .card-option li:first-child svg {
                            height: 18px;
                            width: 18px
                        }

                        .card .card-header .card-header-right .card-option li i {
                            vertical-align: 4px
                        }

                .card .card-header .card-header-right i {
                    color: #121313;
                    cursor: pointer;
                    line-height: 20px;
                    margin: 0 5px
                }

                    .card .card-header .card-header-right i.icofont-refresh {
                        font-size: 13px
                    }

        .card .card-body {
            background-color: #fff;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            padding: 18px
        }

            .card .card-body p:last-child {
                margin-bottom: 0
            }

        .card .sub-title {
            font-size: calc(14.4px + .1875vw);
            padding-bottom: 12px
        }

        .card .card-footer {
            background-color: #fff;
            border-bottom-left-radius: 10px;
            border-bottom-right-radius: 10px;
            border-top: 1px solid #ecf3fa;
            padding: 18px
        }

        .card.card-load .card-loader {
            align-items: center;
            background-color: hsla(0,0%,100%,.7);
            display: flex;
            height: 100%;
            justify-content: center;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
            z-index: 8
        }

            .card.card-load .card-loader i {
                color: var(--theme-default);
                font-size: 20px;
                margin: 0 auto
            }

        .card.full-card {
            border: 1px solid #eaeaea;
            border-radius: 0;
            box-shadow: none;
            height: 100vh;
            position: fixed;
            right: 0;
            top: 0;
            width: calc(100vw - 12px);
            z-index: 99999
        }

            .card.full-card .card-body {
                overflow: auto
            }

.page-body-wrapper .card .sub-title {
    color: #1f2f3e;
    font-family: Nunito Sans,sans-serif;
    font-weight: 400
}

.card-absolute {
    margin-top: 20px
}

    .card-absolute .card-header {
        border-radius: .25rem;
        left: 15px;
        padding: 10px 15px;
        position: absolute;
        top: -20px
    }

        .card-absolute .card-header h5 {
            font-size: 17px
        }

    .card-absolute .card-body {
        margin-top: 10px
    }

.card-header .border-tab {
    margin-bottom: -13px
}

.custom-card {
    overflow: hidden;
    padding: 30px
}

    .custom-card .card-header {
        padding: 0
    }

        .custom-card .card-header img {
            border-radius: 50%;
            margin-top: -100px;
            transform: scale(1.5)
        }

    .custom-card .card-profile {
        text-align: center
    }

        .custom-card .card-profile img {
            background-color: #fff;
            height: 110px;
            padding: 7px;
            position: relative;
            z-index: 1
        }

    .custom-card .card-social {
        text-align: center
    }

        .custom-card .card-social li {
            display: inline-block;
            padding: 15px 0
        }

            .custom-card .card-social li:last-child a {
                margin-right: 0
            }

            .custom-card .card-social li a {
                color: #bcc6de;
                font-size: 16px;
                margin-right: 15px;
                padding: 0;
                transition: all .3s ease
            }

                .custom-card .card-social li a:hover {
                    color: var(--theme-default);
                    transition: all .3s ease
                }

    .custom-card .profile-details h6 {
        color: #848789;
        font-size: 14px;
        margin-bottom: 30px;
        margin-top: 10px
    }

    .custom-card .card-footer {
        padding: 0
    }

        .custom-card .card-footer > div {
            padding: 15px;
            text-align: center
        }

            .custom-card .card-footer > div + div {
                border-left: 1px solid #eaeaea
            }

            .custom-card .card-footer > div h3 {
                font-size: 24px;
                margin-bottom: 0
            }

            .custom-card .card-footer > div h6 {
                color: #848789;
                font-size: 14px
            }

            .custom-card .card-footer > div h5 {
                font-size: 16px;
                margin-bottom: 0
            }

            .custom-card .card-footer > div i {
                display: inline-block;
                font-size: 24px;
                margin-bottom: 15px
            }

            .custom-card .card-footer > div .m-b-card {
                margin-bottom: 10px
            }

.social-profile {
    background-repeat: no-repeat;
    background-size: cover;
    background: rgba(43,94,94,.1);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    text-align: center
}

    .social-profile .card-body {
        background: rgba(43,94,94,.1);
        border-radius: 10px;
        padding-left: 20px;
        padding-right: 20px
    }

@media (max-width:1399px) {
    .social-profile .card-body {
        padding: 23px 15px
    }
}

.social-details {
    margin-top: 15px
}

    .social-details h5 a {
        color: var(--body-font-color)
    }

    .social-details .social-follow {
        -moz-column-count: 3;
        column-count: 3;
        -moz-column-gap: 30px;
        column-gap: 30px;
        margin-top: 25px
    }

@media (max-width:1399px) {
    .social-details .social-follow {
        -moz-column-gap: 23px;
        column-gap: 23px
    }
}

.social-details .social-follow li {
    position: relative
}

    .social-details .social-follow li + li:before {
        background-color: var(--recent-dashed-border);
        content: "";
        height: 14px;
        left: -15px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1px
    }

[dir=rtl] .social-details .social-follow li + li:before {
    left: unset;
    right: -15px
}

.social-details .card-social {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px
}

.social-img-wrap {
    background: linear-gradient(253deg,var(--theme-default) 11.51%,rgba(115,102,255,0) 82.07%);
    border-radius: 100%;
    display: inline-block;
    padding: 2px;
    position: relative
}

    .social-img-wrap .edit-icon {
        bottom: 0;
        position: absolute;
        right: 0
    }

        .social-img-wrap .edit-icon svg {
            background: var(--white);
            border: 2px solid var(--white);
            border-radius: 100%;
            height: 20px;
            width: 20px
        }

.social-img {
    background: var(--white);
    border-radius: 100%;
    padding: 5px
}

    .social-img img {
        border-radius: 100%;
        height: 68px
    }



/* LANDING PAGE FRAMWORKS */


.landing-page .framework-section .frameworks-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(22px + .9375vw);
    justify-content: center;
    text-align: center
}

@media (max-width:1399px) {
    .landing-page .framework-section .frameworks-list {
        gap: 20px
    }
}

.landing-page .framework-section .frameworks-list li {
    align-items: center;
    background: #2e323d;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    gap: 14px;
    min-width: 222px;
    padding: 12px;
    position: relative;
    width: -moz-fit-content;
    width: fit-content
}

    .landing-page .framework-section .frameworks-list li h5 {
        color: #fff
    }

@media (max-width:1399px) {
    .landing-page .framework-section .frameworks-list li {
        min-width: 200px
    }
}

.landing-page .framework-section .frameworks-list li:hover {
    background: linear-gradient(260deg,#0eabab -.05%,#009db5 96%)
}

.landing-page .framework-section .frameworks-list li div {
    align-items: center;
    border-radius: 6px;
    display: flex;
    height: calc(34px + 1.875vw);
    justify-content: center;
    width: calc(34px + 1.875vw)
}

    .landing-page .framework-section .frameworks-list li div img {
        height: calc(14.4px + 1.75vw);
        width: calc(14.4px + 1.75vw)
    }

.landing-page .framework-section .frameworks-list li img {
    transition: all .4s ease
}

    .landing-page .framework-section .frameworks-list li img.img-68 {
        width: 68px
    }

.landing-page .framework-section .frameworks-list li:hover > div img {
    animation: bounceIn 2s linear infinite;
    transition: all .4s ease
}

.landing-page .framework {
    /*background-color: rgba(43,94,94,.06);*/
    background-size: cover;
    height: auto;
    overflow: hidden;
    scroll-behavior: smooth
}

    .landing-page .framework ul.framworks-list {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        justify-content: center;
        margin-bottom: 1px;
        text-align: center
    }

        .landing-page .framework ul.framworks-list li {
            align-items: center;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 1.9217px 1.53736px 0 rgba(43,94,94,.03),0 4.6181px 3.69448px 0 rgba(43,94,94,.05),0 8.69547px 6.95638px 0 rgba(43,94,94,.06),0 10px 10px 0 rgba(43,94,94,.04);
            display: inline-block;
            display: flex;
            gap: 20px;
            gap: 10px;
            min-width: 222px;
            padding: 12px 30px 12px 12px;
            position: relative;
            width: -moz-fit-content;
            width: fit-content
        }

            .landing-page .framework ul.framworks-list li div {
                align-items: center;
                background-color: rgba(43,94,94,.1);
                border-radius: 6px;
                display: flex;
                height: 58px;
                justify-content: center;
                width: 58px
            }

            .landing-page .framework ul.framworks-list li:last-child, .landing-page .framework ul.framworks-list li:nth-child(13) {
                margin-bottom: 0
            }

            .landing-page .framework ul.framworks-list li img {
                height: 32px;
                transition: all .3s ease
            }

                .landing-page .framework ul.framworks-list li img.img-68 {
                    width: 68px
                }

            .landing-page .framework ul.framworks-list li h5 {
                margin-bottom: unset
            }

            .landing-page .framework ul.framworks-list li:hover {
                background-color: #fff
            }

                .landing-page .framework ul.framworks-list li:hover:before {
                    border-radius: 10px;
                    content: "";
                    height: 100%;
                    left: 0;
                    position: absolute;
                    top: 0;
                    width: 100%
                }

                .landing-page .framework ul.framworks-list li:hover img {
                    animation: swing 2s ease infinite;
                    transform: scale(.7)
                }

    .landing-page .framework .wavy-gif {
        left: 100%;
        top: 23%
    }

        .landing-page .framework .wavy-gif svg {
            transform: rotate(90deg);
            width: 80px
        }

@media (max-width:1199px) {
    .landing-page .framework .wavy-gif svg {
        width: 60px
    }
}

@media (max-width:575px) {
    .landing-page .framework .wavy-gif svg {
        width: 30px
    }
}

.landing-page .framework .wavy-gif path {
    stroke: #eeb407;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: dash 1.5s linear infinite
}

@keyframes dash {
    to {
        stroke-dashoffset: 0
    }
}

@media (max-width:1399px) {
    .landing-page .framework .wavy-gif {
        right: 3%;
        top: 15%
    }
}

@media (max-width:991px) {
    .landing-page .framework .wavy-gif {
        right: 1%;
        top: 10%
    }
}

@media (max-width:767px) {
    .landing-page .framework .wavy-gif {
        top: 8%
    }
}