@font-face {
    font-family: 'Cairo';
    src: url('../fonts/cairo-regular.ttf') format('truetype');
}

@font-face {
    font-family: 'cairo-semibold';
    src: url('../fonts/cairo-semibold.ttf') format('truetype');
}

@font-face {
    font-family: 'cairo-bold';
    src: url('../fonts/cairo-bold.ttf') format('truetype');
}

html {
    scroll-behavior: smooth;
}

body {
    color: #65624f;
    font-family: 'Cairo', sans-serif;
    text-align: right;
    direction: rtl;
    margin-top: 143px;
}

hr {
    margin: 2.5rem 0;
    border-top: 4px solid #eeeeee;
}

.text-q {
    color: #b4975b;
}

.acc-extend {
    display: none;
}

a, a:hover {
    text-decoration: none;
}

.head-top {
    background: #65634e;
    /* color: white; */
    overflow: hidden;
    height: 46px;
    transition: .1s;
}

.lg-container {
    width: 91%;
    margin: auto;
    padding: 0 15px;
}

.head-top-content {
    display: flex;
    justify-content: flex-end;
}

.head-top-item {
    display: flex;
    color: white !important;
    padding: 11px 11px;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

    .head-top-item svg {
        height: 100%;
        fill: white;
        height: 19px;
        WIDTH: 19PX;
        margin-left: 10px;
        /* padding: 6px; */
    }

    .head-top-item.rev-head-top {
        background: #b4975b;
        min-width: 138px;
    }

    .head-top-item:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.188);
        transform: translateY(-100%);
        z-index: 1;
        transition: .3s;
    }

    .head-top-item > * {
        z-index: 2;
    }

    .head-top-item:hover:before {
        transform: inherit;
    }

    .head-top-item:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: white;
        height: 4px;
        width: 0;
        transition: .3s;
    }

    .head-top-item:hover:after {
        width: 100%;
    }

body.scroll .head-top {
    height: 0;
}

.head-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.logo-a img {
    height: 57px;
    width: 205px;
}

.main-menu-items {
    display: flex;
}

.drop1-item {
    color: #65634e;
    font-weight: bold;
    padding: 14px 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: .4s;
}

.desk {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
    z-index: 999;
    background: rgba(255, 255, 255, 0.93);
    /*backdrop-filter: blur(20px);*/
}

@keyframes moveBackground {
    to {
        background-position: -30%;
    }
}

.desk:before, .mobl-top:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(45deg, #b4975a, #fff2d5, #b4975a, #b4975a);
    background-color: #b4975a;
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: 200%;
    transition: .1s;
    animation: moveBackground 8s infinite;
    width: 0;
}

body.scroll .desk:before {
    width: 100%;
    transition: 2s;
}

.search-a svg {
    height: 39px;
    width: 39px;
    padding: 10px;
    color: #373b44;
    transition: .4s;
}

.search-item {
    display: flex;
    margin-right: 15px;
    align-items: center;
}

.drop {
    display: flex;
    position: relative;
}

.drop1-item:before, .circle-hov:before, .q-btn:before {
    content: "";
    position: absolute;
    top: 127%;
    left: calc(50% - 100px);
    height: 200px;
    width: 200px;
    background: #b4975a;
    z-index: 1;
    border-radius: 100%;
    /* transform: translateX(-10%); */
    box-shadow: 0 0 7px 5px rgba(180, 151, 90, 0.62);
    transition: .4s;
}

.drop1-item > *, .circle-hov > *:not(.sr-only), .q-btn > * {
    z-index: 2;
    position: relative;
}

.drop1-item:hover:before, .drop:hover .drop1-item:before, .circle-hov:hover:before, .q-btn:hover:before {
    top: -160%;
    transition: .8s;
}

.drop1-item:hover, .drop:hover .drop1-item {
    color: white;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.259);
}

.circle-hov, .q-btn {
    position: relative;
    overflow: hidden;
}

.search-a {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.13);
    cursor: pointer;
}

    .search-a:hover svg {
        fill: white;
    }

    .search-a:before {
        background: #65634e;
    }

/* Home Slider */

.slider-bg {
    padding-bottom: 35%;
    background-size: cover;
    background-position: center;
    transition: 2s !important;
    transform: scale(1.7);
    filter: grayscale(1);
    max-height: inherit;
}

.owl-item.active .slider-bg {
    transform: inherit;
    filter: inherit;
}

.slider-item {
    position: relative;
    overflow: hidden;
}

.slider-content-container {
    position: absolute;
    bottom: 150px;
    left: 0;
    right: 0;
    color: white;
}

.md-container {
    margin: auto;
    width: 79%;
    padding: 0 15px;
}

.slider-content {
    width: 50%;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.38);
}

.q-btn {
    display: inline-block;
    background: #b4975a;
    color: white !important;
    font-size: 18px;
    padding: 7px 23px;
    cursor: pointer;
    transition: .4s;
    border: 0;
    outline: 0 !important;
}

.slider-btn-container {
    padding-top: 30px;
}

.slider-ttl {
    font-size: 34px;
    font-weight: bold;
}

.slider-desc {
    font-size: 20px;
}

.q-btn:before {
    background: #65634e;
}

.q-btn:hover {
    box-shadow: 0 0 0 3px white, 0 0 0 4px #65634e;
}

/* home boxes */

.home-box-icon {
    width: 104px;
    height: 104px;
    border-radius: 100%;
    background: white;
    box-shadow: 0 4px 56px rgba(58, 81, 131, 0.169);
    margin: auto;
    position: relative;
}

    .home-box-icon svg {
        height: 100%;
        width: 100%;
        padding: 27px;
        fill: #b4975b;
        z-index: 2;
        position: relative;
        transition: .3s;
    }

.home-box-ttl {
    text-align: center;
    color: #656251;
    margin-top: 27px;
    font-weight: bold;
    font-size: 21px;
}

.home-box {
    display: block;
    position: relative;
    padding: 30px;
    padding-bottom: 0px;
    /* overflow: hidden; */
    /* height: 100%; */
}

.home-box-btn {
    position: absolute;
    bottom: -23px;
    left: 0;
    right: 0;
    text-align: center;
}

.home-btn-content {
    border-radius: 100%;
    margin: auto;
    width: 48px;
    height: 48px;
    background: white;
    box-shadow: 0 4px 19px rgba(58, 81, 131, 0.17);
}

    .home-btn-content svg {
        height: 100%;
        width: 100%;
        padding: 14px;
        fill: #b4975a;
    }

.home-boxes-section {
    z-index: 10;
    position: relative;
    transform: translateY(-50%);
}

.home-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #ffffff;
    z-index: 1;
    height: 0;
    transition: 1s;
}

.aos-animate .home-box:before {
    height: 100%;
}

.home-boxes-container .row > div:nth-child(2) .home-box:before {
    transition-delay: .2s;
}

.home-boxes-container .row > div:nth-child(3) .home-box:before {
    transition-delay: .4s;
}

.home-boxes-container .row > div:nth-child(4) .home-box:before {
    transition-delay: .6s;
}

.home-box > div {
    transform: translateY(100px);
    opacity: 0;
    transition: 1s;
}

.aos-animate .home-box > div {
    transform: inherit;
    opacity: 1;
}

.home-boxes-container .row > div:nth-child(2) .home-box > div {
    transition-delay: .2s;
}

.home-boxes-container .row > div:nth-child(3) .home-box > div {
    transition-delay: .4s;
}

.home-boxes-container .row > div:nth-child(4) .home-box > div {
    transition-delay: .6s;
}


.home-box > * {
    position: relative;
    z-index: 2;
}

.home-box:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #f1f5fe;
    z-index: 1;
    transform: scaleY(0);
    transition: .3s;
}

