/*fontawesome icon library*/
@import url('lib/fontawesome/css/fontawesome.min.css');
@import url('lib/fontawesome/css/regular.min.css');
@import url('lib/fontawesome/css/solid.min.css');
@import url('lib/fontawesome/css/brands.min.css');

/*bootstrap icon library*/
@import url('lib/bootstrapicons/font/bootstrap-icons.min.css');
@import url('lib/bootstrapicons/font/bootstrap-icons.css');



@font-face {
    font-family: 'blackerprodis-bd';
    src: url('../fonts/primary/englishfonts/blackerprodis-bd.otf') format('opentype');
}

@font-face {
    font-family: 'blackerprodis-rg';
    src: url('../fonts/primary/englishfonts/blackerprodis-rg.otf') format('opentype');
}

@font-face {
    font-family: 'protype - siwa bold';
    src: url('../fonts/secondary/bilingual/protype - siwa bold.otf') format('opentype');
}

@font-face {
    font-family: 'protype - siwa regular';
    src: url('../fonts/secondary/bilingual/protype - siwa regular.otf') format('opentype');
}

:root {
    --color-Primary: #2884C6;
    --color-Secondary: #50afe4;
    --color-Tertiary: #7cb6bc;
    --color-quaternary: #d7eaf9;
    --color-text: #272530;
    --color-text-muted: #aeaeae
}

.cms-col-6 {
    width: 50%
}

.cm-col-3 {
    width: 25%;
}

.cm-col-7 {
    width: 75%;
}

.mx-2 {
    margin: 0 0.75rem
}

.px-2 {
    padding: 0 0.75rem
}

.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 0.75rem
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid #c0c0c0;
    border-radius: 0.375rem;
}
/*Heading and Description }*/
.Heading-Description{margin-bottom:2rem;}

.Heading-Description p{ text-align:justify; line-height: 1.2rem; }
/*.sectionHeading {
    color: #000000;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem
}*/
.sectionHeading {
    position: relative;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-weight:600
}

    .sectionHeading:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 80px;
        height: 4px;
        background: var(--color-Secondary);
    }

    .sectionHeading:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: var(--bs-border-color);
    }
html[dir=rtl] .sectionHeading:before { content: ''; position: absolute; bottom: 0; right: 0;left:auto; width: 80px; height: 4px; background: var(--color-Secondary); }

html[dir=rtl] .sectionHeading:after { content: ''; position: absolute; bottom: 0; right: 0;left:auto; width: 100%; height: 1px; background: var(--bs-border-color); }
/* card-link */
.card-link-wrapper {
    display: flex
}

a.card-link {
    display:inline-flex;
    align-items: center;
    color: var(--color-Primary);
    line-height: 15px;
    padding: 5px 8px;
    cursor:pointer
}

    a.card-link:hover {
        border-radius: 5px;
        background-color: var(--color-Primary)
    }

