@import url('https://fonts.googleapis.com/css?family=Lato:300,400,600,700,900');

/* MuseoSans */
@font-face {
	font-family: 'MuseoSans';
	src: url('./fontstyle/MuseoSans/MuseoSans-100.otf');
    font-weight: 100;
}

@font-face {
	font-family: 'MuseoSans';
	src: url('./fontstyle/MuseoSans/MuseoSans-300.otf');
    font-weight: 300;
}

@font-face {
	font-family: 'MuseoSans';
	src: url('./fontstyle/MuseoSans/MuseoSans-500.otf');
    font-weight: 500;
}

@font-face {
	font-family: 'MuseoSans';
	src: url('./fontstyle/MuseoSans/MuseoSans-700.otf');
    font-weight: 700;
}

@font-face {
	font-family: 'MuseoSans';
	src: url('./fontstyle/MuseoSans/MuseoSans-900.otf');
    font-weight: 900;
}

/* Temeraire */

@font-face {
	font-family: 'Temeraire';
	src: url('./fontstyle/Temeraire/Temeraire-Regular.ttf');
    font-weight: 400;
}

@font-face {
	font-family: 'Temeraire';
	src: url('./fontstyle/Temeraire/Temeraire-Bold.ttf');
    font-weight: 700;
}

@font-face {
	font-family: 'Temeraire';
	src: url('./fontstyle/Temeraire/Temeraire-DisplayBlack.ttf');
    font-weight: 900;
}

.TemeraireFont {
    font-family: 'Temeraire';
}


html {
    scroll-behavior: smooth;
}
body, footer {
    font-family: 'MuseoSans';
    /* min-height: 110vh; */
    background-color: #ffffff;
    height: auto;
}

.site--container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
    /* overflow-x: hidden; */
}

.extralight {
    font-weight: 200 !important;
}

.light {
    font-weight: 100 !important;
}

.regular {
    font-weight: 300 !important;
}

.medium {
    font-weight: 500 !important;
}

.semibold {
    font-weight: 700 !important;
}

.bold {
    font-weight: 900 !important;
}

/* Navbar ====================================================*/

.logoImg {
    height: auto;
    width: 100%;
    max-width: 107px;
    margin: 0;
}

.sectionTitle {
    font-size: 18px;
    line-height: 24px;
    font-weight: 300;
    text-align: center;
    color: #2C2C2C;
}

@media (max-width: 768px) { 
    .sectionTitle {
        font-size: 15px;
        text-align: center;
        color: #2C2C2C;
    }
}

/* Floating icon */

.floating-icon {
    position: fixed;
    bottom: 20px;
    right: 7%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    padding: 0;
    z-index: 9;
}

.icon-image {
    width: 100%; 
    max-width: 60px;
    height: auto;
}

/* BannerSection ====================================================*/

.bannerSection {
    padding: 0;
    width: 100%;
    /* max-width: 553px; */
    margin: auto;
    position: relative;
}

.video-container {
    height: auto;
    max-height: 681px;
    width: 100%;
    overflow: hidden;
}
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bgVideo {
    /* position: absolute;
    right: 0;
    top: 0; */
    height: auto;
    width: 100%;
    display: block;
    margin: auto;
}

.bannerLogo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 33%;
}

.logoImg2 {
    height: auto;
    width: 100%;
    /* max-width: 484px; */
    display: block;
    margin: 0 auto;
}

.galleryBtn {
    border: 1px solid #F4EDED;
    border-radius: 10px;
    color: white;
    width: fit-content;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 24px;
    line-height: 29px;
    margin: 50px auto 0;
    cursor: pointer;
    background: #191818;
    padding: 13px 8%;
}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {  
    
}

/* // md devices (tablets, below 992px) */
@media (max-width: 991.98px) {

    .bannerSection {
        padding: 0;
        width: 100%;
        /* max-width: 553px; */
        margin: auto;
        position: relative;
    }

    .video-container {
        height: 100%;
        max-height: 531px;
        width: auto;
        overflow: hidden;
    }

    .bgVideo {
        height: 531px;
        width: 100%;
        /* max-width: 553px; */
        margin: auto;
    }

    .logoImg {
        height: auto;
        width: 100%;
        max-width: 70px;
        margin: 0;
    }

    .bannerLogo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 65%;
    }

    .logoImg2 {
        height: auto;
        width: 100%;
        max-width: 234px;
    }
    
    .galleryBtn {
        width: fit-content;
        font-size: 20px;
        line-height: 24px;
        margin: 55px auto 0;
        border-radius: 10px;
        padding: 13px 10%;
    }

}

/* IntroSection  ====================================================*/

.introSection {
    background: #F0F0EF;
    background-size: 100% 100%;
    padding: 60px 0;
}

.logoFrame {
    margin: 0 10% 0 auto;
}

.logoImg3 {
    height: auto;
    width: 100%;
    /* max-width: 484px; */
    display: block;
    margin: 0 auto;
}

.logoTitle {
    font-size: 22px;
    text-align: center;
    line-height: 27px;
    color: #5D5B5C;
    /* width: 55%; */
    font-weight: 700;
    margin: 0 auto;
}

.des1 {
    font-size: 24px;
    text-align: left;
    line-height: 33px;
    color: #5D5B5C;
    width: 55%;
    font-weight: 300;
    /* max-width: 877px; */
    margin: 0;
    /* letter-spacing: 1px; */
}