.home-box:hover:after {
    transform: inherit;
}

.home-box-icon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #b3965a;
    border-radius: 100%;
    z-index: 1;
    transform: scale(0);
    transition: .3s;
}

.home-box:hover .home-box-icon:before {
    transform: inherit;
}

.home-box:hover .home-box-icon svg {
    fill: white;
}

/* chairman message */

.chairman-responsive {
    width: 100%;
    max-width: 700px;
    margin: auto;
}

.charman-portrait {
    padding-top: 86%;
    position: relative;
    /* box-shadow: 0 0 0 10px; */
}

.pattern1 {
    position: absolute;
    z-index: 2;
    top: 10%;
    right: 0;
    width: 17%;
    transition-delay: 1s !important;
    transform: translateX(-20%);
}


.pattern3 {
    position: absolute;
    z-index: 1;
    bottom: -32px;
    height: 233px;
    left: -64px;
    opacity: .3;
    transform: scale(1.3) translateX(20%);
    transition-delay: 1s !important;
}

.charman-bg {
    position: absolute;
    top: 0;
    left: 16%;
    height: 90%;
    width: 66%;
    background-size: cover;
    background-position: center;
    z-index: 5;
    transform: translateX(-20%);
}

.pattern2 {
    width: 55%;
    height: 41%;
    position: absolute;
    border: 11px solid #e8e0cd;
    bottom: 0;
    right: 8%;
    transform: translateX(20%);
}

.color-q {
    color: #65634e;
}

.charman-h1 {
    font-weight: bold;
}

.chairman-h2 {
    font-size: 24px;
    padding-right: 25px;
    position: relative;
    margin: 21px 0;
}

    .chairman-h2:before {
        content: "";
        position: absolute;
        top: 4px;
        bottom: 5px;
        right: 0;
        width: 3px;
        background: #b4975a;
    }

.chairman-btn {
    margin-top: 20px;
}

.training-content {
    padding: 70px 0;
    color: white;
}

.training-h1 {
    margin-bottom: 90px;
}

.training-section {
    background-size: cover;
    background-position: center;
    position: relative;
}

.ttl {
    text-align: center;
    color: #6b6855;
    font-weight: bold;
    font-size: 30px;
    padding-bottom: 13px;
    position: relative;
    margin-bottom: 30px;
}

    .ttl:before {
        content: "";
        position: absolute;
        height: 4px;
        width: 180px;
        background: #b4975a;
        bottom: 0;
        right: calc(50% - 90px);
        transition: .6s;
    }

    .ttl:after {
        content: "";
        position: absolute;
        height: 15px;
        width: 15px;
        background: #b4975a;
        bottom: -5px;
        left: calc(50% - 8.5px);
        transition: .4s;
    }

.program-box {
    display: block;
    box-shadow: 0 0 17px rgba(0, 0, 0, 0.09);
    padding: 35px;
    padding-bottom: 70px;
    padding-top: 75px;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.program-icon svg {
    fill: #b4975a;
    height: 100px;
    width: 123px;
    margin-right: auto;
    display: block;
}

.program-box:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 40px;
    background: #e1d5bd;
    z-index: 1;
    transition: .3s;
}

.program-ttl {
    color: black;
    font-weight: bold;
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 20px;
    transition: .3s;
}

.program-desc {
    color: black;
    transition: .3s;
}

.program-btn-container {
    display: flex;
    font-weight: bold;
    color: #646255;
    position: absolute;
    bottom: 27px;
    z-index: 2;
    transition: .3s;
}

.program-btn svg {
    width: 20px;
    height: 24px;
    fill: #b19559;
    margin-right: 15px;
    transition: .3s;
}

.program-box > div:not(:last-child) {
    z-index: 2;
    position: relative;
}

.program-box:hover:before {
    height: 100%;
    width: 100%;
    background: #b4975b;
}

.program-box:hover .program-icon svg, .program-box:hover .program-ttl,
.program-box:hover .program-desc, .program-box:hover .program-btn-container,
.program-box:hover .program-btn-container svg {
    fill: white;
    color: white;
}

.event-bg {
    padding-top: 90.9%;
    background-size: cover;
    background-position: center;
    transition: .3s;
    opacity: 0.87;
    z-index: 1;
    position: relative;
}

.event-date {
    display: flex;
    align-items: center;
    color: #717882;
    margin-bottom: 10px;
}

    .event-date img {
        height: 20px;
        width: 20px !important;
        margin-left: 15px;
    }

.event-title {
    color: #0d2d3c;
    font-weight: bold;
    font-size: 17px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 51px;
}

.event-content {
    margin: 0 20px;
    padding: 30px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.129);
    margin-top: -75px;
    background: white;
    transition: .3s;
    z-index: 2;
    position: relative;
}

.event-box {
    display: block;
}

    .event-box:hover .event-bg {
        box-shadow: 0 0 0 10px white, 0 0 0 12px #b4975a, 0 5px 40px 10px rgba(0, 0, 0, 0.149);
        opacity: 1;
    }

    .event-box:hover .event-content {
        transform: translateY(-25px);
        background: #f1f5fe;
    }

/* footer */

.footer-top {
    padding: 55px 0;
    position: relative;
}

footer {
    background: #65634e;
    color: white;
}

.footer-ttl {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 30px;
}

.q-soc-container {
    display: flex;
    flex-wrap: wrap;
    padding-top: 11px;
}

.q-soc-item {
    display: flex;
    height: 55px;
    width: 55px;
    background: white;
    border-radius: 100%;
    margin-left: 10px;
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

    .q-soc-item svg {
        height: 100%;
        width: 100%;
        padding: 12px;
        fill: #b4975a;
        z-index: 2;
        transition: .3s;
    }

    .q-soc-item:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #b4975a;
        border-radius: 100%;
        z-index: 1;
        transition: .3s;
        transform: scale(0);
    }

    .q-soc-item:hover:before, .q-soc-item:hover svg {
        fill: white;
        transform: inherit;
    }

.ltr {
    direction: ltr;
    display: inline-block;
}

.footer-bottom {
    background: #767360;
    text-align: center;
    padding: 27px 15px;
    transform: scaleY(0);
    transform-origin: bottom;
    opacity: 0;
    transition: .6s;
}

.footer-bottom-content a {
    color: white !important;
}

.footer-link {
    display: block;
    color: #d1d0ca;
    padding: 8px;
    padding-left: 26px;
    position: relative;
    overflow: hidden;
    transition: .2s;
}

.footer-links-container {
    margin: -0.5rem;
}

.footer-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #44422e;
    box-shadow: 0 0 0 4px #b4975a;
    z-index: 1;
    transform: skewX(-40deg) translateX(110%);
    width: 120%;
    transition: .6s;
}

.footer-link * {
    z-index: 2;
    position: relative;
}

.footer-link:hover:before {
    transform: skewX(-40deg) translateX(27%);
}

.footer-link:hover {
    /* box-shadow: 0 5px 6px 0px rgba(0, 0, 0, 0.188); */
    /* background: #ffffff00; */
    color: white;
}

.footer-link span {
    transition: .3s;
    display: block;
}

.footer-link:hover span {
    transform: translateX(-16px);
}

.footer-icon {
    position: relative;
    padding-right: 35px;
}

    .footer-icon img {
        width: 24px;
        height: 24px;
        position: absolute;
        top: 0;
        right: 0;
    }

.footer-top > * {
    position: relative;
    z-index: 2;
}

.footer-style {
    position: absolute;
    z-index: 1;
    height: 160px;
    width: 270px;
    opacity: .3;
    top: 40px;
    left: 5%;
    background-repeat: no-repeat;
    opacity: 0;
    transform: translateX(-100%) scale(2);
    transition: 3s;
}

/* Home Page slider */

