/* MAJOR */
body{
    font-family: 'Merriweather', serif;
}

:root {
    --dark: #000000;
    --golden: #e6ad04;
}

.text-main-golden {
    color: var(--golden);
}

.text-main-dark {
    color: var(--dark);
}

.btn-main-golden {
    background-color: var(--golden);
}

.btn-main-golden:hover {
    color: white;
}

.btn-main-dark {
    background-color: var(--dark);
    color: white;
}

.btn-main-dark:hover {
    color: var(--golden);
}

.bg-main-dark {
    background-color: var(--dark);
}

.bg-main-golden{
    background-color: var(--golden);
}

/* Top Nav Bar*/
/*Nav Bar*/
a.nav-link {
    color: white;

}

a.nav-link:hover {
    color: var(--golden) !important;
}

@media screen and (min-width:992px) {
    .nav-item {
        line-height: 40px;
    }
}

/* ABOUTUS SECTION*/
.shadow-border {
    border: 2px solid #ccc;
    /* Customize the border color and size */
    box-shadow: 10px 10px 20px var(--golden);
    /* x-offset, y-offset, blur-radius, color */
}

/* SERVICE SECTION*/
@media (max-width: 575px) {
    .we-offer-icon{
        max-width: 200px;
    }
}


.shake-image {
    display: inline-block;
    animation: shake 1s;
    /* Duration of the animation */
    animation-iteration-count: infinite;
    /* Repeats the animation infinitely */
}

@keyframes shake {
    0% {
        transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
        transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
        transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
        transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
        transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
        transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
        transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
        transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
        transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
        transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
        transform: translate(1px, -2px) rotate(-1deg);
    }
}

@keyframes floating {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.floating-image {
    animation: floating 3s ease-in-out infinite;
}

.twist-image {
    display: inline-block;
    animation: twist 1s infinite;
    /* Duration of 1 second and infinite repetition */
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
        /* Start and end at the same position */
    }

    40% {
        transform: translateY(-10px);
        /* Move the icon up */
    }

    60% {
        transform: translateY(-5px);
        /* Move the icon slightly up */
    }
}

.bounce-image {
    animation: bounce 2s infinite;
    /* Bounce every 2 seconds infinitely */
}

.fade-in {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.fade-in.visible {
    opacity: 1;
}

/* Keyframes for the twist effect */
@keyframes twist {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Fade out effect for an image */
.fade-out-image {
    display: inline-block;
    animation: fadeOut 3s infinite;
    /* Duration of 2 seconds */
}

/* Keyframes for the fade-out effect */
@keyframes fadeOut {
    0% {
        opacity: 1;
        /* Fully visible at the start */
    }

    100% {
        opacity: 0;
        /* Completely invisible at the end */
    }
}

@keyframes slideIn {
    0% {
        transform: translateY(100%);
        /* Start below the visible area */
        opacity: 0;
        /* Start fully transparent */
    }

    100% {
        transform: translateY(0);
        /* End at the original position */
        opacity: 1;
        /* End fully opaque */
    }
}

.slidein-image {
    animation: slideIn 0.5s ease-out forwards;
    /* Apply the animation */
}


/* CONTACT US SECTION */
.contactus-leftcol {
    background-image: url('/frontend/v2/img/contact-us-bgimg.jpeg');
    color: white;
    background-position: center;
    background-size: cover;
    position: relative;

}

.contactus-leftcol::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.contactus-leftcolcontent {
    position: relative;
    z-index: 2;
    color: white;
}

.contact-info-box {
    display: flex;
    /* align-items: center;     */
}

.contact-info-icon {
    margin-right: 15px;
    /* Add spacing between the icon and content */
    font-size: 24px;
    color: var(--golden);
}

.contact-info-text {
    margin: 0;
}

.contactus-section .btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    border-radius: 35px;
    transition: .3s;
    text-decoration: none;
}

.contactus-section .btn-social:hover {
    color: var(--golden);
    border-color: var(--golden);
}

/*JOIN US SECTION*/
.joinus-section {
    background-image: url('/frontend/img/map.png');
    background-position: center;
    background-size: cover;
    position: relative;
}


.joinus-menu-chip {
    color: white;
    background-color: var(--golden);
    text-align: center;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
}

.joinus-menu-icon {
    margin-right: 10px;
    transition: transform 0.6s;
}

.joinus-menu-chip:hover .joinus-menu-icon {
    transform: rotate(360deg);
    /* Rotate the icon 360 degrees on hover */
}

.joinus-menu-text {
    margin: 0;
    color: #376454
}

/*WORLDWIDE SECTION*/
.worldwide-section {
    background-color: var(--golden);
}

.country-flag {
    transition: transform 0.3s ease;
    /* Smooth transition for scaling */
    display: inline-block;
    /* Ensures that transform does not affect other elements */
    margin-right: 12px;
}

.country-flag:hover {
    transform: scale(1.1);
    /* Scale up the image on hover */
}

/* ON DEMAND SECTION */
.ondemand-section {
    background-image: url('/frontend/img/on-demand-bgimg.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
}

.ondemand-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.4);
    z-index: 1;
}