.learnMoreBtn {
    border: none;
    border-radius: 10px;
    color: white;
    width: fit-content;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 22px;
    line-height: 27px;
    margin: 0;
    padding: 12px 4%;
    cursor: pointer;
    background: #191818;
}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) { 
    
    .introSection {
        padding: 40px 7%;
    }

    .logoFrame {
        margin: 0 auto;
    }

    .logoImg3 {
        height: auto;
        width: 80%;
        max-width: 203px;
        margin: 0 auto 10px;
    }

    .des1 {
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        width: 90%;
        max-width: 299px;
        margin: 0 auto 25px;
    }

    .logoTitle {
        font-size: 18px;
        line-height: 22px;
        margin: 0 auto;
    }
    
    .learnMoreBtn {
        border: none;
        border-radius: 7px;
        font-size: 16px;
        line-height: 19px;
        margin: 0 auto;
        padding: 10px 8%;
    }
}


/* Upcoming Events  ====================================================*/

.eventSection {
    background: #000;
    width: 100%;
    padding: 35px 0 0;
}

.eventBG {
    /* background-image: url('../assets/images/bearBG.jpg'); */
    background-image: url('../assets/images/winnerBG.jpg');
    background-size: cover;
    background-position: center;
    padding: 40px 0 60px;
}

.eventTitle {
    font-weight: 900;
    font-size: 45px;
    text-align: left;
    line-height: 69px;
    color: #FFF;
    margin: 0 0 0 17%;
    padding: 0 6% 0 0;
    border-bottom: 1px solid #FA0505;
}

.eventInfo {
    background-color: rgba(57, 56, 56, 0.8);
    padding: 35px 0% 40px 34%;
}

.eventName {
    font-size: 28px;
    text-align: left;
    line-height: 33px;
    font-weight: 700;
    color: #FFFFFF;
    padding: 0 10px 20px 0;
    margin: 0 0 20px;
    border-bottom: 1px solid #FA0505;
}

.eventDes {
    font-size: 20px;
    text-align: left;
    line-height: 28px;
    font-weight: 300;
    color: #FFFFFF;
    padding: 0 10px 0 0;
    margin: 0 0 25px;
}

.readMore {
    background: #191818;
    color: #FFFFFF;
    border: 1px solid #F8F2F2;
    border-radius: 8px;
    width: 155px;
    height: 55px;
    font-size: 22px;
    line-height: 27px;
    margin: 0;
    padding: 0;
}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {  

    .eventSection {
        background: #000;
        width: 100%;
        padding: 20px 0 0;
    }
    
    .eventBG {
        background-image: url('../assets/images/winnerBG_mobile.jpg');
        background-size: contain;
        background-position: top;
        background-repeat: no-repeat;
        padding: 180px 0 45px;
    }
    
    .eventTitle {
        font-size: 24px;
        line-height: 37px;
        margin: 0 0 0 10%;
        padding: 0 6% 0 0;
        border-bottom: 1px solid #FA0505;
    }
    
    .eventInfo {
        background-color: rgba(57, 56, 56, 0.8);
        padding: 15px 2% 20px 17%;
    }
    
    .eventName {
        font-size: 18px;
        line-height: 22px;
        padding: 0 10px 10px 0;
        margin: 0 0 20px;
    }
    
    .eventDes {
        font-size: 15px;
        line-height: 16px;
        padding: 0 10px 0 0;
        margin: 0 0 25px;
    }
    
    .readMore {
        border: 1px solid #F8F2F2;
        border-radius: 5px;
        width: 101px;
        height: 31px;
        font-size: 14px;
        line-height: 17px;
        margin: 0;
        padding: 0;
    }
}



.img-responsive {
    width: 100%;
    height: auto;
}

.pr-1 {
    padding-right: 2.5rem;
}
.pl-1 {
    padding-left: 2.5rem;
}


/* // xs devices (smaller phones, below 576px) */
@media (max-width: 575.98px) { 
}

/* gallery.html */

.tab-content {
    min-height: 50%;
    margin-bottom: 150px;
}

.backBtn img {
    width: 10px;
}

.backBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #848484;
    border-radius: 5px;
    color: #848484;
    width: 95px;
    height: 36px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    line-height: 19px;
    margin: 55px 0 30px;
    padding: 0;
    cursor: pointer;
    background: #FFFFFF;
}

.nav-tabs .nav-link {
    color: #5D5B5C;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    font-weight: 700;
    padding: .4rem .6rem;
    margin: 0 25px 0 0;
    border: 0;
}

.nav-tabs .nav-link:hover {
    border: 0;
}

.nav-tabs {
    border: 0;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border: 0;
    border-bottom: 5px solid #F40505 !important;
}

/* Search Modal */
.searchModal-dialog {
    width: 100%;
}
.searchModal-content {
    border-radius: 0;
}

.slick-disabled {
    opacity: 0.5;
}
.arrowTable {
    width: 100%;
    max-width: 390px; 
    margin: auto; 
    position: absolute; 
    bottom: -50px; 
    left: 0; 
    right: 0;
    z-index: 1;
}
.arrow-left,
.arrow-right {
    max-width: 25px;
    width: 15%;
}

.pageTitle {
    font-size: 45px;
    text-align: left;
    font-weight: 900;
    line-height: 60px;
    color: #CE001B;
    margin: 50px 0 0px;
}

