@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&display=swap');
@import url("/static/css/enscygen-icons.css");
@import url("/static/css/bootstrap-icons.css");


:root {
    --agicle-blue: #002753;
    --agicle-modern: #0135AD;
    --agicle-dark: #111A23;
    --enscy-bg: #000000e8;
    --enscy-dark: #101a2c;
    --agicle-green: #00a555;
    --agicle-green-dark: #118e26;
    --bg-green: #ebfaf5;
    --cr-green: #38c17d;
    --bg-yellow: #fff6e5;
    --cr-yellow: #eda43e;
    --bg-red: #fce8e7;
    --cr-red: #f85f4f;
    --azt-purple: #673ab7;
    --azt-red: #e30030;
    --para-normal: 0.9rem;
    --para-color: #222;
    --word-grey: #4d5055;
    --word-blue: #4b587b;
    --para-title: 1.1rem bold;
    --agicle-sky: #0867d8;
    --ricinics-sky: #0867d8;
    --enscygen-sky: #0867d8;
    --agicle-light: #f7f9fb;
    --word-faded: #6d7784;
    --agicle-shadow: rgba(152, 152, 166, 0.2) 0px 7px 29px 0px;
    --agicle-shadow2: 0 15px 20px 0 rgb(0 10 70 / 10%);
    --agicle-font-main: "Red Hat Display", "Poppins", Lato;
    --agicle-font: 'Red Hat Display', Lato, Arial;
    --agicle-background: #cbcbcb;
    --ricinics-bg: #f5f6f7;
    --agicle-bg: #f5f6f7;
    --agicle-box: 0 2px 4px rgba(0, 0, 0, .05);
    --ricinics-box: 0 2px 4px rgba(0, 0, 0, .05);
    --enscygen-box: 0 2px 4px rgba(0, 0, 0, .05);
    --agicle-font-main: "Red Hat Display";
    --agicle-nav-dark: #000;
    --accent-light: #76b600ff;
    --accent-grey: #202020;
    --accent-light-dim: rgb(132, 174, 54);
    --light-accent: #76b600ff;
    --accent-dark: #07acff;
    --accent-monochrome: #12172c;
    --accent-default: #0098ea;
    --accent-hover-light: #00a6ff;
    --accent-hover-dark: #2db9ff;
    --background-page-light: #fff;
    --background-page-dark: #12172c;
    --background-page-hover-light: #f7f9fb;
    --background-page-hover-dark: #1e2337;
    --background-content-light: #f7f9fb;
    --background-content-dark: #1e2337;
    --background-content-page-dark: #12172c;
    --background-content-hover-light: #f0f4f8;
    --background-content-hover-dark: #292e41;
    --text-primary-light: #04060b;
    --text-primary-dark: #fff;
    --text-secondary-light: #191f2f;
    --text-secondary-dark: #e0e0e3;
    --text-tertiary-light: #728a96;
    --text-tertiary-dark: #c0c1c7;
    --text-tertiary: #728a96;
    --icon-primary-light: #232328;
    --icon-primary-dark: #fff;
    --icon-secondary-light: #98b2bf;
    --icon-secondary-dark: #c0c1c7;
    --icon-tertiary-light: #c0d1d9;
    --icon-tertiary-dark: hsla(0, 0%, 100%, .07);
    --button-primary-light: var(--accent-light);
    --button-primary-dark: var(--accent-darkt);
    --button-primary-text-light: var(--accent-light);
    --button-primary-text-dark: var(--accent-dark);
    --button-secondary-stroke-light: #e9eef1;
    --button-secondary-stroke-dark: #2a2e41;
    --segment-background-light: #f2f5f8;
    --segment-background-dark: #1e2337;
    --segment-active-light: #fff;
    --segment-active-dark: #1e2337;
    --segment-active-content-dark: #fff;
    --card-border-light: #dde3e6;
    --card-border-dark: #2a2e41;
    --card-border-default: #2a2e41;
    --separator-alpha-light: #dfe5e8;
    --separator-alpha-dark: #2c3043;
    --gradient-text: linear-gradient(68deg, #2b82eb 0.63%, #1ac8ff 90%);
    --gradient-text-mobile: linear-gradient(68deg, #2b82eb 0.63%, #1ac8ff 50%);
    --gradient-purple: linear-gradient(182.79deg, #9a98f2 -28.73%, #8ac0ff 133.77%);
    --gradient-green: linear-gradient(186.6deg, #7baeff -13.27%, #c1edd1 128.74%);
    --gradient-light-blue: linear-gradient(88.93deg, #2b83ec 18.91%, #1ac9ff 79.91%);
    --gradient-splash: linear-gradient(to top left, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, .72) 50%, hsla(0, 0%, 100%, 0) 57%, hsla(0, 0%, 100%, 0));
    --gradient-light-loading: linear-gradient(90deg, #e5ebf2 0.04%, #f1f6fb 50.98%, #e5ebf2 99.96%);
    --gradient-dark-loading: linear-gradient(90deg, #2c3452, #1e2337 50.93%, #2c3452 98.44%);
    --basic-white: #fff;
    --basic-white-overlay: hsla(0, 0%, 100%, .7);
    --basic-white-overlay-86: hsla(0, 0%, 100%, .86);
    --basic-white-overlay-50: hsla(0, 0%, 100%, .5);
    --basic-black: #000;
    --basic-overlay-24: rgba(0, 0, 0, .24);
    --basic-overlay-48: rgba(0, 0, 0, .7);
    --basic-dark-overlay-86: rgba(18, 23, 44, .92);
    --light-shimmer-card: linear-gradient(90deg, #f5f7fa 0.04%, #fafdff 50.98%, #f5f7fa 99.96%);
    --dark-shimmer-card: linear-gradient(90deg, #1e2337 0.18%, #2c3452 50.45%, #1e2337 99.87%);
    --feedback-error-light: red;
    --feedback-error-dark: #ff3347;
    --feedback-success-light: #27aa00;
    --feedback-success-dark: #4bb34b;
    --header-item-hover: rgba(118, 152, 187, .06);
    --card-hover-box-shadow: 0px 2px 24px rgba(114, 138, 150, .12);
    --card-box-shadow: 0px 4px 24px rgba(0, 0, 0, .08);
    --ligth-green: rgba(255, 92, 92, .08);
    --ligth-red: rgba(71, 197, 138, .1);
    --dark-selection: rgba(1, 164, 245, .1);
    --light-selection: rgba(0, 136, 204, .1);
    --basic-white-hover: #f1f4f7;
    --float-shadow-color: #00000014;
    --ens-box: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    --svg-fill: #0135AD;
}

body,
body[data-theme=light] {
    --background_light_gradient: linear-gradient(180deg, #f7f9fb, rgba(238, 242, 245, .8) 116.16%);
    --background_blue_gradient_horizontal: linear-gradient(90.41deg, #458cfe -0.8%, #7dd8fd 126.74%);
    --background_blue_gradient_vertical: linear-gradient(157.03deg, #458cfe 9.51%, #7dd8fd 93.49%);
    --background_dark_gradient: linear-gradient(0deg, #232328, #343437 101.47%);
    --background_button_loading_light: linear-gradient(89.96deg, hsla(0, 0%, 100%, .1) 0.04%, hsla(0, 0%, 100%, .32) 50.98%, hsla(0, 0%, 100%, .1) 99.96%);
    --background_white_shadow_light: linear-gradient(0, var(--background-content-light) 30%, rgba(247, 249, 251, 0) 100%);
    --button_light_secondary_pressed: #f4f7fa;
    --button_dark_secondary: hsla(0, 0%, 100%, .06);
    --button_dark_secondary_hover: hsla(0, 0%, 100%, .12);
    --button_dark_secondary_pressed: hsla(0, 0%, 100%, .03);
    --button_dark_secondary_text_hover: #5bc8ff;
    --button_dark_secondary_text_pressed: #0186c9;
    --button_light_primary_small: rgba(0, 136, 204, .06);
    --button_light_primary_small_hover: rgba(0, 136, 204, .3);
    --button_light_primary_small_pressed: rgba(0, 136, 204, .03);
    --text_dark_secondary: hsla(0, 0%, 100%, .7);
    --text_dark_gradient: linear-gradient(89.92deg, #06a1ef 28.51%, #69cdff 85.79%);
    --icon_light_secondary: rgba(236, 240, 243, .8);
    --icon_dark_primary: #02a8fb;
    --light_border: rgba(114, 138, 150, .24);
    --gradientColor: linear-gradient(88.93deg, #76b600 18.91%, #ffffff 79.91%);

}

.para-agicle>p {
    font-size: 0.9rem;
}

.navbar-toggler-icon {
    width: 1.1em !important;
    height: 1.1em !important;
}

body {
    padding-top: 50px;
}

@media only screen and (min-width: 960px) {
    body {
        padding-top: 50px;
    }
}

html * {
    font-family: 'Inter', Arial;
    font-weight: 400;

}

.agicle-title-head {
    background-image: linear-gradient(to right, #002753, #004FA3);
    padding: 10px;
}

.agicle-title-header {
    font-size: 15px;
    color: #fff;
    text-align: center;
    font-family: "Red Hat Display";
    font-weight: 800;
    margin-bottom: 1px;
}

.background-video-transparent {
    background-color: transparent !important;
}

p.dropdown-item.load-link {
    display: flex;
    align-items: center;
    margin-bottom: 5px !important;
}

img.menu-image {
    width: 25px;
    margin-right: 10px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-right: 22px !important;
    padding-left: 22px !important;

}

.main-page-body {
    margin-top: 2px;
}

a {
    text-decoration: none !important;
}

.para-n {
    color: var(--para-color) !important;
    font-size: 16px !important;
    line-height: 1.7rem;
}

.para-m {
    color: #222 !important;
    font-size: 1rem !important;
}

.main-page-box-small {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0px 20px;
}

.ric-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #222;
    font-family: "Red Hat Display", Lato, sans-serif;
    margin: 20px 0px 20px 0px
}

.ric-title-prefix {
    font-size: 1.6rem;
    font-weight: normal;
    color: var(--agicle-blue);
    font-family: "Red Hat Display", Lato, sans-serif;
    margin: 20px 0px 15px 0px;
}

.ric-title-white {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    font-family: "Red Hat Display", Lato, sans-serif;
    margin-bottom: 0px;
}

.title-background {
    background-color: var(--accent-light);
    padding: 30px 0px;
    background-size: cover;
    margin-bottom: 30px;
    padding-bottom: 0px;
}

.page-title-holder {
    background-color: var(--enscy-bg);
    padding: 30px;
}

.title-background-edu {
    background-image: url("/assets/images/education.jpg");
    background-color: #002753;
    padding: 30px 0px;
    background-size: cover;
    margin-bottom: 30px;

}

.container.container-for-title {
    padding-right: 0px !important;
    margin-right: 0px !important;
}

.page-category-small {
    color: #fcfcfc;
    margin: 0px;
    font-size: 0.85rem;
    font-family: "Red Hat Display";
}



.ric-small {
    font-size: 0.9rem;
}

.ric-black {
    color: #222;
}

.agicle-grid {
    display: grid;
    align-content: space-evenly;
    grid-template-columns: auto auto;
    grid-gap: 10px;
    grid-row-gap: 20px;

    margin: 10px 15px 20px 15px;
}

.agicle-grid>div {

    border-radius: 5px;
    padding: 20px 0px;
    line-height: 130%;


}

@media only screen and (max-width: 960px) {
    .agicle-grid {
        display: flex;
        flex-direction: column-reverse;
        display: grid;
        align-content: space-evenly;
        grid-template-columns: auto;
        grid-gap: 2px;
        grid-row-gap: 20px;
        margin: 10px 5px 50px 5px;
        text-align: center;

    }
}

.ric-mw-sm {
    max-width: 500px;
}

.ric-button {
    padding: 10px 18px;
    border-radius: 4px;
    color: #fff !important;
    background-color: #00a555;
    font-size: 0.9rem;
}

.ric-button-secondary {
    padding: 10px 18px;
    color: #0867db !important;
    font-size: 0.9rem;
}

.ric-button-secondary:after {
    content: "";
}

.ric-button:hover {
    color: #fff;
    background-color: #002753;
}

.ric-button:visited {
    color: #fff !important;
}

.ric-rbp {
    padding-bottom: 0px !important;
}

.holderfortext {
    display: flex;
    align-items: center;
}

/*all accordions for pages*/



/*Alert Boxes*/

.alert-warning {
    font-size: 0.84rem;
}

.alert-dismissible .btn-close {
    font-size: 0.7rem;
}

/*Extra Page Datas*/
.extra-page-data {
    font-size: 0.7rem;
    color: #444444;
    margin: 40px 0px 20px 0px;

}

/*ACCORDION BOX STYLING*/

.accordion-button:not(.collapsed) {
    background-color: none !important;
    --bs-accordion-active-bg: none !important;
    font-weight: 600;
    color: #000 !important;
    transition: 0.1s ease !important;
}

.accordion {
    --bs-accordion-transition: 0.1s ease;
}

.accordion-button:focus {
    --bs-accordion-btn-focus-border-color: none !important;
    --bs-accordion-btn-focus-box-shadow: none !important;

}

.title-prefix {
    font-size: 0.8rem;
    text-transform: uppercase;
    font-family: "Red Hat Display";
}

.t-o-c {
    margin-bottom: 20px;
}

.toc-body {
    border: 1px solid #efefef !important;
    padding: 20px;
    border-radius: 4px !important;
}

.in-this-page {
    border: 1px solid #efefef;
    border-radius: 3px;
    padding: 7px 5px;
    width: 100%;
    background-color: #fff;
    text-align: left;
    font-size: 0.85rem;
    margin-bottom: 5px;
    color: var(--word-grey) !important;

}

.toc-link {
    color: var(--word-grey);
    font-size: 0.85rem;

}

.toc-ss {
    margin-left: 20px !important;
}

.agicle-direct {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(agicle-sky) !important;
    font-family: "Red Hat Display";


}

.agicle-direct:after {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    margin-left: 5px;
    font-size: 0.8rem;

}

.agicle-direct:hover {
    color: var(--agicle-green);
    transition: 0.3s ease-in-out;
}

.agicle-direct:hover .agicle-direct:after {
    margin-left: 10px;
}

.dr-white {
    font-size: 0.9rem;
    font-weight: bold;
    color: white !important;
    font-family: "Red Hat Display";
    text-align: center;
}

.dr-white:after {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    margin-left: 5px;
    font-size: 0.8rem;

}

.agicle-direct:visited {
    color: var(agicle-sky) !important;
}

.dr-white:visited {
    color: #fff;
    ;
}

/*SUCCESS BOX*/

.success1 {
    text-align: center;
    width: 15%px;
    padding: 7px 3px 7px 3px;
    font-size: 13px;
    color: white;
    border-radius: 20px;
    background-image: linear-gradient(to right, #0066ff, #4084eb);
    width: 200px;
    margin: 0 auto;
}

.success2 {

    font-size: 1.6rem;
    color: #002753;
    font-family: "Red Hat Display";
    text-align: center;
    line-height: 1.25em;
}

.success12 {
    text-align: center;

}

.success3 {

    font-size: 0.9rem;
    color: black;
    font-weight: normal;
    text-align: center;
}

.successmain {

    font-size: 90px;
    color: #0066ff;
    font-weight: bold;
    text-align: center;
}

#checkicon {
    animation: pulse 2s infinite;
    border-radius: 100px;
    font-size: 3.5rem;
    margin-bottom: 15px;
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(76, 175, 79, 0.9);
    }

    70% {
        -webkit-box-shadow: 0 0 0 10px rgba(76, 175, 79, 0);
    }

    100% {
        -webkit-box-shadow: 0 0 0 0 rgba(76, 175, 79, 0);
    }
}

@keyframes pulse {
    0% {
        -moz-box-shadow: 0 0 0 0 rgba(76, 175, 79, 0.9);
        box-shadow: 0 0 0 0 rgba(76, 175, 79, 0.4);
    }

    70% {
        -moz-box-shadow: 0 0 0 10px rgba(76, 175, 79, 0);
        box-shadow: 0 0 0 10px rgba(76, 175, 79, 0);
    }

    100% {
        -moz-box-shadow: 0 0 0 0 rgba(76, 175, 79, 0);
        box-shadow: 0 0 0 0 rgba(76, 175, 79, 0);
    }
}

.successbox {
    margin: 5px 10px 5px 10px;
    text-align: center;

}

.agicle-button {
    background-color: #002753;
    color: #fff;
    padding: 8px 15px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: bold;
    margin: 10px auto;
    max-width: 200px;
    text-align: center;
    display: block;
    border: none;
}

.agicle-button:hover {
    color: #fff;
    background-color: #003a7d;
}

.request-button {
    font-size: 0.9rem;
    font-weight: bold;
    color: white !important;
    font-family: "Red Hat Display";
    text-align: center;
    border: 1px solid #fff;
    border-radius: 30px;
    padding: 5px 10px;
    margin: 10px;
}

.request-button:after {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    margin-left: 5px;
    font-size: 0.8rem;

}

.request-button:visited {
    color: var(agicle-sky) !important;
}

.request-button:hover {
    background-color: #ffffff1c;
}

.extended-view {
    min-height: 210px;
}

.agicle-link {
    background: var(--accent-light);
    color: #fff;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 0.9rem;
    font-family: "Red Hat Display";
    font-weight: 600;
    transition: 0.3s ease-in;
    display: inline-block;
}

.ric-link {
    background-color: #000;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 0.9rem;
    font-family: "Red Hat Display";
    font-weight: 600;
    transition: 0.3s ease-in;
    display: flex;
    align-items: center;
    margin: 0 auto;
    max-width: 182px;
    justify-content: center;
}

.ric-link-text {
    color: #fff !important;
    transition: 0.3s ease-in;
}

.ric-link:hover .ric-arrow {
    transition: 0.3s ease-in-out;
    margin-left: 10px;
}

.ric-arrow {
    content: url('/assets/static/icons/svg/fi-rr-angle-small-right.svg');
    margin-left: 5px;
    /* Adjust the margin as needed */
    vertical-align: middle;
    /* Align the image vertically with the text */
    width: 20px;
    /* Set the width of the arrow */
    height: 20px;
    /* Set the height of the arrow */
}

.agicle-link-text {
    color: #000;
    padding: 10px 20px;
    border-radius: 3px;
    font-size: 0.9rem;
    font-family: "Red Hat Display";
    font-weight: 600;
    transition: 0.3s ease-in;
}

.link-arrow {
    height: 10px;
    width: 10px;
    margin-left: 3px;
    transition: 0.3s ease-in;
    margin-bottom: 2px;
}

.link-arrow-text {
    height: 10px;
    width: 10px;
    margin-left: 3px;
    transition: 0.3s ease-in;
    margin-bottom: 2px;
}

.agicle-link:hover,
.agicle-link:visited {
    color: #fff;
}

.agicle-link-text:hover,
.agicle-lin-text:visited {
    color: var(--agicle-sky);
}

.agicle-link:hover .link-arrow {
    margin-left: 10px;
    transition: 0.3s ease-in-out;
}

.agicle-link-text:hover .link-arrow-text {
    margin-left: 10px;
    transition: 0.3s ease-in-out;
}

.link-div {
    transition: 0.3s ease-in;
    margin: 30px;
    font-weight: 600px;
}

.link-div-text {
    transition: 0.3s ease-in;
    margin: 15px;
    font-weight: 600px;
}

.no-margin {
    margin: 0px !important;
}


.btn-agicle {
    background: var(--background_blue_gradient_vertical);
    margin: 5px 0px;
    padding: 8px 30px;
    text-align: center;
    border: none;
    font-weight: 600;
    font-size: 14px;
    font-family: "Red Hat Display";
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 40px;
    display: block;
}

.btn-agicle:hover {
    background-position: right center;
    /* change the direction of the change here */
    color: #fff;
    text-decoration: none;
}

/*Breadcrump Styles*/
.agicle-path-container {
    padding: 10px 0px;
    background-color: var(--accent-light);
    color: #000;
}

.agicle-path-list {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    font-size: 11px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}



.agicle-path-item::after {
    content: '/';
    margin: 0px 8px;
    color: #414141;
}

.agicle-path-item:last-child::after {
    content: '';
    margin-left: 0;
}

.agicle-path-link {
    text-decoration: none;
    color: #000 !important;
}

.agicle-path-link:visited {
    color: #000 !important;
}

.agicle-path-link:hover {
    text-decoration: underline;
}

.agicle-path-item.active {
    font-weight: bold;
    color: #fff;
}

.navigator-container.container {
    position: sticky;
    top: 70px;
    z-index: 10;
}

.agicle-navigator {
    display: inline-block;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 5px 10px;
    background-color: #fff;
}

.agicle-navigator-list-selected {
    font-size: 13px;
    color: #666;
}

.agicle-navigator-list-selected:focus {
    outline: none;
    border-color: var(--accent-light);
}

.navigator-dropdown-list {
    display: none;
    width: 100%;
    max-height: 150px;
    overflow-y: auto;
    font-size: 14px;
    margin: 10px;
}

.navigator-dropdown-list.active {
    display: block;
}

.navigator-drop-item {
    padding: 8px 10px;
    cursor: pointer;
    border-left: 2px solid #e5e5e5;
    color: #666;
}

.para-agicle {
    margin-top: 20px;
    font-size: 0.9rem;
}

section.agicle-section>p {
    font-size: 0.9rem;
}

section.agicle-section {
    margin: 40px 0px;
}

h2.section-title {
    padding: 10px 0px;
    margin-bottom: 10px;
}

.navigator-drop-item:hover,
.navigator-drop-item.active {
    font-weight: 600;
}

.navigator-drop-item.active {
    border-left: 2px solid var(--accent-light);
    color: #222;
}

.navigator-selected-section {
    font-weight: bold;
    color: #222;
    font-size: 14px;
    cursor: pointer;
}

.enscygen-normal-page-title {
    padding: 20px 0px;
    background-color: #eaeaea;
}

p.enscy-pt-title {
    margin-bottom: 0px;
    font-weight: 600;
    font-family: 'Red Hat Display';
    font-size: 20px;
    padding: 5px 0px;
}

.video-background {
    position: relative;
    width: 100%;
    height: 100vh;
    /* Full screen height */
    overflow: hidden;
    margin-bottom: 20px;
}

#background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1;
    transform: translate(-50%, -50%);
}

.page-title-with-video {
    background-color: #101a2ccf;
    padding: 30px;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ric-title-with-video-white {
    font-size: 2rem;
    font-weight: 600;
    color: #ffffff;
    font-family: "Red Hat Display", Lato, sans-serif;
    margin-bottom: 0px;
}

.page-category-with-video-small {
    color: var(--accent-light);
    margin: 0px;
    font-size: 0.85rem;
    font-family: "Red Hat Display";
    font-weight: 800;
}

span.ens-link-icon:after {
    margin-left: 10px;
    font-weight: 600;
    content: ">";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    transform: translateY(-50%);
    background-color: var(--accent-light);
    color: white;
    width: 15px;
    height: 15px;
    font-size: 15px;
    border-radius: 2px;
    transition: transform 0.3s ease;
    font-family: "Red Hat Display";
}

.ens-link {
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: margin-right 0.3s ease, color 0.3s ease;
}

.link-black .ens-link-span .ens-link,
.link-black .ens-link-span .ens-link:hover,
.link-black .ens-link-span .ens-link:visited {
    color: #000 !important;
}

.link-white .ens-link-span .ens-link,
.link-white .ens-link-span .ens-link:hover,
.link-white .ens-link-span .ens-link:visited {
    color: #fff !important;
}

.ens-link-div {
    display: flex;
    align-items: center;
    align-content: center;
}

.ens-link-div.link-start {
    justify-content: flex-start;
}

.ens-link-div.link-center {
    justify-content: center;
}

span.ens-link-icon {
    transition: margin-left 0.3s ease, color 0.3s ease;
}

.ens-link:hover+.ens-link-icon:after {
    margin-left: 10px;
    color: black;
}

.ens-link:hover {
    margin-right: 5px;
}

.ens-link:hover .ens-link-icon:after {
    color: black;
}

section.agicle-section.section-style-shadow {
    margin: 40px 0px;
    padding: 20px;
    border: 1px solid #efefef;
    border-radius: 2px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    transition: box-shadow 0.3s ease;
}

.section-style-shadow:hover {
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.title-style-modern {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    border-bottom: none !important;
}



.ens-form-input {
    display: block;
    border: none;
    padding: 5px 0px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    outline: none;
}

.ens-form-input:hover,
.ens-form-input:focus {
    border-bottom-color: var(--accent-light);
    /* Change bottom border color on hover and focus */
}

label.ens-form-label {
    color: #858585;
    font-size: 14px;
}

.ens-form-label.label-top {
    margin-bottom: 7px;
}

.ens-btn {
    color: #fff;
    font-size: 14px;
    background-color: var(--accent-light);
    border: none;
    border-radius: 2px;
    padding: 5px 10px;
    transition: background-color 0.3s ease;
}

.ens-btn:hover {
    background-color: var(--accent-light-dim);
}

.enscy-btn.btn-low-bottom-margin {
    margin-bottom: 5px;
}

.enscy-btn.btn-low-top-margin {
    margin-top: 5px;
}

.resizable-div {
    resize: both;
    overflow: auto;
}

@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

.animate-border-enscygen {
    --border-angle: 0turn;
    --main-bg: conic-gradient(from var(--border-angle),
            #213,
            #112 5%,
            #112 60%,
            #213 95%);

    border: solid 5px transparent !important;
    border-radius: 1em !important;

    --gradient-border: conic-gradient(from var(--border-angle),
            transparent 25%,
            #08f,
            #f03 99%,
            transparent);

    background:
        var(--main-bg) padding-box,
        var(--gradient-border) border-box,
        var(--main-bg) border-box;

    background-position: center center;

    animation: bg-spin 3s linear infinite;
    color: #fff;
}

.animate-border-enscygen * {
    color: #fff !important;
}


@keyframes bg-spin {
    to {
        --border-angle: 1turn;
    }
}

.enscygen-basic-page {
    display: flex;
    align-items: center;
    gap: 30px;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px 0px;
    padding-bottom: 50px;
    row-gap: 10px;
}

img.basic-page-image-display,
.basic-page-video-display {
    max-width: 400px;
    width: 100%;
}

.basic-page-title {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}

.basic-page-description {
    font-size: 1rem;
    color: #fff;
}

/* Responsive scaling for desktop */
@media (min-width: 1024px) {
    .basic-page-title {
        font-size: 2.5rem;
    }

    .basic-page-description {
        font-size: 1.25rem;
    }
}

.basic-page-intro {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.para-agicle.para-dark {
    color: #fff;
}

.navigator-container.container.navigator-dark .agicle-navigator {
    background: var(--accent-grey);
    border: none;
    border-radius: 5px;
    color: #fff;
}

.navigator-container.container.navigator-dark * {
    color: #fff;
}

.ens-bg-dark {
    background: #000;
}

.ens-bg-dark * {
    color: #fff;
}

.ens-section.text-normal {
    font-size: 0.9rem;
}

img.basic-page-image-display.padded-display {
    padding: 30px 0px;
}


.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    padding: 20px 0px;
}

.card-container-section {
    padding: 30px 0px;
}


.enscygen-card {
    width: 300px;
    height: 280px;
    background: var(--accent-grey);
    border-radius: 2px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    text-decoration: none;
    color: #000;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.3s ease;
}

.enscygen-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.card-starter {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 0.75rem;
    letter-spacing: 0.5px;
}

.card-sliding-title {
    position: relative;
    height: 5.85rem;
    overflow: hidden;
}

.card-title {
    font-size: 1.1rem;
    font-weight: bold;
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0.4s ease;
    position: relative;
    z-index: 1;
}



.card-body {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    opacity: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    transition: top 0.4s ease, opacity 0.4s ease;
    padding-top: 0.5rem;
}

.enscygen-card:hover .card-title {
    transform: translateY(-2.5rem);
    opacity: 0;
    visibility: hidden;
}

.enscygen-card:hover .card-body {
    top: 1.5rem;
    opacity: 1;
}

.card-learn-more {
    margin-top: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--accent-light);
    text-decoration: none;
    font-weight: bold;
    z-index: 1;
}

.card-learn-more:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {

    .enscygen-card,
    .ens-card {
        width: 100% !important;
    }
}


.ens-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    padding: 20px 0px;
}

.ens-card {
    border-radius: 3px;
    width: 300px;
    overflow: hidden;
    /* Important for the card itself if indicators were outside main-display */
    cursor: pointer;
    min-height: 250px;
    /* title-div + main-display-div height */
}


.title-div {
    color: white;
    margin: 15px;
    font-size: 0.9rem;
    text-transform: uppercase;
    position: relative;
    padding: 10px 0px;
}

.title-div::before {
    content: '';
    /* Pseudo-elements require a content property */
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 3px;
    /* Adjust the thickness of the line as needed */
    background-color: var(--accent-light);
}

section.ens-card-container-section {
    margin: 50px 0px;
}

.main-display-div {
    position: relative;
    height: 200px;
    /* Fixed height for the sliding area */
    overflow: hidden;
    /* Clips the sliding content */
}

.ens-intro-div,
.ens-detailed-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    transition: transform 0.5s ease-in-out;
    backface-visibility: hidden;
}

.ens-intro-div p,
.ens-detailed-div p {
    padding: 0px 15px;
    margin-bottom: 0px;
}

audio.ens-card-audio {
    margin: 15px;
    padding: 5px;
}

.ens-intro-div p {
    font-size: 1.2rem;
    font-weight: 600;
}

.ens-intro-div {
    transform: translateX(0%);
    z-index: 2;
    /* Initially on top */
}

.ens-intro-div h3 {
    margin-top: 0;
}

.ens-detailed-div {
    transform: translateX(100%);
    /* Initially off-screen */
    z-index: 1;
    /* Initially behind ens-intro-div */
    display: flex;
    flex-direction: column;
}

.ens-detailed-div h3 {
    margin-top: 0;
}

.ens-detailed-div p {
    font-size: 0.9em;
    overflow-y: auto;
}

h2.ens-card-container-section-title {
    color: #fff;
}

.open-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 1.5rem;
    font-weight: bold;
    background: var(--accent-light);
    z-index: 1;
    font-family: "Red Hat Display";
    color: #fff;
    padding: 5px 10px;
    line-height: 1;
}

.dynamic-close-button {
    position: absolute;
    bottom: 0;
    right: 0;
    color: white;
    border: none;
    width: 25px;
    height: 25px;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s 0.2s ease-in-out, visibility 0.3s 0.2s ease-in-out;
    background: #303030;
}

.ens-card.active .ens-intro-div {
    transform: translateX(-100%);
}

.ens-card.active .ens-detailed-div {
    transform: translateX(0%);
    z-index: 2;
}

.ens-card.active .ens-detailed-div .dynamic-close-button {
    opacity: 1;
    visibility: visible;
}

.ens-card.card-dark-styled {
    background: var(--accent-grey);
    color: #fff;
}

.enscygen-quick-overview {
    background: var(--accent-grey);
    padding-top: 40px;
    font-size: 0.9rem;
    padding-bottom: 40px;
    background-image: url(/assets/images/enscygen-lined.png);
    background-position: 100%;
    background-repeat: no-repeat;
}

.enscygen-quick-overview * {
    color: #fff;
}

.enscy-overview-btn {
    position: relative;
    display: inline-block;
    color: #fff;
    background: var(--accent-light);
    padding: 10px 20px;
    border-radius: 2px;
    font-size: 0.9rem;
    overflow: hidden;
    transition: color 0.3s 0.2s ease-in-out;
    z-index: 0;
    text-decoration: none;
    border: none;
}

.enscy-overview-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #5b850e;
    /* Or any color you want to slide in */
    z-index: -1;
    transition: left 0.2s ease-in-out;
}

.enscy-overview-btn:hover::before {
    left: 0;
}

.enscy-overview-btn:hover {
    color: #fff;
    /* Optional: if you want to maintain white text */
}

.ens-download-give-options {
    display: flex;
    flex-direction: column;
    padding: 20px 0px;
    gap: 15px;
}

a.ens-download-option-link {
    text-decoration: underline dotted !important;
    text-underline-offset: 2px;
    font-weight: 500;
}

a.ens-download-option-link:hover {
    text-decoration-style: solid !important;
    color: #fff;
}

.quick-overview-parent {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
}

.ens-carousel-style {
    padding: 15px 0px;
}

.ens-carousel-style::-webkit-scrollbar {
    background-color: #202020;
    /* Background of the scrollbar track */
    width: 4px;
    /* Adjust as needed for width (vertical scrollbar) or height (horizontal scrollbar) */
    height: 4px;
    /* Adjust as needed for height (horizontal scrollbar) or width (vertical scrollbar) */
}

.ens-carousel-style::-webkit-scrollbar-thumb {
    background-color: #76b600;
    /* Movable scrollbar thumb (handle) */
    border-radius: 2px;
    /* Optional: adds rounded corners to the thumb */
}

/* Optional: Style for when the scrollbar thumb is hovered */
.ens-carousel-style::-webkit-scrollbar-thumb:hover {
    background-color: #5f9000;
    /* Slightly darker color on hover */
}

/* Optional: Style for the scrollbar track (the area behind the thumb) */
.ens-carousel-style::-webkit-scrollbar-track {
    background-color: #202020;
    /* This ensures the entire track matches the background */
}

.ens-scroll::-webkit-scrollbar {
    width: 4px;
    /* Adjust as needed for width (vertical scrollbar) or height (horizontal scrollbar) */
    height: 4px;
    /* Adjust as needed for height (horizontal scrollbar) or width (vertical scrollbar) */
}

.ens-scroll.scroll-dark::-webkit-scrollbar {
    background-color: #202020;
}

.ens-scroll.scroll-light::-webkit-scrollbar {
    background-color: #cdcdcd;
}

.ens-scroll::-webkit-scrollbar-thumb {
    background-color: #76b600;
    /* Movable scrollbar thumb (handle) */
    border-radius: 2px;
    /* Optional: adds rounded corners to the thumb */
}

/* Optional: Style for when the scrollbar thumb is hovered */
.ens-scroll::-webkit-scrollbar-thumb:hover {
    background-color: #5f9000;
    /* Slightly darker color on hover */
}

.ens-scroll.scroll-dark::-webkit-scrollbar-track {
    background-color: #202020;
}

.ens-scroll.scroll-light::-webkit-scrollbar-track {
    background-color: #cdcdcd;
}

.basic-page-animate-intro {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family: Arial, sans-serif;
}

.basic-page-container-inside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
}

.animated-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transform: scale(1.6);
    animation: zoomOutOnce 5s ease-out forwards;
}

@keyframes zoomOutOnce {
    to {
        transform: scale(1);
    }
}

.basic-page-intro.overlay-content {
    position: relative;
    z-index: 2;
    color: #fff;
    padding: 80px 0px;
}

.ens-carousel-structured {
    width: 100%;
    margin: 40px 0px;
    font-family: sans-serif;
    padding: 20px 0px;
    position: relative;
    touch-action: pan-y;
}

.ens-carousel-title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
}

.ens-carousel-wrapper {
    position: relative;
    overflow: hidden;
}

.ens-carousel-inner {
    display: flex;
    transition: transform 0.4s ease-in-out;
}

.ens-carousel-item {
    min-width: 100%;
    display: flex;
    overflow: hidden;
    user-select: none;
    flex-direction: column;
    padding: 0px 10px;
}

.ens-carousel-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.ens-carousel-item * {
    flex: 1;
    width: 100%;
}

img.ens-carousel-image {
    border-radius: 5px;
}

section.ens-carousel-structured.dark-themed * {
    color: #fff;
}

.ens-carousel-text {
    padding: 20px 0px;
}

.ens-carousel-main-text {
    font-size: 20px;
    font-weight: bold;
}

.ens-carousel-sub-text {
    font-size: 14px;
    color: #555;
    margin-top: 10px;
}

.ens-carousel-nav {
    margin: 15px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 10px;
}

.ens-carousel-arrow {
    font-size: 1.1rem;
    cursor: pointer;
    user-select: none;
    border-radius: 5px;
}

.ens-carousel-arrow.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.ens-carousel-indicator-text {
    font-weight: 600;
    font-size: 0.9rem;
    flex-grow: 1;
    text-align: center;
    letter-spacing: 3px;
}

section.ens-carousel-structured.flex-minimize {
    max-width: 600px;
    margin: 0 auto;
}

.ens-image-and-bg-intro {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ens-image-and-bg-intro-content {
    position: relative;
    z-index: 2;
}

.enscygen-basic-page.basic-page-animate-intro {
    background: #000;
}

.ens-global-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    font-weight: 600;
    color: #1a1a1a;
    position: relative;
    padding-right: 32px;
}

.ens-global-link-div.link-small {
    font-size: 0.9rem;
}

.ens-global-link::after {
    content: ">";
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--accent-light);
    color: white;
    width: 20px;
    height: 20px;
    font-size: 16px;
    border-radius: 2px;
    transition: transform 0.3s ease;
    font-family: "Red Hat Display";
}

a.ens-global-link.link-white {
    color: #fff;
}

.ens-global-link:hover::after {
    transform: translate(4px, -50%);
}

.ens-global-link-div.link-align-middle {
    text-align: center;
}

/* Shared fade-in + transition */
.ens-appear-smoothly {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

/* Slide from bottom */
.ens-appear-bottomtop {
    transform: translateY(40px);
}

/* Slide from left */
.ens-appear-leftright {
    transform: translateX(-40px);
}

/* Final visible state */
.ens-visible {
    opacity: 1;
    transform: translate(0, 0);
}

.ens-accordion {
    max-width: 900px;
    margin: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

.enscygen-services {
    padding: 20px 0px;
}

.ens-accordion-header {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s;
    font-size: 1.1rem;
    gap: 15px;
}


.ens-accordion-index {
    color: #76b000;
    font-weight: bold;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 2.5rem;
}

.ens-accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

.ens-accordion-toggle {
    font-size: 1.2rem;
    transition: transform 0.3s;
    color: #fff;
}

.ens-accordion-content {
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease;
    padding: 0 20px;
}

.ens-service-link {
    padding: 5px 10px;
}

.ens-service-block {
    padding: 14px 0;
    color: #fff;
}

.services-title {
    color: #fff;
    text-align: center;
}

.ens-service-block span {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
}

.ens-service-desc {
    font-size: 0.95rem;
    color: #bbb;
    padding-left: 10px;
}

.enscy-overview-btn.ens-app-download-starter::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url('/assets/static/icons/svg/download-white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 8px;
    vertical-align: middle;
}

.video-bg-page-title-container {
    position: relative;
    width: 100%;
    height: 60vh;
    /* adjust as needed */
    overflow: hidden;
}

.video-bg-page-title-container .video-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.5;
    /* reduce opacity */
}

.video-bg-page-title-container .container {
    position: relative;
    z-index: 2;
    /* make sure content stays above video */
    color: white;
    text-align: center;
    padding: 100px 20px;
}

.add-shadow {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}