/*read more link and button*/
.btn-outline-primary {
    color: #7cb6bc; border: 1px solid #7cb6bc; font-size: 0.875rem; font-weight: 400; line-height: 1.5rem; vertical-align: middle; text-align: center; border-radius: 0.25rem; padding: 4px 8px; margin-bottom: 0.5rem}

.btn-outline-primary:hover {
        background-color: #7cb6bc; border-color: #7cb6bc; transition: all linear 0.3s; text-decoration: none; color: #ffffff }

/* check list */
.content-list{ margin-bottom:1.5rem}
.content-list ul { list-style-type: circle; margin: 0 1.1rem }
.content-list ul li::marker { color: var(--color-Primary) }
.content-list ul li p { line-height: 1.2rem; margin-bottom: 6px; }

/* ordered list */
.ordered-list { margin-bottom: 2rem }
.ordered-list ol {
    padding: 10px;
}

    .ordered-list ol li {
        list-style: auto;
        margin: 7px;
    }

/* Heading, description and image */
.heading-desc-img {
    margin-bottom: 1rem
}

    .heading-desc-img .heading-desc-img-container {
        display: flex;
        flex-direction: row
    }

        .heading-desc-img .heading-desc-img-container p {
            line-height: 1.4rem;
            text-align: justify
        }

        .heading-desc-img .heading-desc-img-container .img-wrapper {
            width: 100%;
            max-height: 365px;
            overflow: hidden;
            border-radius: 25px
        }

            .heading-desc-img .heading-desc-img-container .img-wrapper img {
                width: 100%;
                height: 100%;
            }

/* Card conatiner */
.card-container {
    display: flex;
    flex-wrap: wrap;
    margin: 1rem 0.5rem
}

/* Card item list */
.Card-item-list {
    /*width: 25%;*/
    padding: 0 0.5rem;
    margin-bottom: 1rem
}

.Card-item-list .card {
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 0;
    border-radius: 10px;
}

.Card-item-list .card a {
    font-weight: normal;
    font-size: 1rem;
    color: #343434;
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    border-radius: 10px;
}

.Card-item-list .card a:after {
    content: '\F774';
    font-family: bootstrap-icons !important;
    font-size: 1.8rem;
    color: #c0c0c0;
    opacity: 0.7;
    min-height: 44px;
}

.Card-item-list .card a:hover {
    color: #ffffff;
    font-weight: 600;
    background-color: var(--color-Tertiary)
}

.Card-item-list .card a:hover:after {
    color: #ffffff;
    opacity: 1;
    font-weight: normal;
}

/*  list item card  ola */
.listItem-card{
    margin-bottom:2rem
}
.listItem-card .card {
    border:none;
    background:url("../images/List-bg.svg") no-repeat;
    height: 65px;
    width: 100%;
}
.listItem-card a{
    display:block;
}
.listItem-card .card .listItem-text {
    font-weight: normal;
    font-size: 0.92rem;
    color: #343434;
}
.listItem-card .card .listItem-icon {
    font-size: 1.8rem;
    color: #c0c0c0;
    position:absolute;
    left:-10px;
    right:auto; top:-10px; bottom:auto;
    background:url("../images/List-icon.svg") no-repeat;
    height: 37px;
    width: 35px;
    filter:none
}
.listItem-card .card .listItem-icon i { font-size: 1rem;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 37px;
    }
.listItem-card .card:hover {
    filter: drop-shadow(3px 3px 5px rgb(0 0 0 / 0.1));
}

.listItem-card .card:hover .listItem-icon {
    color: #ffffff;
    opacity: 1;
    font-weight: normal;
}
.listItem-card .card .card-content{
    padding: 1rem 2rem 1rem 2rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    height: 86px;
}

/* PDF item list */
.PDF-item-list{
    /*width:33%*/
}

.PDF-item-list .card {
    margin-bottom: 3rem;
    padding-right: 1rem;
    padding-left: 1rem;
    border: none
}
.PDF-item-list .card .row{ display:flex; justify-content:flex-start;flex-wrap: nowrap;}

.PDF-item-list .card .card-icon {
    background-color: var(--color-quaternary);
    height: 65px;
    width: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-Primary);
    border-radius: 50%;
    margin: 0 5px
}

.PDF-item-list .card .card-icon i {
    font-size: 1.5rem
}

.PDF-item-list .card .card-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #081828;
    font-weight: 600;
}

.PDF-item-list .card .card-text {
    color: #8c8989;
    font-size: 0.9rem;
    line-height: 1rem;
    padding: 0 0 10px 0
}

.PDF-item-list .card .card-link {
    display: flex;
    justify-content: flex-start;
    align-items: center
}

.PDF-item-list .card .card-link a {
    display: flex;
    align-items: center;
    color: var(--color-Primary);
    line-height: 15px;
    padding: 5px 8px
}

.PDF-item-list .card .card-link a:hover {
    border-radius: 25px;
    background-color: var(--color-quaternary)
}

.PDF-item-list .card .card-link a i {
    font-size: 0.9rem;
    margin: 0 2px;
    display: flex;
    justify-content: flex-start;
    align-items: center
}

/*card with image and external link*/
.card-with-center-img {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding:0 0.5rem;
    max-height: 245px;
      
}
    .card-with-center-img {padding:1rem; margin:0 0.5rem;max-height: 245px;}
    .card-with-center-img .column{display:flex; align-items:center; justify-content:center; flex-direction:column}
    .card-with-center-img .card-image {
        display: flex;
        margin-bottom: 1rem;
        max-height: 80px;
    }
    .card-with-center-img .card-image img{max-width: 80%;
    margin: 0 auto;}

    .card-with-center-img .card-center-container .card-title {
        margin:0 0 0.5rem 0;
        color: #081828;
        font-weight: 600;
        font-size: 1rem;
        text-transform: initial;
        height: 40px;
        width: 90%;
    }

    .card-with-center-img .card-center-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align:center;
        width: 90%;
    }
    .card-with-center-img .card-center-container .card-link{padding:0.5rem; cursor:pointer}

.allNewsContent .card-img-overflow { max-height: 198px; overflow: hidden }
.latest-img-overflow{ max-height:90px; overflow:hidden; border-radius:10px}
@media only screen and (max-width:767px) { .heading-desc-img .heading-desc-img-container {
        flex-direction: column
    }

    .cms-col-6 {
        width: 100%
    }
}

/* VMV conatiner */
.VMV-container {
    display: flex;
    justify-content:center;
    flex-direction:row;
    margin: 1rem
}

.VMV-Card-item{width:33%; padding:0 1rem}
.VMV-Card-item .card {
    border: 1px dashed #93B5CA;
    border-radius: 0 1.5rem;
    padding:1rem;
    text-align:center
}