.galleryDes {
    font-size: 20px;
    text-align: left;
    font-weight: 300;
    line-height: 28px;
    color: #5D5B5C;
    margin: 0 0 40px;
}

.tracking-in-expand {
	-webkit-animation: tracking-in-expand 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
	        animation: tracking-in-expand 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@-webkit-keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {   
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
  }
@keyframes tracking-in-expand {
    0% {
        letter-spacing: -0.5em;
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

.fadeInLeft {
    animation: fadeInLeft 1.5s ease 0.3s 1 normal forwards;
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-50px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.collectionFrame {
    opacity: 0;
    width: 100%;
    /* max-width: 210px; */
    vertical-align: top;
    margin: 0;
    padding: 0 5% 0 0;
}
.collectionRedBox {
    position: relative;
    width: 100%;
    min-height: 140px;
    border-left: 1px solid #F70606;
    padding: 0 0 15px 15px;
    margin: 20px 0px 95px;
}

.collectionArtist {
    font-size: 20px;
    text-align: left;
    font-weight: 700;
    line-height: 24px;
    color: #5D5B5C;
    margin: 0 0 5px;
}

.collectionTitle {
    font-style: italic;
    font-size: 16px;
    text-align: left;
    font-weight: 300;
    line-height: 20px;
    color: #5D5B5C;
    margin: 0 0 10px;
    /* height: 70px; */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.collectionCategory {
    font-size: 16px;
    text-align: left;
    font-weight: 300;
    line-height: 20px;
    color: #5D5B5C;
    margin: 0 0 5px;
}

.moreBtn {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 16px;
    text-align: center;
    line-height: 19px;
    font-weight: 700;
    color: #5D5B5C;
    display: table;
    background: #FFF;
    border: 0;
    border-bottom: 5px solid #F70606;
}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {  
    /* .slick-dots {
        bottom: 0;
    } */
    .tab-content {
        min-height: 50%;
        margin-bottom: 45px;
    }    
    .backBtn img {
        width: 7px;
    }
    .backBtn {
        gap: 5px;
        width: 70px;
        height: 26px;
        font-size: 12px;
        line-height: 14px;
        margin: 20px 0;
    }    
    .nav-tabs .nav-link {
        font-size: 12px;
        line-height: 14px;
        padding: .2rem .3rem;
        margin: 0 20px 0 0;
        border: 0;
    }
    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        border-bottom: 3px solid #F40505 !important;
    }
    .arrowTable {
        max-width: 290px; 
        bottom: -45px;
    }
    .arrow-left,
    .arrow-right {
        max-width: 15px;
        width: 15%;
    }
    .pageTitle {
        font-size: 28px;
        line-height: 43px;
        margin: 25px auto 0 0;
    }

    .galleryDes {
        font-size: 14px;
        line-height: 18px;
        margin: 0 0 20px;
    }
    
    .collectionFrame {
        width: 100%;
        /* max-width: 136px; */
        margin: 0;
        padding: 0 3%;
    }

    .collectionRedBox {
        width: 100%;
        min-height: 95px;
        border-left: 1px solid #F70606;
        padding: 0 0 1px 10px;
        margin: 20px 0px 45px;
    }

    .collectionArtist {
        font-size: 14px;
        line-height: 17px;
        margin: 0 0 5px;
    }

    .collectionTitle {
        font-size: 12px;
        line-height: 14px;
        margin: 0 0 10px;
    }
    
    .collectionCategory {
        font-size: 12px;
        line-height: 14px;
        margin: 0 0 5px;
    }

    .moreBtn {
        font-size: 11px;
        line-height: 13px;
        /* display: table;
        margin: 0 0 0 auto; */
        border-bottom: 3px solid #F70606;
    }

    .container {
        padding-right: var(--bs-gutter-x,1.7rem);
        padding-left: var(--bs-gutter-x,1.7rem);
    }
}

/* Collection.html */

.contentSection {
    width: 90%;
    max-width: 1040px;
    margin: 0 auto 50px;
    padding-bottom: 30px;
}

.last-item {
    position: relative;
    margin-top: 50px; /* This pushes the last item to the bottom */
    max-width: 420px;
}

.collectionDetail {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 9%;
    margin: 0;
}

.collectionDetail .arrowTable {
    width: 115%;
    max-width: none; 
    margin: auto; 
    position: absolute; 
    bottom: 0;
    top: 0;
    left: -7%; 
    right: 0;
    z-index: 1;
}


.collectionDetail .arrow-left,
.collectionDetail .arrow-right {
    max-width: 15px;
    width: 15%;
}

.collectionDetail .collectionArtist {
    font-size: 24px;
    text-align: left;
    font-weight: 700;
    line-height: 29px;
    color: #5D5B5C;
    margin: 25px 0 5px;
}

.collectionDetail .collectionTitle {
    font-style: normal;
    font-size: 20px;
    text-align: left;
    font-weight: 300;
    line-height: 30px;
    color: #5D5B5C;
    border-bottom: 1px solid #FA0303;
    margin: 0 0 10px;
    padding: 0 0 9px;
}

.collectionDetail .collectionDescription {
    font-size: 20px;
    text-align: left;
    font-weight: 300;
    line-height: 32px;
    color: #5D5B5C;
    margin: 0 0 15px;
}

.otherCollections {
    width: fit-content;
    font-size: 20px;
    text-align: left;
    font-weight: 700;
    line-height: 24px;
    color: #5D5B5C;
    margin: 40px 0 25px;
    padding: 0 5px 5px 2px;
    border-bottom: 5px solid #F70606;
}

.otherCollectionImg {
    width: 100%;
    height: auto;
    margin: 0 0 20px;
    opacity: 0;
}

.modalBtn {
    font-weight: 700;
    border: none;
    border-radius: 5px;
    color: white;
    width: fit-content;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
    margin-top: auto; /* This pushes the last item to the bottom */
    padding: 12px 4%;
    cursor: pointer;
    background: #191818;
}


#enquiryModal .modal-dialog {
    max-width: 605px;
}

#enquiryModal .modal-content {
    padding: 0 8%;
}

#enquiryModal .modal-header {
    border-bottom: 0;
    padding: 1.8rem 1rem 0;
}

#enquiryModal .modal-title {
    font-size: 35px;
    text-align: center;
    font-weight: 900;
    line-height: 54px;
    color: #CE001B;
    width: 100%;
}