.owl-carousel.show1 {
    display: block;
}

.show1:not(.owl-loaded) > div:not(:first-child) {
    display: none;
}

/* Home Slider nav */

.home-slider .owl-prev span, .home-slider .owl-next span {
    display: block;
    height: 50px;
    width: 50px;
    background: white;
    position: absolute;
    top: calc(50% - 25px);
    right: calc(4.5% + 15px);
    font-size: 0;
    overflow: hidden;
}

    .home-slider .owl-prev span svg, .home-slider .owl-next span svg {
        height: 100%;
        width: 100%;
        padding: 15px;
        fill: #626258;
        transition: .2s;
        position: relative;
        z-index: 2;
    }

    .home-slider .owl-prev span:before, .home-slider .owl-next span:before {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: #b4975a;
        z-index: 1;
        transform: translateY(-100%);
        transition: .2s;
    }

    .home-slider .owl-prev span:hover:before, .home-slider .owl-prev span:hover svg,
    .home-slider .owl-next span:hover:before, .home-slider .owl-next span:hover svg {
        transform: inherit;
        fill: white;
    }

.home-slider .owl-next span {
    right: inherit;
    left: calc(4.5% + 15px);
}

.slider-content > * {
    transform: translateX(-100px);
    transition: .5s;
    opacity: 0;
    transition-delay: 1.3s;
}

.owl-item.active .slider-content > * {
    transform: inherit;
    opacity: 1;
}

.slider-content > *:nth-child(2) {
    transition-delay: 1.5s;
}

.slider-content > *:nth-child(3) {
    transition-delay: 1.7s;
}

/* dropmenu and animations */

.drop-menu {
    position: absolute;
    top: 100%;
    right: 0;
    width: 230px;
    perspective: 300px;
    transition: .2s;
    visibility: hidden;
}

.drop-item-a {
    display: block;
    padding: 9px 15px;
    color: #65634e;
    background: rgba(255, 255, 255, 0.961);
    box-shadow: 0 8px 44px rgba(0, 0, 0, 0.078);
    transition: .2s;
    border-right: 4px solid #dedede;
}

.drop-item {
    transform: rotateX(70deg);
    transform-origin: top;
    opacity: 0;
    transition: .2s;
}

.drop:hover .drop-item {
    transform: inherit;
    opacity: 1;
}

.drop-item:nth-child(2) {
    transition-delay: .1s;
}

.drop-item:nth-child(3) {
    transition-delay: .2s;
}

.drop-item:nth-child(4) {
    transition-delay: .3s;
}

.drop-item:nth-child(5) {
    transition-delay: .4s;
}

.drop-item:nth-child(6) {
    transition-delay: .5s;
}

.drop-item:nth-child(7) {
    transition-delay: .6s;
}

.drop-item:nth-child(8) {
    transition-delay: .7s;
}

.drop-item:nth-child(9) {
    transition-delay: .8s;
}

.drop-item:nth-child(10) {
    transition-delay: .9s;
}

.drop-item:nth-child(11) {
    transition-delay: 1s;
}


.drop-item-a:hover {
    background: rgba(180, 151, 90, 0.851);
    color: white;
    border-right-color: #65634e;
}

.drop:hover .drop-menu {
    visibility: visible;
}

.ttl-btns-container {
    position: absolute;
    display: flex;
    top: 0;
    bottom: 13px;
    align-items: center;
}

.ttl-btn {
    font-size: 16px;
    color: #6a685c;
    border: 1px solid #a39882;
    border-radius: 90px;
    min-width: 110px;
    text-align: center;
    padding: 4px;
    margin-left: 15px;
    transition: .3s;
}

    .ttl-btn:hover {
        color: white;
    }

/* animations */

.charman-portrait > * {
    opacity: 0;
    transition: 1s;
}

.charman-portrait.aos-animate > * {
    transform: inherit;
    opacity: 1;
}

.charman-portrait.aos-animate > .pattern3 {
    transform: scale(1.3);
    opacity: .3;
}

.aos-animate[data-aos] {
    transition-delay: .3s;
}

[data-aos='fade-start'] {
    transform: translateX(-150px);
    transition: 1s;
    opacity: 0;
}

[data-aos*="fade-up"] {
    transform: translateY(150px);
    transition: 1s;
    opacity: 0;
}

.aos-animate[data-aos*='fade'] {
    transform: inherit;
    opacity: 1;
}

.aos-init .ttl:before {
    width: 0;
    transition-delay: .4s;
}

.aos-init.aos-animate .ttl:before {
    width: 180px;
}

.aos-init .ttl:after {
    transform: scaleX(0);
    transition-delay: .6s;
}

.aos-init.aos-animate .ttl:after {
    transform: inherit;
}

.aos-animate .footer-style {
    transform: inherit;
    opacity: .3;
}

.aos-animate .footer-bottom {
    transform: inherit;
    opacity: 1;
}

.footer-main-panel, .footer-content {
    color: #d1d0ca;
}

/* Search */

.white-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    transition: .3s;
    opacity: 0;
    visibility: hidden;
}

.is-opened .white-overlay {
    opacity: 1;
    visibility: visible;
}

.search-card {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    background: white;
    width: 31%;
    box-shadow: 0 0 41px rgba(0, 0, 0, 0.36);
    min-width: 290px;
    max-width: 420px;
    border-right: 7px solid #ececec;
    transform: translateX(-100%);
    visibility: hidden;
    transition: .4s;
}

.search-card-container {
    padding: 30px;
}

.search-ttl {
    color: #b4975a;
    font-weight: bold;
    font-size: 29px;
    margin-bottom: 20px;
    margin-top: 5px;
}

.search-desc {
    margin-bottom: 20px;
}

.search-control, .q-control {
    border: 1px solid #d6d6d6;
    padding: 13px;
    width: 100%;
    background: whitesmoke;
    outline: 0 !important;
    transition: .2s;
    resize: none;
}

.search-btn {
    margin-top: 33px;
}

.search-control:hover, .search-control:focus,
.q-control:hover, .q-control:focus {
    border-color: #2ea0e6;
}

.search-control:focus, .q-control:focus {
    /* background: white; */
    box-shadow: 0 0 1px 5px rgba(46, 160, 230, 0.11);
}

.search-close-btn {
    position: absolute;
    display: flex;
    height: 50px;
    width: 50px;
    top: 30px;
    left: 30px;
    border: 1px solid #cecece;
    cursor: pointer;
}

    .search-close-btn svg {
        height: 100%;
        width: 100%;
        padding: 13px;
        color: #525252;
    }

    .search-close-btn:hover {
        border-color: #414141;
    }

.is-opened .search-card {
    transform: inherit;
    visibility: visible;
}

/* Mobile Menu */

.mobl {
    display: none;
}