.ondemand-section-body {
    position: relative;
    z-index: 2;
}

/*FOOTER SECTION*/
.footer-section {
    min-height: 300px;
    background-color: var(--dark);
    color: white;
}

.footercol {
    display: flex;
}

.footercol-icon {
    margin-right: 20px;
}

.footercol-text {
    margin: 0;
}

a.footer-hyperlink {
    color: white;
    text-decoration: none;
}

a.footer-hyperlink:hover {
    color: var(--golden);
}


.other-section {
    background-image: url('/frontend/img/on-demand-bgimg.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
}

.other-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 1;
}

.other-section-body {
    position: relative;
    z-index: 2;
}

/* OTHER */
.invalid-field {
    color: red;
}

.blog-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: calc(1.2em * 3);
    /* Adjust line height as needed */
    max-height: calc(1.2em * 3);
}

.blog-title a {
    text-decoration: none;
    color: var(--dark);
}

.blog-desc {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    min-height: calc(1.2em * 10);
    /* Adjust line height as needed */
    max-height: calc(1.2em * 10);
}

#whatsapp-button {
    position: fixed;
    bottom: 80px;
    right: 0px;
    z-index: 1;
}

#whatsapp-button img {
    width: 74px;
    height: auto;
}

.clickable {
    cursor: pointer;
}

.rotate {
    animation: rotateAnimation 5s linear infinite;
}

@keyframes rotateAnimation {
    from {
        transform: rotate(0deg);
        /* Start at 0 degrees */
    }

    to {
        transform: rotate(360deg);
        /* Rotate to 360 degrees */
    }
}

.bglabelgold{
    border-left: 8px solid #e8b404
}
.memberportal{
    display: flex;
}
.page-content {
    flex-grow: 1; /* Make the page content take up the remaining space */
    padding: 10px; /* Add padding for spacing */
    background-color: #e1e1e1; /* Background color for the page content */
}

.iconpostion{
    position: absolute;
    right: 20px;
    bottom: 5px;
    font-size: 40px;
    color: #ebbf05;
    opacity: 0.5;
}

.memberRanktxt{
    color: var(--golden);
}

li.breadcrumb-item a{
    text-decoration: none;
    color: var(--golden);
}

/* ===START : Pagination== */
.pagination {
	display:inline-block;
	padding-left:0;
	margin:18px 0;
	border-radius:2px
}
.pagination>li {
	display:inline
}
.pagination>li>a,.pagination>li>span {
	position:relative;
	float:left;
	padding:6px 12px;
	line-height:1.42857143;
	text-decoration:none;
	color:var(--dark);
	background-color:#fff;
	border:1px solid #ddd;
	margin-left:-1px
}
.pagination>li:first-child>a,.pagination>li:first-child>span {
	margin-left:0;
	border-bottom-left-radius:2px;
	border-top-left-radius:2px
}
.pagination>li:last-child>a,.pagination>li:last-child>span {
	border-bottom-right-radius:2px;
	border-top-right-radius:2px
}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover {
	z-index:2;
	color:var(--golden);
	background-color:#eee;
	border-color:#ddd
}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
	z-index:3;
	color:#fff;
	background-color:var(--golden);
	border-color:var(--golden);
	cursor:default
}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
	color:#999;
	background-color:#fff;
	border-color:#ddd;
	cursor:not-allowed
}
.pagination-lg>li>a,.pagination-lg>li>span {
	padding:10px 16px;
	font-size:17px;
	line-height:1.33
}
.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span {
	border-bottom-left-radius:3px;
	border-top-left-radius:3px
}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span {
	border-bottom-right-radius:3px;
	border-top-right-radius:3px
}
.pagination-sm>li>a,.pagination-sm>li>span {
	padding:5px 10px;
	font-size:12px;
	line-height:1.5
}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span {
	border-bottom-left-radius:2px;
	border-top-left-radius:2px
}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span {
	border-bottom-right-radius:2px;
	border-top-right-radius:2px
}
.pager {
	padding-left:0;
	margin:18px 0;
	list-style:none;
	text-align:center
}
.pager li {
	display:inline
}
.pager li>a,.pager li>span {
	display:inline-block;
	padding:5px 14px;
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:15px
}
.pager li>a:focus,.pager li>a:hover {
	text-decoration:none;
	background-color:#eee
}
.pager .next>a,.pager .next>span {
	float:right
}
.pager .previous>a,.pager .previous>span {
	float:left
}
.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span {
	color:#999;
	background-color:#fff;
	cursor:not-allowed
}
/* ===END : Pagination== */

.compulsory-field{
	color:red;
}
body.addbgcolor {
    overflow: hidden;
}
body.addbgcolor:after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
}

#member_footer_bar{
	display: none;
}

.popover-btn{
    position:relative;
    top:1px;
}
table tr{
    border: 0;
}

table tr th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background-color: #fff !important;
    border: #fff;
    color: #767676;
}
table.table-bordered>:not(caption)>*>*{
    border-width: 0 !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #e7e7e7 !important;
    padding-top: 10px;
}

.long-table{
	min-width:1000px;
}