.VMV-Card-item .card h5.card-title {
    color: #144066
}
.VMV-Card-item .card .featureCard-icon{position:relative; margin:auto}
.VMV-Card-item .card .featureCard-icon i {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: var(--color-quaternary);
    width: 65px;
    height: 65px;
    box-shadow: 1px 4px 6px 0 rgba(0,0,0,.1);
    color: var(--color-Primary);
    font-size: 1.5rem;
}

.VMV-Card-item .card .featureCard-icon:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    z-index: 1;
    animation: pulseanim 3s infinite cubic-bezier(.4,0,1,1) both;
}

.VMV-Card-item .card .card-text {
    color: #808080;
    max-height: 90px;
    height: 90px;
    overflow: hidden;
    margin-bottom:1rem
}

/*resource card*/
.subsite-cardWithBorder {
    margin-top: 10px;
    margin:0 1rem
}
.subsite-cardWithBorder li span.dropdown-item:hover{cursor:pointer}

.subsite-cardWithBorder .card { border: 1px dashed #88cad2; padding: 1rem 1.5rem 0.5rem 1.7rem; border-radius: 10px; box-shadow: 0 3px 3px 0px #3333333b; height:100% }     

.subsite-cardWithBorder .card .card-icon {
        font-size: 1.8rem;
        position: absolute;
        left: -10px;
        right: auto;
        top: -10px;
        bottom: auto;
        background: url(../images/List-icon.svg) no-repeat;
        height: 37px;
        width: 35px;
        filter: none;
    }

.subsite-cardWithBorder .card .card-icon i {
    font-size: 1rem;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 37px;
}

.subsite-cardWithBorder .card .card-title { color: #333; margin-bottom: 3px; font-size: 1.2rem; font-family: 'protype - siwa bold' }

.subsite-cardWithBorder .card .card-text {
    color: #5f5e5e;
    font-size: 1rem;
    line-height: 1.4rem;
    padding: 0 0 10px 0;
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.5px;
}

.subsite-cardWithBorder .card .card-link {
    color: var(--color-Primary);
    font-size: 1rem;
    text-decoration: none;
    font-weight: 500; background-color:transparent
}
.subsite-cardWithBorder .card .card-link:hover { text-decoration: none; border-radius: 25px; background-color: var(--color-quaternary); }

.subsite-cardWithBorder .card .card-info { display: flex; justify-content: flex-start; align-items: center }

.subsite-cardWithBorder .card .card-info i {
    color: var(--color-Tertiary)
}

.subsite-cardWithBorder .card .card-info span {
    color: #5f5e5e
}

.subsite-cardWithBorder .card .card-btn {
color: var(--color-Tertiary);
border: 1px solid var(--color-Tertiary);
padding: 5px 10px;
box-shadow: 0px 0px 4px 1px #3333331f;
font-weight: 500;
font-size: 0.85rem;
border-radius: 5px;
margin-bottom: 0.4rem;
}

.subsite-cardWithBorder .card .card-btn:hover {
    background-color: var(--color-Tertiary);
    color: #fff;
    text-decoration: none
}

/*blockquote grid layout*/

.umb-block-grid__layout-container {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    column-gap: var(--umb-block-grid--column-gap, 0);
    row-gap: var(--umb-block-grid--row-gap, 0);
    padding:3rem 0
}

.umb-block-grid__layout-item {
    position: relative;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--item-row-span, 1);
}


.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--umb-block-grid--area-grid-columns, var(--umb-block-grid--grid-columns, 1)), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: minmax(50px, min-content);
    column-gap: var(--umb-block-grid--areas-column-gap, 0);
    row-gap: var(--umb-block-grid--areas-row-gap, 0);
}

.umb-block-grid__area {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
    grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
    grid-row: span var(--umb-block-grid--area-row-span, 1);
}

@media (min-width:1024px) {
    .umb-block-grid__layout-item {
        grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
    }

    .umb-block-grid__area {
        grid-column-end: span var(--umb-block-grid--area-column-span, 1);
    }
}


/**** Custom additions to the default Grid Layout Stylehseet: ****/


/* additional CSS options for area-container and areas: */
.umb-block-grid__area-container, .umb-block-grid__block--view::part(area-container) {
    max-width: var(--my-container-max-width);
    padding: var(--my-container-padding);
    margin-left: auto;
    margin-right: auto;
    --umb-block-grid--areas-column-gap: 60px;
    --umb-block-grid--areas-row-gap: 60px;
}

.umb-block-grid__area {
   /* justify-content: center;*/
}

.umb-block-grid__layout-item[data-content-element-type-alias="oneColumnSectionBlock"] .umb-block-grid__layout-container {
    --umb-block-grid--column-gap: 60px;
    --umb-block-grid--row-gap: 60px;
}

details summary {
    list-style: none;
}

@media (max-width: 400px) {
    .VMV-container { flex-direction: column; margin: 0; }
    .VMV-Card-item { width: 100%; margin-bottom:1rem }
}
/* portrait and landscape - xs and sm*/
@media (max-width: 767.98px) {
    .listItem-card .card { height: 85px; background-size: 100%; }
  
}