@media (max-width: 1199px) {
    .mobl-lang-btn {
        position: absolute;
        top: 0;
        left: 0;
        color: white;
        padding: 13px 19px;
        background: rgba(255, 255, 255, 0.051);
    }

    .desk {
        display: none;
    }

    .mobl {
        display: block;
    }

    .mobl-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* display: flex; */
        text-align: center;
        box-shadow: 0 0 50px rgba(0, 0, 0, 0.13);
        display: flex;
        background: rgba(255, 255, 255, 0.95);
        z-index: 99;
        padding-top: 5px;
    }

    .mobl-logo {
        /* display: none; */
        width: 100%;
        height: 60px;
        padding: 11px;
    }

    .mobl-search-btn-container {
        position: absolute;
        top: 5px;
        bottom: 0;
        left: 0;
    }

    .mobl-menu-a {
        height: 60px;
        width: 60px;
        display: flex;
        flex-direction: column;
        padding: 18px 15px;
        /* background: #b4975a; */
        justify-content: center;
    }

    .mobl-hamburger {
        display: flex;
        position: absolute;
        top: 4px;
        right: 0;
        bottom: 0;
    }

    .mobl-menu-a > span {
        width: 100%;
        height: 3px;
        background: #b4975a;
        border-radius: 90px;
        margin-bottom: 4px;
    }

        .mobl-menu-a > span:nth-child(2) {
            width: 80%;
        }

        .mobl-menu-a > span:nth-child(3) {
            width: 60%;
            margin: 0;
        }

    .mobl-logo img {
        height: 100%;
        height: 38px;
        width: 137px;
    }

    .mobl-search-btn-container svg {
        height: 60px;
        width: 60px;
        fill: #717171;
        padding: 18px;
    }

    .mobl-overlay {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.8);
        /* backdrop-filter: blur(3px); */
        z-index: 100;
        transition: .3s;
        opacity: 0;
        visibility: hidden;
    }

    .mobl-card {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        background: #65634e;
        z-index: 101;
        width: 300px;
        border-left: 6px solid #ffac00;
        box-shadow: 0 0 23px rgba(0, 0, 0, 0.341);
        transform: translateX(100%);
        visibility: hidden;
        transition: .3s;
        overflow: auto;
    }

    .mobl-overflow-hidden {
        overflow: hidden;
    }

    .mobl-close-btn svg {
        height: 60px;
        width: 60px;
        fill: white;
        color: white;
        padding: 18px;
    }

    .mobl-close {
        display: flex;
    }

    .mobl-main-item {
        display: block;
        color: white !important;
        padding: 12px 20px;
        padding-left: 40px;
        position: relative;
        /* border-bottom: 1px solid #ffffff14; */
        background: rgba(255, 255, 255, 0.039);
        font-size: 14px;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.078);
    }

        .mobl-main-item:before {
            content: "";
            position: absolute;
            top: calc(50% - 7px);
            left: 16px;
            height: 10px;
            width: 10px;
            border: 1px solid transparent;
            border-bottom-color: white;
            border-right-color: white;
            transform: rotate(45deg);
            transition: .3s;
        }

    .mobl-extend-item-a {
        display: block;
        color: white !important;
        padding: 12px 14px;
        background: #ffffff14;
        border-bottom: 1px solid rgba(255, 255, 255, 0.102);
        border-right: 4px solid #5d5b48;
    }

    .acc-sub.open > .mobl-main-item:before {
        transform: rotate(225deg);
        margin-top: 5px;
    }

    .mobl-main-menu > div:not(.acc-sub) > a:before {
        display: none;
    }

    .mobl-main-menu > div {
        transition: .2s;
        transform: scaleY(0);
        opacity: 0;
        transform-origin: top;
        will-change: transform;
    }

    .mobl-main-menu {
        margin: 30px 0;
    }

    .mobl.menu-opened .mobl-overlay, .mobl.menu-opened .mobl-card {
        transform: inherit;
        opacity: 1;
        visibility: visible;
    }

    .mobl.menu-opened .mobl-main-menu > div {
        transform: inherit;
        opacity: 1;
    }

    .mobl-main-menu > div:nth-child(1) {
        transition-delay: .4s;
    }

    .mobl-main-menu > div:nth-child(2) {
        transition-delay: .5s;
    }

    .mobl-main-menu > div:nth-child(3) {
        transition-delay: .6s;
    }

    .mobl-main-menu > div:nth-child(4) {
        transition-delay: .7s;
    }

    .mobl-main-menu > div:nth-child(5) {
        transition-delay: .8s;
    }

    .mobl-main-menu > div:nth-child(6) {
        transition-delay: .9s;
    }

    .mobl-main-menu > div:nth-child(7) {
        transition-delay: 1s;
    }

    .mobl-main-menu > div:nth-child(8) {
        transition-delay: 1.1s;
    }

    .mobl-main-menu > div:nth-child(9) {
        transition-delay: 1.2s;
    }

    .mobl-main-menu > div:nth-child(10) {
        transition-delay: 1.3s;
    }

    .mobl-main-menu > div:nth-child(1) {
        transition-delay: .4s;
    }

    .mobl:not(.menu-opened) .mobl-main-menu > div {
        transition-delay: .3s !important;
    }

    body {
        margin-top: 60px;
    }
}

/* Desktop Responsive */

@media (max-width: 1500px) {
    .lg-container {
        width: 97%;
    }

    .md-container {
        width: 91%;
    }

    .slider-content {
        padding: 0 80px;
        padding-left: 0;
        width: 70%;
    }

    .slider-ttl {
        font-size: 28px;
    }

    .q-soc-item {
        width: 47px;
        height: 47px;
    }

        .q-soc-item svg {
            padding: 10px;
        }

    .slider-content-container {
        bottom: 122px;
    }
}

/* Mobile Responsive */

.event-slider.owl-carousel .owl-stage-outer {
    overflow: visible;
}

@media (max-width: 1199px) {

    .search-card-container {
        padding: 15px;
    }

    .search-close-btn {
        top: 15px;
        left: 15px;
    }

    .lg-container, .md-container {
        width: 100%;
    }

    .home-boxes-section {
        transform: inherit;
    }

    .slider-content-container {
        position: relative;
        background: #b4975a;
        bottom: 0;
        z-index: 2;
    }

    .slider-content {
        width: 100%;
        /* text-align: center; */
        padding: 10px 0;
    }

    .slider-ttl {
        font-size: 14px;
        margin-bottom: 4px;
    }

    .owl-nav {
        display: none;
    }

    .slider-desc {
        font-size: 12px;
    }

    .slider-btn-container {
        padding: 0;
        margin-top: 10px;
    }

    .home-slider .q-btn {
        background: white;
        color: #b4975a !important;
        font-weight: bold;
        font-size: 16px;
    }

    .q-btn:hover {
        color: white !important;
    }

    .slider-bg {
        padding-bottom: 50%;
    }

    .home-slider .owl-dot span, .q-dots .owl-dot span {
        display: flex;
        height: 20px;
        width: 20px;
        background: #e7e7e7;
        border-radius: 100%;
        margin-right: 10px;
        transition: .2s;
    }

    .home-slider .owl-dots, .q-dots .owl-dots {
        display: flex;
        justify-content: center;
        margin-top: 24px;
        margin-bottom: 11px;
    }

        .home-slider .owl-dots > button:first-child span, .q-dots .owl-dots > button:first-child span {
            margin: 0;
        }

    .home-slider .owl-dot.active span, .q-dots .owl-dot.active span {
        background: #b4975a;
        transform: scale(1.15);
    }

    /* home boxes */

    .home-box-btn {
        display: none;
    }

    .home-box {
        padding: 10px;
        /* margin-bottom: 15px; */
        /* height: calc(100% - 15px); */
        /* border: 1px solid #b4975a; */
        background: #fafafa;
    }

    .home-box-icon {
        width: 60px;
        height: 60px;
    }

        .home-box-icon svg {
            padding: 19px;
        }

    .home-box-ttl {
        margin-top: 10px;
        font-size: 12px;
    }

    .home-boxes-row {
        margin: 20px -10px;
    }

        .home-boxes-row > div {
            padding: 5px !important;
        }

    .home-box:before {
        display: none;
    }

    .charman-message-section {
        margin-top: 50px;
    }

    .charman-h1 {
        font-size: 16px;
    }

    .charman-message-content {
        margin-top: 30px;
    }

    .chairman-h2 {
        font-size: 16px;
        margin: 10px 0;
    }

    .chairman-p {
        font-size: 14px;
    }

    .mobl-no-delay {
        transition-delay: 0s !important;
    }

    .training-h1 {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .training-content {
        padding: 35px 0;
        text-align: center;
    }

    .training-section:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.212);
    }

    .training-section > div {
        position: relative;
        z-index: 2;
    }

    .ttl {
        font-size: 20px;
        padding-bottom: 20px;
    }

        .ttl:before, .aos-init.aos-animate .ttl:before {
            width: 120px;
            right: calc(50% - 60px);
        }

    .program-box {
        padding: 15px;
        margin-bottom: 15px;
        height: calc(100% - 15px);
    }

    .program-btn-container {
        position: relative;
        margin-top: 10px;
        bottom: 0;
    }

    .program-icon svg {
        width: 61px;
        height: 50px;
        margin-right: 0;
    }

    .program-ttl {
        margin: 10px 0;
        font-size: 16px;
    }

    .program-desc {
        font-size: 14px;
    }

    .ttl-btns-container {
        position: static;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: 8px;
    }

    .ttl-btn:last-child {
        margin: 0;
    }

    .event-content {
        padding: 15px;
    }

    .event-title {
        font-size: 14px;
        height: 42px;
    }

    .event-bg {
        padding-top: 76%;
    }

    .event-date {
        font-size: 14px;
    }

        .event-date img {
            width: 16px !important;
            height: 16px;
        }

    .footer-extend {
        display: none;
        /* background: #b4975a; */
        padding: 15px;
    }

    .footer-style {
        height: 80px;
        opacity: .1 !important;
    }

    .footer-ttl {
        font-size: 16px;
        margin: 0;
        padding: 11px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.329);
        position: relative;
        transition: .3s;
    }

    .footer-top {
        padding: 30px 0;
    }

    .footer-ttl:before {
        content: "";
        position: absolute;
        top: calc(50% - 7px);
        height: 10px;
        width: 10px;
        transform: rotate(45deg);
        border: 1px solid transparent;
        border-bottom-color: white;
        border-right-color: white;
        left: 3px;
        transition: .3s;
    }

    .footer-open .footer-ttl:before {
        transform: rotate(225deg);
        margin-top: 5px;
        left: 15px;
    }

    .footer-open .footer-ttl {
        /* background: #b4975a; */
        padding: 11px 15px;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    .footer-acc-block.footer-open {
        background: rgba(255, 255, 255, 0.078);
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.071);
    }

    .footer-acc-block {
        transition: .3s;
    }
}