#enquiryModal .form-label {
    font-size: 18px;
    text-align: left;
    font-weight: 300;
    line-height: 22px;
    color: #5D5B5C;
}

#enquiryModal .form-check-label {
    font-size: 16px;
    text-align: left;
    font-weight: 300;
    line-height: 16px;
    color: #5D5B5C;
}

.selectedCollection {
    background: #E0E0E0;
    padding: 20px 2%;
}

.selectedCollection img {
    width: 100%;
    height: auto;
}

.selectedCollection .collectionArtist {
    font-size: 20px;
    text-align: left;
    font-weight: 700;
    line-height: 24px;
    color: #5D5B5C;
    margin: 0 0 5px;
}

.selectedCollection .collectionTitle {
    font-style: italic;
    font-size: 16px;
    text-align: left;
    font-weight: 300;
    line-height: 20px;
    color: #5D5B5C;
    margin: 0 0 10px;
}

.selectedCollection .collectionDescription {
    font-size: 16px;
    text-align: left;
    font-weight: 300;
    line-height: 24px;
    color: #5D5B5C;
    margin: 0;
}

#successMessage {
    font-size: 24px;
    text-align: center;
    font-weight: 700;
    line-height: 29px;
    color: #5D5B5C;
    margin: 20px auto 50px;
}

.error-message {
    opacity: 0;
    color: red;
    font-size: 0.9em;
    animation: fadeInLeft 1.5s ease 0s 1 normal forwards;
}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {  
    .contentSection {
        width: 80%;
        max-width: 500px;
        margin: 0 auto 30px;
        padding-bottom: 0px;
    }
    
    .last-item {
        order: 1;
        margin-top: 30px; /* This pushes the last item to the bottom */
        max-width: none;
    }
    
    .collectionDetail {
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        /* min-height: 350px; */
        /* padding: 0 0 15px 15px; */
        /* margin: 20px 0px 95px; */
        padding: 0;
        /* margin: 0; */
        margin: 0;
    }
    
    .collectionDetail .arrowTable {
        width: 115%;
        max-width: none;
        left: -7%;
    }
    
    
    .collectionDetail .arrow-left,
    .collectionDetail .arrow-right {
        max-width: 10px;
        width: 15%;
    }
    
    .collectionDetail .collectionArtist {
        order: 2;
        font-size: 16px;
        line-height: 19px;
        margin: 35px 0 2px;
    }
    
    .collectionDetail .collectionTitle {
        order: 3;
        font-style: italic;
        font-size: 14px;
        line-height: 24px;
        border-bottom: 1px solid #FA0303;
        margin: 0 0 5px;
        padding: 0 0 3px;
    }
    
    .collectionDetail .collectionDescription {
        order: 4;
        font-size: 14px;
        line-height: 24px;
        margin: 0 0 15px;
    }

    .otherCollections {
        font-size: 12px;
        line-height: 14px;
        margin: 40px 0 20px;
        padding: 0 3px 2px 1px;
        border-bottom: 3px solid #F70606;
    }
    
    .otherCollectionImg {
        margin: 0 0 15px;
    }
    
    .modalBtn {
        order: 5;
        border-radius: 5px;
        font-size: 16px;
        line-height: 19px;
        margin: 0;
        margin-top: auto; /* This pushes the last item to the bottom */
        padding: 12px 12%;
    }
    
    #enquiryModal .modal-content {
        padding: 0;
    }

    #enquiryModal .modal-title {
        font-size: 22px;
        line-height: 34px;
    }

    #enquiryModal .form-label {
        font-size: 14px;
        line-height: 17px;
    }

    #enquiryModal .form-check-label {
        font-size: 12px;
        line-height: 16px;
    }

    .selectedCollection {
        background: #E0E0E0;
        padding: 20px 3%;
    }

    .selectedCollection .collectionArtist {
        font-size: 14px;
        line-height: 17px;
        margin: 0;
    }

    .selectedCollection .collectionTitle {
        font-size: 12px;
        line-height: 14px;
        margin: 0 0 10px;
    }

    .selectedCollection .collectionDescription {
        font-size: 12px;
        line-height: 16px;
        margin: 0;
    }
    
    #successMessage {
        font-size: 18px;
        line-height: 22px;
        margin: 0px auto 30px;
    }
}