@media(min-width: 1200px) {
    .footer-extend {
        display: block !important
    }
}

.mobl-top:before {
    width: 100%;
    background-size: 70%;
    background-position: 370%;
    transition: 3s;
    animation: MoblMoveBackground 6s infinite;
}

@keyframes MoblMoveBackground {
    to {
        background-position: -145%;
    }
}

/* Subpage banner */

.subpage-bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

    .subpage-bg:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent);
        height: 56%;
    }

.sub-banner {
    position: relative;
}

.sub-banner-container {
    padding-top: 16vw;
    position: relative;
    z-index: 2;
    padding-bottom: 50px;
}

.sub-banner-content {
    color: white;
}

.sub-banner-ttl {
    font-size: 34px;
    font-weight: bold;
}

.sub-banner-breadcrumb {
    overflow: auto;
}

    .sub-banner-breadcrumb::-webkit-scrollbar {
        display: none;
    }

.q-bread {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    white-space: nowrap;
}

    .q-bread li:not(:first-child) {
        color: white;
        display: flex;
        position: relative;
        padding-left: 44px;
    }

        .q-bread li:not(:first-child):after {
            content: "";
            position: absolute;
            top: 9px;
            left: 20px;
            height: 10px;
            width: 10px;
            transform: rotate(45deg);
            border-bottom: 1px solid white;
            border-left: 1px solid white;
        }

    .q-bread a {
        color: white;
        display: block;
        border-bottom: 2px dotted transparent;
    }

        .q-bread a:hover {
            border-bottom-color: white;
        }

    .q-bread > li:first-child span {
        font-weight: bold;
    }

.py-sec {
    padding: 50px 0;
}

.box {
    display: block;
    background: #f9f8f3;
    color: #5f717b;
    font-weight: bold;
    padding: 30px;
    border-right: 5px solid #b4975b;
}

@media (max-width: 991px) {
    .box {
        padding: 15px;
    }

    .sub-banner-ttl {
        font-size: 19px;
        margin-bottom: 5px;
    }

    .q-bread {
        font-size: 13px;
    }

    .sub-banner-container {
        padding-top: 31vw;
        position: relative;
        z-index: 2;
        padding-bottom: 14px;
    }

    .q-bread li:not(:first-child):after {
        height: 7px;
        width: 7px;
        top: 7px;
    }
}

/* Page Under Construction */

.page-under-construction svg {
    width: 18px;
    fill: #848484;
    /* margin-bottom: 30px; */
}

.page-under-construction {
    text-align: center;
    padding: 40px 15px;
    /* max-width: 400px; */
    /* margin: auto; */
}

    .page-under-construction h3 {
        text-transform: uppercase;
        color: #b4975a;
        font-size: 20px;
        font-weight: bold;
    }

    .page-under-construction h4 {
        font-size: 14px;
        color: #636363;
    }

.contr-icon {
    display: block;
    height: 90px;
    width: 90px;
    margin: auto;
    border-radius: 100%;
    border: 2px solid #9b9b9b;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    background: #fcfcfc;
    box-shadow: 0 0 42px rgba(0, 0, 0, 0.22);
}

/* FAQ */

.q-faq > .acc-sub > a {
    display: block;
    font-weight: bold;
    background: #e0c9aa;
    padding: 15px;
    padding-left: 40px;
    margin-bottom: 15px;
    border: 2px solid #ececec;
    position: relative;
    cursor: pointer;
    transition: .2s;
    border-right: 5px solid transparent;
}

.q-faq > .acc-sub > .acc-extend {
    background: #fafafa;
    padding: 15px;
    margin-bottom: 15px;
    border: 2px solid #ececec;
}

.q-faq > .acc-sub > a:before {
    content: "";
    position: absolute;
    top: calc(50% - 11px);
    left: 18px;
    height: 15px;
    width: 15px;
    transform: rotate(45deg);
    border-bottom: 2px solid #65624f;
    border-right: 2px solid #65624f;
    transition: .3s;
}

.q-faq > .acc-sub.open > a:before {
    transform: rotate(225deg);
    margin-top: 8px;
}

.q-faq > .acc-sub > a:hover, .q-faq > .acc-sub.open > a {
    background: #dac09d;
    border-right-color: #b49873;
}

/* Contact */

.mb-30 {
    margin-bottom: 30px;
}

.q-bg-info {
    position: relative;
    color: #fff;
    background-position: center;
    background-size: cover;
    padding: 50px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border-radius: 10px; */
    overflow: hidden;
    /* box-shadow: 0 13px 30px 0 rgba(0,0,0,.22); */
}

    .q-bg-info:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(180, 151, 90, 0.68);
        z-index: 1;
    }

    .q-bg-info > * {
        position: relative;
        z-index: 2;
    }

.p-icon svg, .p-icon img {
    position: absolute;
    fill: white;
    top: 0;
    right: 0;
    bottom: 0;
    height: 30px;
    padding: 4px;
    width: 30px;
}

.p-icon {
    position: relative;
    padding-right: 55px;
    font-size: 20px;
}

    .p-icon a {
        color: inherit;
        text-decoration: underline;
    }

.q-contact-info > *:last-child {
    margin: 0;
}

.q-contact-info > * {
    margin-bottom: 20px;
}

.location-container {
    display: flex;
}

    .location-container iframe {
        width: 100%;
        display: block;
        height: 420px;
    }

@media(max-width: 991px) {
    .q-bg-info {
        padding: 20px;
    }

        .q-bg-info h3 {
            font-size: 22px;
        }

        .q-bg-info p {
            font-size: 16px;
            padding-right: 41px;
        }

        .q-bg-info svg {
            height: 22px;
            padding: 0;
        }

        .q-bg-info h5 {
            font-size: 18px;
        }
}

/* Listing Template */

.list-bg {
    padding-top: 66%;
    transition: .3s;
    opacity: .9;
    background-position: center;
    background-size: cover;
}

.list-box {
    display: block;
    position: relative;
    transition: .3s;
    cursor: pointer;
}

.list-txt {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    color: white;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.741), transparent);
    padding: 20px;
    font-size: 20px;
    padding-top: 50px;
    font-weight: bold;
}

.list-image {
    overflow: hidden;
}

.list-box:hover .list-bg {
    transform: scale(1.05);
    opacity: 1;
}

.list-box:hover {
    box-shadow: 0 0 0 10px white, 0 0 0 12px #b4975a, 0 5px 40px 10px rgba(0, 0, 0, 0.149);
}

.list-desc {
    font-weight: normal;
    font-size: 16px;
    max-height: 0;
    overflow: hidden;
    transition: .3s;
    opacity: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.list-box:hover .list-desc {
    max-height: 72px;
    opacity: 1;
}

/* Photo Gallery */

.list-data {
    display: flex;
    position: absolute;
    top: 20px;
    left: 20px;
    background: #b4975a;
    color: white;
    padding: 7px 19px;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    border-radius: 90px;
    font-size: 14px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.388);
}

    .list-data img {
        height: 18px;
        width: 18px;
        margin-left: 7px;
    }

.popup-container {
    position: relative;
    z-index: 9999;
    width: 100%;
    background: white;
    max-width: 900px;
    margin: auto;
    box-shadow: 0 7px 44px rgba(0, 0, 0, 0.09);
    transform: translateY(150px);
    opacity: 0;
    transition: .3s;
    visibility: hidden;
}

.q-popup {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    visibility: hidden;
}

.popup-head {
    display: flex;
    /* justify-content: flex-end; */
    flex-direction: row-reverse;
    padding: 7px;
    border-bottom: 1px solid #e9e9e9;
}

.popup-btn {
    display: flex;
}

    .popup-btn svg {
        height: 45px;
        width: 45px;
        fill: #818181;
        color: #818181;
        padding: 10px;
        border-radius: 5px;
    }

    .popup-btn:hover svg, .full-screen .fullscreen-btn svg {
        background: #65624f;
        color: white;
        fill: white;
    }

.photo-gallery-popup-bg {
    padding-top: 52%;
    background: #f9f9f9;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.photo-gallery-popup {
    position: relative;
}

.photo-gallery-popup-info {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.74);
    color: #404040;
    text-align: center;
    padding: 15px;
    font-weight: bold;
}

.q-popup.is-opened .popup-container {
    transform: inherit;
    opacity: 1;
    visibility: visible;
}

.q-popup.is-opened {
    visibility: visible;
}

.arrow-prev, .arrow-next {
    height: 80px;
    width: 80px;
    position: absolute;
    top: calc(50% - 40px);
    right: -100px;
    background: rgba(0, 0, 0, 0.231);
    cursor: pointer;
    transition: .3s;
}

    .arrow-prev span, .arrow-next span {
        position: absolute;
        height: 35px;
        width: 35px;
        border-top: 2px solid white;
        border-right: 2px solid white;
        transform: rotate(45deg);
        top: calc(50% - 17px);
        left: calc(50% - 28px);
    }

    .arrow-prev:hover, .arrow-next:hover {
        background: #525252;
    }

.arrow-next {
    right: inherit;
    left: -100px;
    transform: scaleX(-1);
}

.full-screen .popup-body {
    height: calc(100vh - 60px);
    max-height: inherit;
    /* background: red; */
}

.full-screen .arrow-prev {
    right: 0;
}

.full-screen .arrow-next {
    left: 0;
}

.disabled {
    pointer-events: none;
    opacity: .3;
    cursor: not-allowed;
}

.q-popup.full-screen {
    padding: 0;
}

    .q-popup.full-screen .popup-container {
        max-width: 100%;
        height: 100%;
    }

.popup-body {
    max-height: calc(100vh - 100px);
    overflow: auto;
}

.full-screen .popup-body {
    height: calc(100vh - 60px);
    max-height: inherit;
}

.full-screen .photo-gallery-popup-bg {
    height: calc(100vh - 60px);
}

@media (max-width: 1199px) {
    .arrow-prev, .arrow-next {
        height: 44px;
        width: 50%;
        right: 0;
        position: relative;
        top: 0;
        margin: 10px;
    }

    .arrow-next {
        right: inherit;
        left: 0;
    }

    .arrows {
        display: flex;
        justify-content: space-between;
        /* padding: 10px; */
    }

    .arrow-prev span, .arrow-next span {
        transform: rotate(45deg) scale(.5);
    }
}

/* 404 Page */

.template404-container {
    height: calc(100vh - 400px);
    display: flex;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 500px
}

.template404 h1 {
    font-family: sans-serif;
    font-weight: bold;
    color: #65634e;
    font-size: 181px;
    margin: 0;
    text-shadow: 6px 4px 6px #aeaeae;
    opacity: .4;
    line-height: 126px;
}

.template404 h2 {
    color: #505050;
    background: rgba(255, 255, 255, 0.569);
    color: #b4975a;
    border-radius: 90px;
    font-size: 18px;
    padding: 16px 42px;
    margin-top: -77px;
    /* opacity: .6; */
    font-weight: bold;
    margin-bottom: 60px;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.18);
    position: relative;
    z-index: 2;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.141);
}

.template404 p {
    color: #737373
}