.js .slider-single > div:nth-child(1n+2) { display: none }

.js .slider-single.slick-initialized > div:nth-child(1n+2) { display: block }

.collectionDetailFrame {
	background: #000;
    margin: 0;
	padding: 0;
}

.collectionDetailFrame img {
    width: 100%;
    height: auto;
}

.slider-single img {
	line-height: 10rem;
}

.slider-nav img::before {
	content: "";
	display: block;
	padding-top: 0%;
}

.slider-nav .slick-slide { 
    cursor: pointer; 
    margin: 0 0.3%;
}





/* // xs devices (smaller phones, below 576px) */
@media (max-width: 575.98px) { 
}


@media (max-width: 479px) {
	.hide--xs {
		display: none;
	}
}

@media (max-width: 768px) {
	.hide--sm {
		display: none;
	}
}

.show--xs {
	display: none;
}

@media (max-width: 479px) {
	.show--xs {
		display: block;
	}
}

.show--sm {
	display: none;
}

@media (max-width: 767px) {
	.show--sm {
		display: block;
	}
}

/* // xs devices (smaller phones, below 576px) */
@media (max-width: 575.98px) { 
}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {
    
}

/* // xs devices (smaller phones, below 576px) */
@media (max-width: 575.98px) {

}


/* Event.html  */