.template404 {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Search */

.input-box {
    display: flex;
    width: 100%;
    max-width: 600px;
}

@media (max-width: 482px){
    .input-box {
        display: block;
    }
}

.input-box-container {
    flex: 1 1 auto;
    padding-left: 30px;
}

@media (max-width: 482px) {
    .input-box-container {
        margin-bottom: 10px;
        padding-left: 0;
    }
}

.input-box-btn .q-btn {
    height: 100%;
}

.search-block {
    margin-bottom: 30px;
    /* padding-bottom: 20px; */
    /* border-bottom: 1px solid #c3c3c3; */
}

.search-box-ttl {
    color: #b4975a;
    font-weight: bold;
    line-height: 15px;
    margin-bottom: 4px;
}

.search-abstract {
    color: grey;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 47px;
}

.search-link {
    direction: ltr;
    color: green;
    line-height: 18px;
    margin-top: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.search-box {
    border-right: 5px solid #e5e5e5;
    display: block;
    padding-right: 20px;
    opacity: .9;
    padding: 20px;
    box-shadow: 0 5px 19px rgba(0, 0, 0, 0.11);
}

    .search-box:hover {
        opacity: 1;
        border-color: #b4975a;
        /* text-decoration: underline; */
    }

        .search-box:hover div:not(.search-link) {
            text-decoration: underline;
        }

/* Calender */

.flatpickr-calendar {
    position: absolute;
    background: white;
    box-shadow: 1px 34px 30px rgba(0, 0, 0, 0.122);
    width: 100%;
    max-width: 360px;
    border-radius: 3px;
    overflow: hidden;
    z-index: 9;
    opacity: 0;
    transition: .3s;
    visibility: hidden;
}

.flatpickr-months {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.102);
}

.flatpickr-prev-month, .flatpickr-next-month {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
}

    .flatpickr-prev-month svg, .flatpickr-next-month svg {
        height: 100%;
        width: 100%;
        padding: 18px;
    }

.flatpickr-current-month {
    display: flex;
    position: relative;
}

    .flatpickr-current-month select, .flatpickr-current-month input {
        border: 0;
        appearance: none;
        outline: navajowhite;
        font-size: 15px;
        /* width: 100px; */
        text-align: center;
        /* padding-left: 40px; */
        width: 104px;
        padding: 0px;
        height: 50px;
        /* pointer-events: none; */
    }

/* Chrome, Safari, Edge, Opera */
.flatpickr-calendar input::-webkit-outer-spin-button,
.flatpickr-calendar input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.numInputWrapper {
    position: relative;
}

    .numInputWrapper span {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        /* background: red; */
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .numInputWrapper span:before {
            content: "+";
            font-size: 21px;
        }

        .numInputWrapper span.arrowDown {
            top: inherit;
            bottom: 0;
            transform: scaleY(-1);
            /* background: blue; */
        }

        .numInputWrapper span:hover {
            background: #efefef;
        }

.flatpickr-weekdaycontainer {
    display: flex;
}

    .flatpickr-weekdaycontainer span {
        width: 14.285%;
        text-align: center;
        padding: 9px 0;
        background: #f7f7f7;
        font-size: 14px;
    }

.dayContainer {
    display: flex;
    flex-wrap: wrap;
}

    .dayContainer span {
        width: 14.285%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        height: 51px;
        user-select: none;
        border-radius: 5px;
        cursor: pointer;
    }

.flatpickr-next-month {
    left: inherit;
    right: 0;
}

    .flatpickr-prev-month:hover, .flatpickr-next-month:hover {
        background: #efefef;
    }

.flatpickr-current-month select {
    width: 140px;
    padding-left: 0px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIiBmaWxsPSIjYTNhNGE2Ij48cGF0aCBkPSJNMzEwLjYgMjQ2LjZsLTEyNy4xIDEyOEMxNzYuNCAzODAuOSAxNjguMiAzODQgMTYwIDM4NHMtMTYuMzgtMy4xMjUtMjIuNjMtOS4zNzVsLTEyNy4xLTEyOEMuMjI0NCAyMzcuNS0yLjUxNiAyMjMuNyAyLjQzOCAyMTEuOFMxOS4wNyAxOTIgMzIgMTkyaDI1NS4xYzEyLjk0IDAgMjQuNjIgNy43ODEgMjkuNTggMTkuNzVTMzE5LjggMjM3LjUgMzEwLjYgMjQ2LjZ6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-size: 9px;
    background-position: 2px 16px;
}

.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
    opacity: .4
}

span.flatpickr-day.selected {
    background: #b4975a;
    color: white;
}

.dayContainer span:not(.selected):hover {
    background: #e1e1e1;
}

.numInputWrapper span.arrowDown:before {
    content: "-";
}

.flatpickr-calendar.open {
    opacity: 1;
    visibility: visible;
}

.flatpickr-calendar:not([class*=arrow]) {
    display: none;
}

.filter-box {
    display: flex;
}

.filter-box-input {
    flex: 1 1 auto;
    padding-left: 30px;
}

.filter-btn a {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* filter boxes */

.news-listing-bg {
    padding-top: 57.33%;
    background-position: center;
    background-size: cover;
    opacity: .9;
    transition: .3s;
}

.news-listing-box {
    display: flex;
    border: 1px solid #e8e8e8;
    transition: .3s;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    flex-direction: column;
}

.news-listing-abstract {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 72px;
}

.news-listing-date-container {
    position: absolute;
    top: -48px;
    left: 20px;
}

.news-listing-info {
    padding: 20px;
    color: #010119;
    position: relative;
    padding-top: 50px;
    flex: 1 1 auto;
    padding-bottom: 63px;
}

.news-listing-ttl {
    font-size: 20px;
    font-weight: bold;
}

.news-listing-date-box {
    display: flex;
    flex-direction: column;
    background: linear-gradient(225deg, #6b674e, #b4975b);
    color: white;
    padding: 12px;
    border-radius: 5px;
    min-width: 120px;
    text-align: center;
}

.news-listing-date-top {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 26px;
    font-weight: bold;
}

    .news-listing-date-top svg {
        height: 22px;
        width: 22px;
        margin-left: 9px;
    }

.news-read-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: #646351;
    fill: #ab9870;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

    .news-read-more svg {
        height: 25px;
        width: 26px;
        margin-right: 20px;
    }

.news-listing-box:hover {
    box-shadow: 0 0 0 10px white, 0 0 0 12px #b4975a, 0 5px 40px 10px rgba(0, 0, 0, 0.15);
}

.news-listing-image {
    overflow: hidden;
}

.news-listing-box:hover .news-listing-bg {
    opacity: 1;
    transform: scale(1.05);
}

.news-listing-info:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #f1f5fe;
    z-index: -1;
    transform: scaleY(0);
    transition: .3s;
}

.news-listing-box:hover .news-listing-info:before {
    transform: inherit;
}

/* News Article */

.news-article-bg {
    padding-top: 40%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    min-height: 300px;
    background-color: #f4f1ea;
    border-radius: 5px;
}

.news-article-image {
    position: relative;
    margin-bottom: 75px;
    filter: drop-shadow(10px 10px 6px rgba(0, 0, 0, 0.1));
}

    .news-article-image .news-listing-date-container {
        top: inherit;
        left: inherit;
        bottom: -41px;
        right: 20px;
    }

.news-article-title {
    font-weight: bold;
    font-size: 23px;
    margin-bottom: 30px;
}

.news-navbar {
    padding: 0;
    margin: 0;
    display: flex;
    list-style: none;
    justify-content: space-between;
    margin-top: 50px;
    align-items: center;
}

.news-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 15px;
    transition: .2s;
}

    .news-nav svg {
        fill: #65634e;
        height: 30px;
        width: 30px;
    }

.news-nav-label {
    /* display: flex; */
    flex-direction: column;
    padding-right: 20px;
    max-width: 400px;
    width: 100%;
}

.news-nav-highlight {
    color: #b4975a;
    font-weight: bold;
}

.news-nav-ttl {
    color: grey;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

a.news-nav.news-next {
    flex-direction: row-reverse;
    text-align: left;
}

.news-nav.news-next .news-nav-label {
    padding: 0;
    padding-left: 20px;
}

.news-nav-middle svg {
    height: 100%;
    width: 100%;
    color: #65634e;
    padding: 17px;
}

.news-nav-middle {
    display: flex;
    height: 55px;
    width: 55px;
    background: #f3eee4;
    border-radius: 100%;
    margin: 15px;
    position: relative;
    transition: .3s;
}

.news-navbar > li:not(:nth-child(2)) {
    flex: 1 1;
    width: calc(50% - 48px);
}

.news-nav:hover {
    background: #f1f5fe;
}

@media (max-width: 1199px) {
    .news-nav-middle {
        margin: 10px;
        height: 45px;
        width: 45px;
    }

        .news-nav-middle svg {
            padding: 12px;
        }

    span.news-nav-ttl {
        display: none;
    }
}

.news-nav-middle span {
    position: absolute;
    top: -46px;
    left: calc(50% - 40px);
    color: white;
    background: #65634e;
    display: block;
    padding: 6px 15px;
    border-radius: 5px;
    width: 80px;
    text-align: center;
    transform: scale(.5);
    transform-origin: bottom;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

    .news-nav-middle span:before {
        content: "";
        position: absolute;
        height: 10px;
        width: 10px;
        background: #65634e;
        transform: rotate(45deg);
        bottom: 0;
        transform-origin: left;
        left: calc(50% - 5px);
    }

.news-nav-middle:hover span {
    transform: inherit;
    visibility: visible;
    opacity: 1;
}

.news-nav-middle:hover {
    background: #dfd5c3;
}

/* Sub page list */

.subpage-article ul {
    padding: 0;
    list-style: none;
}

    .subpage-article ul > li {
        position: relative;
        padding-right: 35px;
    }

        .subpage-article ul > li:before {
            content: "";
            position: absolute;
            height: 7px;
            width: 7px;
            background: #b4975a;
            top: 9px;
            right: 4px;
            box-shadow: 0 0 0 2px white, 0 0 0 3px #b4975a;
        }

.subpage-article ol {
    padding: 0;
    list-style: none;
    counter-reset: section;
}

    .subpage-article ol > li {
        position: relative;
        padding-right: 35px;
        margin-bottom: 5px;
    }

        .subpage-article ol > li:before {
            content: counter(section);
            position: absolute;
            counter-increment: section;
            right: 0;
            top: 2px;
            color: #b4975a;
            font-weight: bold;
            font-size: 12px;
            width: 20px;
            height: 21px;
            background: rgba(0, 0, 0, 0.051);
            border-radius: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.141);
        }

/* q table */

.q-table {
    width: 100%;
    background: white;
    /* box-shadow: inset 0 0 36px transparent; */
    /* margin: 20px; */
}

    .q-table td, .q-table th {
        border: 1px solid #dedede;
        padding: .75rem;
        box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.039);
        /* font-weight: bold; */
    }

    .q-table thead {
        background: #65634e;
        color: white;
    }

        .q-table thead td, .q-table thead th {
            text-align: center;
            border: 1px solid #7c7a68;
        }

        .q-table thead th {
            background: #4c4b3c;
        }

    .q-table tbody tr:hover td {
        background: whitesmoke;
        color: #b4975a;
    }

.loader {
    position: relative;
    height: 400px;
    overflow: hidden;
}

    .loader:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: white;
        z-index: 9;
    }

    .loader:after {
        content: "";
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 50px);
        height: 100px;
        width: 100px;
        border: 7px solid #e6e6e6;
        border-radius: 100%;
        z-index: 10;
        border-top-color: #b4975a;
        box-shadow: 0 0 33px #0000001f;
        animation: rotate 1s linear infinite;
    }

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