.eventBox {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.eventDate {
    font-size: 24px;
    text-align: left;
    font-weight: 300;
    line-height: 29px;
    color: #656163;
    margin: 0;
}

.eventImg {
    width: 100%;
    height: auto;
}

.eventDate span {
    font-size: 54px;
    font-weight: 100;
    line-height: 60px;
    color: #D0C6CB;
    padding: 0 1px 0;
    border-bottom: 4px solid #F70606;
    margin-right: 5px;
}

.eventDiv {
    margin-bottom: 20px;
}

.eventSlick .eventName {
    font-size: 24px;
    text-align: left;
    line-height: 29px;
    font-weight: 700;
    color: #656163;
    padding: 0 10px 15px 0;
    margin: 0 0 15px;
    border-bottom: 1px solid #FA0505;
}

.eventSlick .eventDes {
    font-size: 16px;
    text-align: left;
    line-height: 24px;
    font-weight: 300;
    color: #656163;
    padding: 0 10px 0 0;
    margin: 0;
}

.notifyBtn {
    font-weight: 700;
    border: none;
    border-radius: 5px;
    color:#FCFCFC;
    width: fit-content;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 20px;
    line-height: 24px;
    margin: 0;
    margin-top: auto; /* This pushes the last item to the bottom */
    padding: 10px 5%;
    cursor: pointer;
    background: #191818;
}

.selectedEvent {
    background: #E0E0E0;
}

.selectedEventDay {
    font-size: 50px;
    text-align: left;
    line-height: 60px;
    font-weight: 100;
    color: #5D5B5C;
    padding: 0;
    margin: 0 0 0 20%;
}

.selectedEventMonthYear {
    font-size: 24px;
    text-align: left;
    line-height: 29px;
    font-weight: 300;
    color: #5D5B5C;
    padding: 0;
    margin: 0 0 0 20%;
}

.selectedEventTitle {
    font-size: 24px;
    text-align: left;
    line-height: 29px;
    font-weight: 700;
    color: #656163;
    padding: 0 10%;
    margin: 0;
    height: 100%;
    align-content: center;
    border-left: 5px solid #F50606;
}

.borderLeftRed {
    border-left: 5px solid #F50606;
}


/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {  
    .eventDate {
        font-size: 18px;
        line-height: 22px;
        margin: 0 0 7px;
    }
    
    .eventDate span {
        font-size: 45px;
        line-height: 45px;
        padding: 0 5px 0 0;
        border-bottom: 3px solid #F70606;
        margin-right: 5px;
    }
    
    .eventDiv {
        margin-bottom: 20px;
    }
    
    .eventSlick .eventName {
        width: 100%;
        font-size: 18px;
        line-height: 22px;
        padding: 0 0 6px;
        margin: 15px 0 10px;
        border-bottom: 1px solid #FA0505;
    }
    
    .eventSlick .eventDes {
        font-size: 12px;
        line-height: 16px;
        padding: 0;
        margin: 0 0 20px;
    }
    
    .notifyBtn {
        font-size: 14px;
        line-height: 17px;
        margin: 0;
        margin-top: auto; /* This pushes the last item to the bottom */
        padding: 7px 5%;
    }

    .selectedEventDay {
        font-size: 35px;
        line-height: 42px;
        padding: 0;
        margin: 0 0 0 20%;
    }
    
    .selectedEventMonthYear {
        font-size: 16px;
        line-height: 19px;
        padding: 0;
        margin: 0 0 0 20%;
    }
    
    .selectedEventTitle {
        font-size: 16px;
        line-height: 19px;
        padding: 0 8%;
        margin: 0;
        border-left: 3px solid #F50606;
    }

    .borderLeftRed {
        border-left: 3px solid #F50606;
    }
}

/* aboutus.html */

.aboutSection {
    width: 90%;
    max-width: 1040px;
    margin: 0 auto;
}

.aboutBG {
    background-image: url('../assets/images/aboutBG.jpg');
    background-size: cover;
    background-position: center;
    padding: 0;
}

.aboutTitle {
    font-size: 45px;
    text-align: left;
    font-weight: 900;
    line-height: 69px;
    color: #CE001B;
    margin: 0 0 0px;
}

.aboutDes {
    font-size: 18px;
    text-align: left;
    line-height: 28px;
    font-weight: 300;
    color: #656163;
    padding: 0;
    margin: 20px 5% 40px 0;
}

.chairmanName {
    font-size: 22px;
    text-align: left;
    font-weight: 700;
    line-height: 27px;
    color: #656163;
    margin: 0 0 5px;
    padding: 0 0 10px;
    border-bottom: 1px solid #F80505;
}

.chairmanTitle {
    font-style: italic;
    font-size: 18px;
    text-align: left;
    font-weight: 300;
    line-height: 22px;
    color: #656163;
    margin: 0 0 60px;
}

.processSection {
    width: 100%;
    background: #E8ECF2;
    max-width: none;
    margin: 0;
    padding: 25px 0 0;
}

.processTitle {
    font-size: 40px;
    text-align: left;
    font-weight: 100;
    line-height: 48px;
    color: #656163;
    margin: 0 auto;
    padding-bottom: 7px;
    width: 90%;
    max-width: 1040px;
    border-bottom: 1px solid #FA0606;
}

.processBG {
    width: 90%;
    max-width: 1040px;
    background-image: url('../assets/images/processBG.jpg');
    background-size: cover;
    background-position: center;
    padding: 0;
    margin: 0 auto;
}

.iconTitle {
    font-size: 40px;
    text-align: left;
    font-weight: 100;
    line-height: 48px;
    color: #656163;
    margin: 25px auto 35px;
    padding-bottom: 7px;
    border-bottom: 1px solid #FA0606;
}

.icon1 {
    max-width: 61px;
    height: auto;
    display: block;
    margin: 0;
}

.icon2 {
    max-width: 63px;
    height: auto;
    display: block;
    margin: 0;
}

.icon3 {
    max-width: 59px;
    height: auto;
    display: block;
    margin: 0;
}

.iconTable {
    height: 100%;
    width: 100%;
}

.iconTable tr td:first-child {
    width: 0;
}

.iconDes {
    font-size: 18px;
    text-align: left;
    font-weight: 300;
    line-height: 26px;
    color: #656163;
    margin: 0 0 0 6%;
    align-self: center;
}


/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {
    .aboutSection {
        width: 100%;
        max-width: none;
        margin: 0 auto;
    }

    .aboutBG {
        background-image: none;
        padding: 0 10%;
    }

    .aboutTitle {
        font-size: 28px;
        line-height: 43px;
        margin: 0 auto 0 0;
    }

    .aboutDes {
        font-size: 15px;
        line-height: 22px;
        padding: 0;
        margin: 20px auto 35px;
        width: 80%;
    }

    .chairmanName {
        font-size: 18px;
        line-height: 22px;
        margin: 0 0 5px;
        padding: 0 0 5px;
    }
    
    .chairmanTitle {
        font-size: 16px;
        line-height: 19px;
        margin: 0 0 40px;
    }
    
    .processSection {
        width: 100%;
        background: #E8ECF2;
        max-width: none;
        margin: 0;
        padding: 25px 0 0;
    }

    .processTitle {
        font-size: 28px;
        line-height: 33px;
        margin: 0 auto 10px;
        padding-bottom: 5px;
        width: 80%;
    }

    .processBG {
        width: 100%;
        background-image: none;
        padding: 0;
    }

    .iconTitle {
        font-size: 28px;
        line-height: 33px;
        margin: 20px 0 30px;
        padding-bottom: 5px;
    }
    
    .icon1 {
        max-width: 55px;
        margin: 0 auto;
    }
    
    .icon2 {
        max-width: 59px;
        margin: 0 auto;
    }
    
    .icon3 {
        max-width: 52px;
        margin: 0 auto;
    }
    
    .iconTable {
        height: auto;
        width: 100%;
    }

    .iconDes {
        font-size: 18px;
        text-align: left;
        line-height: 22px;
        margin: 0 0 0 15%;
    }
}

/* policy.html */

.policyTitle {
    font-size: 22px;
    line-height: 27px;
    text-align: left;
    font-weight: 700;
    color: #656163;
    padding: 0;
    margin: 0 0 10px;
}

.policyDes {
    font-size: 16px;
    line-height: 22px;
    text-align: left;
    font-weight: 300;
    color: #656163;
    padding: 0;
    margin: 0;
}

.orderList ul {
    padding-left: 1rem;
}

.orderList ul li {
    font-size: 16px;
    line-height: 22px;
    text-align: left;
    font-weight: 300;
    color: #656163;
    padding: 0;
    margin: 0;
}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) { 
    .policyTitle {
        font-size: 16px;
        line-height: 19px;
        margin: 0 0 10px;
    }
    
    .policyDes {
        font-size: 12px;
        line-height: 16px;
    }
    
    .orderList ul li {
        font-size: 12px;
        line-height: 16px;
    }
}


/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.navbar {
    transition: all 0.5s;
    background: #0B0A0A;

}

.navbar .nav-link {
    color: #FFFDFE;
    padding: 0 !important;
    transition: 0.4s;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: #6f6f6f;
    text-decoration: none;
}

.navbar .navbar-brand {
    color: #fff;
    text-shadow: 2px 2px black;
}

.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center; /* Align items vertically */
    gap: 40px; /* Adjust spacing between items */
}

.navbar-nav .nav-link {
    text-align: center; /* Center text */
    display: flex;
    align-items: center; /* Align items vertically */
    justify-content: center; /* Align items horizontally */
}

.nav-item a:hover {
    color: #813232 !important;
}

.menuIcon {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 34px;
    height: 1px;
    background-color: #FAF4F4;
    margin: 9px 0;
    transition: 0.4s;
}

.change .bar1 {
    transform: translate(0, 10px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    transform: translate(0, -10px) rotate(45deg);
}

/* Bottom Navbar */
.bottom-navbar {
    display: none;
}

/* Change navbar styling on scroll */
/* .navbar.active {
    background: #000;
    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar.active .nav-link {
    color: #cacaca;
}

.navbar.active .nav-link:hover,
.navbar.active .nav-link:focus {
    color: white;
    text-decoration: none;
}

.navbar.active .navbar-brand {
    color: #cacaca;
    text-shadow: 0px 0px black;
} */


@media (max-width: 991.98px) {
    .navbar {
        padding: 0;
        position: sticky;
        top: 0;
        right: 0;
        left: auto;
        width: 100%;
        background-color: #000; /* Adjust background color as needed */
        z-index: 999;
    }
    .navbar-toggler {
        order: 0; /* Move toggler to the start */
    }
    .navbar-collapse {
        width: 100%;
        background-color: #000; /* Adjust background color as needed */
        padding: 0 5%;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow for better visibility */
        border-radius: 0; /* Remove border radius */
    }
    .navbar-nav {
        flex-direction: column;
        gap: 0px;
    }
    .navbar-nav .nav-item {
        margin-bottom: 20px;
    }
    /* Bottom Navbar */
    .bottom-navbar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #000;
        border: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        z-index: 999;
    }
    
    /* Classes for showing/hiding */
    .show {
        opacity: 1;
    }
    .hide {
        opacity: 0;
    }
    /* Animation for sliding out */
    .slideOutBottom {
        animation: slideOutBottom 0.3s linear 0s 1 normal forwards;
    }
    /* Animation for sliding in */
    .slideInBottom {
        animation: slideInBottom 0.3s linear 0s 1 normal forwards;
    }
    /* Keyframes for animation */
    @keyframes slideOutBottom {
        0% {
            opacity: 0;
            transform: translateY(250px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes slideInBottom {
        0% {
            opacity: 1;
            transform: translateY(0);
        }
        100% {
            opacity: 0;
            transform: translateY(250px);
        }
    }
    .bottom-navbar-item {
        text-align: center;
        padding: 11px 6% 10px;
        display: flex;
        flex-direction: column;
        align-items: center; /* Align items vertically */
        gap: 5px; /* Adjust spacing between items */
    }
    .bottom-navbar-item img {
        max-width: 100%;
        height: auto;
    }
    .bottom-navbar-item a {
        text-decoration: none;
        position: relative;
        font-size: 12px;
        line-height: 20px;
        text-align: center;
        font-weight: 500;
        color: #FCF7F9;
    }
    .bottom-navbar-item a:hover {
        color: #FFF !important;
    }
    /* .bottom-navbar-item a::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 1px;
        border-radius: 4px;
        background-color: #FFF;
        bottom: 0;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }
    .bottom-navbar-item a:hover::before {
      transform-origin: left;
      transform: scaleX(1);
    } */

}





/*
*
* ==========================================
* FOR DEMO PURPOSES
* ==========================================
*
*/
.text-small {
    font-size: 0.9rem !important;
}


/*
*
* ==========================================
* FOOTER
* ==========================================
*
*/

footer {
    background: #F0F0EF;
    padding: 40px 0 0;
}

.footerTitle {
    font-size: 24px;
    line-height: 28px;
    text-align: center;
    font-weight: 300;
    color: #5D5B5C;
    width: 90%;
    margin: 0 auto 50px;
}

.emailBox {
    margin: 0 0 0 auto;
    width: 100%;
    max-width: 575px;
}

.footerEmail {
    font-size: 24px;
    line-height: 29px;
    text-align: right;
    font-weight: 500;
    color: #656163;
    /* width: 90%; */
    margin: 0 5px 0 auto;
    white-space: nowrap;
}

.email-input {
    font-size: 24px;
    line-height: 29px;
    font-weight: 400;
    padding: 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #707070;
    width: 80%;
}

.email-input:focus {
    outline: none;
    background-color: #dedede;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

.subscribeBtn {
    border: none;
    border-radius: 7px;
    color: white;
    width: fit-content;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 24px;
    line-height: 29px;
    margin: 0 auto;
    padding: 10px 7%;
    cursor: pointer;
    background: #191818;
}

.subscribeBtn:hover {
    color: #707070 !important;
}

.logoImg4 {
    height: auto;
    width: 70%;
    max-width: 186px;
    margin: 0 10% 0 auto;
}

.copyrightSection {
    padding: 22px 10%;
    background: #050505;
}

.copyrightTitle {
    font-size: 16px;
    line-height: 18px;
    text-align: center;
    font-weight: 300;
    color: #FFFCFD;
    margin: 0 auto;
}

.iconImg {
    width: 100%;
    max-width: 46px;
    height: auto;
    display: block;
    margin: 20px 20px 20px 0;
}

.redBorderLeft {
    border-left: 1px solid #F70606;
    padding-left: 12px;
    margin: 70px 0 45px;
    height: 100%;
}

.contactTitle { 
    font-size: 18px;
    text-align: left;
    line-height: 20px;
    color: #5D5B5C;
    font-weight: 700;
    margin: 0;
}

.contact { 
    font-size: 18px;
    text-align: left;
    line-height: 22px;
    color: #5D5B5C;
    font-weight: 700;
    margin: 0;
}

.tnc { 
    font-size: 18px;
    text-align: left;
    line-height: 28px;
    color: #5D5B5C;
    font-weight: 300;
    margin: 0;
}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {

    footer {
        background: #F0F0EF;
        padding: 30px 0 0;
    }

    .footerTitle {
        font-size: 16px;
        line-height: 22px;
        max-width: 272px;
        margin: 0 auto 35px;
    }
    
    .emailBox {
        margin: 0 auto;
    }
    
    .footerEmail {
        font-size: 14px;
        line-height: 17px;
        margin: 0;
    }
    
    .email-input {
        font-size: 14px;
        line-height: 17px;
        width: 80%;
    }

    .subscribeBtn {
        border: none;
        border-radius: 7px;
        font-size: 16px;
        line-height: 19px;
        margin: 25px auto 40px;
        padding: 12px 8%;
    }

    .logoImg4 {
        max-width: 136px;
        margin: 0 auto 30px;
    }

    .copyrightSection {
        padding: 0px 5%;
        padding: 20px 5%;
        background: #050505;
    }
    
    .copyrightTitle {
        font-size: 12px;
        line-height: 18px;
    }
    
    .iconImg {
        max-width: 37px;
        margin: 10px 10px 2px 0;
    }

    .redBorderLeft {
        margin: 10px 0 20px;
    }

    .contactTitle { 
        font-size: 14px;
        line-height: 20px;
    }
    
    .contact { 
        font-size: 14px;
        line-height: 22px;
    }
    
    .tnc { 
        font-size: 14px;
        line-height: 20px;
    }
}
@media (max-width: 575.98px) { 
}

footer {
    color: grey;
}
footer p, a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
    color: #000000;   
}


/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {
    
}
@media (max-width: 575.98px) { 
    
}

/* // Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap */

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {  
    
}

.vcontainer {
    position: relative;
    height: 100%;
    padding: 0;
}

.vertical-center {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  

    .visible-sm {
        display: none;
    }

}


/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    
    .visible-md {
        display: none;
    }


}

h1.fadeIn span{
    opacity: 0;
    transform: translateY(30px);
    animation: fadeIn 1s ease-out forwards;
    display:inline-block;
  }
  
  h1.fadeIn span:nth-of-type(2){
    animation-delay: 1s;
  }
  
  h1.fadeIn span:nth-of-type(3){
    animation-delay: 1.5s;
  }
  
  @keyframes fadeIn{
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  

    .visible-lg {
        display: none;
    }
}

/* ==============================Max Width=============================== */


/* // lg  devices (normal desktops, below 1200px) */
@media (min-width: 1199.98px) {  

}


/* // md devices (tablets, below 992px) */
@media (max-width: 991.98px) {

}

/* // sm devices (phones, below 768px) */
@media (max-width: 767.98px) {  
    
    .visible-sm {
        display: none;
    }
}

/* // xs devices (smaller phones, below 576px) */
@media (max-width: 575.98px) { 

    .visible-xs {
        display: none;
    }

}


/* TEST */

/* title styles */
.title-reveal span {
  position: relative;
  overflow: hidden;
  display: block;
}

.title-reveal span::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation: a-ltr-after 2s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  transform: translateX(-101%);
}

.title-reveal span::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: white;
  animation: a-ltr-before 2s cubic-bezier(0.77, 0, 0.18, 1) forwards;
  transform: translateX(0);
}