.no-event-available {
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 100px 0;
    background: #f9f9f9;
}

.no-events-ttl {
    color: #b4975a;
    font-weight: bold;
    font-size: 26px;
}

/* BOD */

.bod-bg br {
    display: none;
}

.bod-bg {
    padding-top: 100%;
    background-size: cover;
    border: 3px solid #e0c9aa;
}

.bod-box {
    padding: 30px;
    background: #f9f9f9;
    margin-bottom: 30px;
    height: calc(100% - 30px);
    border: 1px solid #dadadc;
}

.bod-name {
    color: #b4975a;
    font-weight: bold;
    margin-top: 15px;
}

.bod-ttl {
    font-weight: bold;
}

/* News Listing show old and upcoming */

.news-filter-upcoming-btns .ttl-btns-container {
    position: static;
    margin-bottom: 30px;
    justify-content: center;
}

.ttl-btn.active:before {
    top: -160%;
}

.ttl-btn.active {
    box-shadow: 0 0 0 4px #e7ddca;
    color: white;
}

.news-listing-ttl:first-child {
    margin-top: -35px;
}

/* Loader */

[data-loader] > div:nth-child(6) ~ div {
    display: none;
}

.loader-show-more-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 30px;
}

/* Form submitted */

.form-submitted {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 0 70px #ececec;
    padding: 30px 10px;
}

    .form-submitted h1 {
        font-size: 25px;
        font-weight: bold;
        color: #b4975a;
    }

    .form-submitted h2 {
        font-size: 18px;
        margin: 0;
    }

.filter-btn {
    display: flex;
    justify-content: space-between;
}

    .filter-btn a:nth-child(2) {
        margin-right: 15px;
    }

@media (max-width: 991px) {
    .filter-box {
        flex-direction: column;
    }

    .filter-box-input {
        padding: 0;
        width: 100%;
    }

        .filter-box-input .q-control {
            margin-bottom: 15px;
        }

    .filter-btn a {
        height: 50px;
    }
}

select.q-control {
    padding: 0 13px;
    height: 52px;
}

/* File Browse */

.q-custom-file-label {
    border: 1px solid #d6d6d6;
    padding: 13px;
    width: 100%;
    background: whitesmoke;
    outline: 0 !important;
    transition: .2s;
    resize: none;
    margin: 0;
    padding-left: 82px;
}

.q-custom-file-input {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    visibility: hidden;
}

.q-custom-file {
    position: relative;
}

.q-custom-file-label:after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 16px;
    background: #b4975a;
    color: white;
}


/* Adding Video to the slider */

.home-video, .home-bg {
    padding-bottom: 35%;
    overflow: hidden;
    position: relative;
    background-position: center;
    background-size: cover
}

.home-tag {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.show-1 > .slider-item:not(:first-child) {
    display: none
}

.show-1 {
    display: block
}

.book-list-container {
    width: 100%;
    margin: 30px 0;
    padding: 0;
}

.book-card {
    display: flex;
    flex-direction: row;
    background: whitesmoke;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    align-items: flex-start;
    transition: box-shadow 0.2s;
    height: 100%; 
}

    .book-card:hover {
        box-shadow: 0 0 0 10px white, 0 0 0 12px #b4975a, 0 5px 40px 10px rgba(0, 0, 0, 0.15);
    }

.book-image {
    flex: 0 0 120px;
    width: 120px;
    height: 170px;
    object-fit: cover;
    background: #ececec;
    border-right: 1px solid #eee;
    margin: 12px;
    display: block;
}

.book-details {
    flex: 1 1 0%;
    padding: 1rem 1.25rem 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.book-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #65634e;
    line-height: 1.4;
}

.book-info {
    margin-bottom: 0.3rem;
    font-size: 1rem;
}

    .book-info span {
        color: #616161;
        font-weight: 500;
        margin-left: 0.3em;
    }

@media (max-width: 992px) {
    .book-list-container .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 600px) {
    .book-list-container .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .book-card {
        flex-direction: row;
        align-items: flex-start;
    }

    .book-image {
        width: 90px;
        height: 120px;
        border-radius: 0 8px 8px 0;
    }

    .book-details {
        padding: 0.7rem 1rem 0.7rem 0.5rem;
    }
}

.advancedSearch-select {
    margin-top: 10px;
    max-width: 600px;
}

.center-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.input-box, .advancedSearch-select {
    width: 100%;
    max-width: 600px;
}

.page-btn {
    color: #6a685c;
    font-size: 16px;
    border: 1px solid #a39882;
    text-align: center;
    padding: 10px;
    border-radius: 90px;
}

.book-cover {

    padding: 30px 20px;
}

    .book-cover img {
        width: 180px;
        height: 250px;
        object-fit: cover;
        border-radius: 5px;
        background: #e4e4e4;
    }

.book-info-view {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    padding: 25px 20px 20px 20px;
    flex: 1 1 400px;
}

    .book-info-view h2 {
        margin-top: 0;
        margin-bottom: 18px;
        color: #3b3b3b;
        font-size: 1.3rem;
        font-weight: 600;
    }

.info-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.info-group {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    margin-bottom: 8px;
}

.info-label {
    font-size: 15px;
    color: #555;
    margin-bottom: 3px;
    font-weight: 500;
}

.info-value {
    font-size: 16px;
    color: #222;
    background: #f8f8f8;
    border-radius: 4px;
    padding: 6px 10px;
    border: 1px solid #e4e4e4;
    min-height: 32px;
    display: flex;
    align-items: center;
    word-break: break-word;
}

.info-group.full-width {
    flex: 1 1 100%;
}

@media (max-width: 900px) {
    .container {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 22px;
    }

    .book-cover, .book-info-view {
        max-width: 100%;
    }
}