.title-reveal span:nth-of-type(1)::before,
.title-reveal span:nth-of-type(1)::after {
  animation-delay: 1s;
}

.title-reveal span:nth-of-type(2)::before,
.title-reveal span:nth-of-type(2)::after {
  animation-delay: 1.5s;
}

@keyframes a-ltr-after {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(101%);
  }
}

@keyframes a-ltr-before {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}


/* ====================== */

.portfolio_wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    flex-wrap: wrap;
}

.left-col, .right-col {
    flex-basis: 50%;
    height: 100vh;
    position: relative;
}

.logo {
    display: block;
    width: 80px;
    margin-top: 30px;
    margin-left: 120px;
}

.content {
    max-width: 500px;
    position: absolute;
    top: 50%;
    left: 120px;
    transform: translateY(-50%);
}

.content h1 {
    color: green;
    font-size: 60px;
    line-height: 70px;
    margin: 25px 0;
}

.content p {
    color: #404040;
    font-size: 17px;
    line-height: 28px;
    margin-bottom: 50px;
}


@media (max-width: 800px) {  
    
    .logo {
        margin: 30px auto;
    }

    .left-col, .right-col {
        flex-basis: 100%;
    }

    .content {
        left: 0;
        padding: 20px;
        text-align: center;
    }

    .content h1 {
        font-size: 34px;
        line-height: 38px;
    }

    .slider {
        height: auto;
    }

    .slider-content {
        height: auto;
    }
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
  
    > .col,
    > [class*="col-"] {
      padding-right: 0;
      padding-left: 0;
    }
  }