/* ========================================
   GOLD & BLACK THEME - SINGLE SERVICE
   VIP EVENT PLANNER
   ======================================== */

:root {
    --gold-light: #FFD700;
    --gold-medium: #D4AF37;
    --gold-dark: #B8860B;
    --gold-pale: #F6EAC2;
    --black: #000000;
    --black-dark: #0a0a0a;
    --black-light: #111111;
    --black-soft: #1a1a1a;
    --white: #ffffff;
    --gray: #888888;
}

/* ---------- GLOBAL STYLES ---------- */
body {
    background-color: var(--black-dark);
    color: var(--white);
}

.bg-default {
    background-color: var(--black-dark) !important;
}

.bg-gray-850 {
    background-color: var(--black) !important;
}

.text-secondary {
    color: var(--gold-medium) !important;
}

.text-third {
    color: var(--gold-light) !important;
}

.text-fourth {
    color: var(--gold-dark) !important;
}

.text-gray-600 {
    color: #cccccc !important;
}

/* ---------- NAVIGATION ---------- */
.rd-navbar-nav > li > a {
    color: var(--gold-medium) !important;
    transition: all 0.3s ease;
}

.rd-navbar-nav > li > a:hover {
    color: var(--gold-light) !important;
}

.rd-nav-item.active > a {
    color: var(--gold-light) !important;
}

.rd-navbar-dropdown {
    background-color: var(--black-light) !important;
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.rd-dropdown-link {
    color: var(--gold-medium) !important;
}

.rd-dropdown-link:hover {
    color: var(--gold-light) !important;
    background-color: rgba(212, 175, 55, 0.15);
}

/* ---------- BUTTONS ---------- */
.button-secondary {
    background-color: transparent !important;
    border: 2px solid var(--gold-medium) !important;
    color: var(--gold-medium) !important;
    transition: all 0.3s ease !important;
}

.button-secondary:hover {
    background-color: var(--gold-medium) !important;
    color: var(--black) !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
}

.button-ujarak {
    position: relative;
    overflow: hidden;
}

/* ---------- HERO SECTION ---------- */
.hero-service {
    position: relative;
    padding: 120px 0 0 ;
    background: linear-gradient(135deg, var(--black) 0%, var(--black-dark) 100%);
}

.hero-service::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/bg-about-01-1700x376.jpg') center/cover no-repeat;
    opacity: 0.3;
    z-index: 0;
}

.hero-service .container {
    position: relative;
    z-index: 1;
}

.hero-service h2 {
    font-size: 4rem;
    font-weight: 800;
    color: var(--gold-light);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.hero-service p {
    font-size: 1.2rem;
    color: var(--gold-pale);
}

/* ---------- SERVICE CARD ---------- */
.service-card {
    background: linear-gradient(135deg, var(--black-soft) 0%, var(--black-light) 100%);
    border-radius: 15px;
    padding: 40px 30px;
    transition: all 0.4s ease;
    border: 1px solid rgba(212, 175, 55, 0.2);
    height: 100%;
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold-medium);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.2);
}

.service-icon {
    font-size: 60px;
    color: var(--gold-medium);
    margin-bottom: 25px;
    display: inline-block;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    color: var(--gold-light);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.service-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--gold-light);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.service-description {
    color: #dddddd;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* ---------- SERVICE FEATURES ---------- */
.service-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    text-align: left;
    display: inline-block;
}

.service-features li {
    padding: 8px 0;
    color: #cccccc;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    display: flex;
    align-items: center;
}

.service-features li::before {
    content: '✦';
    color: var(--gold-medium);
    margin-right: 12px;
    font-size: 14px;
}

/* ---------- SERVICE PRICE ---------- */
.service-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--gold-light);
    margin: 20px 0;
}

.service-price span {
    font-size: 1rem;
    color: var(--gray);
    font-weight: normal;
}

/* ---------- SERVICE BUTTON ---------- */
.btn-service {
    display: inline-block;
    padding: 12px 30px;
    background: transparent;
    border: 2px solid var(--gold-medium);
    color: var(--gold-medium);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    text-decoration: none;
    border-radius: 30px;
    margin-top: 10px;
}

.btn-service:hover {
    background: var(--gold-medium);
    color: var(--black);
    text-decoration: none;
    transform: translateY(-2px);
}

/* ---------- SERVICE DETAIL IMAGE ---------- */
.service-detail-img {
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.service-detail-img img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.service-detail-img:hover img {
    transform: scale(1.05);
}

/* ---------- INFO BOX ---------- */
.info-box {
    background: var(--black-soft);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.info-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.info-item:last-child {
    border-bottom: none;
}

.info-icon {
    width: 40px;
    font-size: 24px;
    color: var(--gold-medium);
}

.info-label {
    flex: 1;
    font-weight: 600;
    color: var(--white);
}

.info-value {
    color: var(--gold-pale);
}

/* ---------- FAQ SECTION ---------- */
.card-corporate {
    background: var(--black-soft) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    margin-bottom: 15px;
    border-radius: 10px !important;
}

.card-corporate .card-header {
    background: var(--black-light) !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.card-corporate .card-title a {
    color: var(--gold-light) !important;
    font-weight: 600;
}

.card-corporate .card-title a:hover {
    color: var(--gold-medium) !important;
}

.card-corporate .card-body {
    background: var(--black-soft) !important;
    color: #cccccc;
}

.card-arrow::before {
    background-color: var(--gold-medium) !important;
}

/* ---------- FOOTER ---------- */
.footer-classic {
    background-color: var(--black) !important;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
}

.form-input-2 {
    background-color: var(--black-soft) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: var(--white) !important;
}

.form-input-2:focus {
    border-color: var(--gold-medium) !important;
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

.form-label-2 {
    color: var(--gray) !important;
}

.footer-social-list li a {
    background-color: var(--black-soft);
    color: var(--gold-medium);
    border-radius: 50%;
    transition: all 0.3s ease;
    display: inline-block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
}

.footer-social-list li a:hover {
    background-color: var(--gold-medium);
    color: var(--black);
    transform: translateY(-3px);
}

.rights,
.rights a {
    color: var(--gray) !important;
}

.rights a:hover {
    color: var(--gold-medium) !important;
}

/* ---------- PRELOADER ---------- */
.preloader {
    background-color: var(--black) !important;
}

.cssload-speeding-wheel {
    border-color: var(--gold-medium) !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 992px) {
    .hero-service h2 {
        font-size: 3rem;
    }
    
    .service-title {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .hero-service {
        padding: 80px 0;
    }
    
    .hero-service h2 {
        font-size: 2rem;
    }
    
    .hero-service p {
        font-size: 1rem;
    }
    
    .service-card {
        padding: 25px 20px;
    }
    
    .service-title {
        font-size: 1.3rem;
    }
    
    .service-price {
        font-size: 1.5rem;
    }
    
    .info-item {
        flex-direction: column;
        text-align: center;
    }
    
    .info-icon {
        margin-bottom: 10px;
    }
}

@media (max-width: 480px) {
    .hero-service h2 {
        font-size: 1.5rem;
    }
    
    .service-features li {
        font-size: 0.9rem;
    }
    
    .btn-service {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}

.hero-service {
    padding: 230px 0 20px;
    
}
/* ========================================
   FAQ SECTION - GOLD & BLACK THEME
   ======================================== */

/* FAQ Section Background */
.bg-image-2 {
    position: relative;
    background-color: var(--black-dark);
}

.bg-image-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 0;
}

.bg-image-2 .container {
    position: relative;
    z-index: 1;
}

/* FAQ Title */
.bg-image-2 h2 {
    color: var(--white);
    font-weight: 700;
}

.bg-image-2 h2 .text-secondary {
    color: var(--gold-medium) !important;
}

/* FAQ Description */
.bg-image-2 .text-gray-600 {
    color: #cccccc !important;
}

/* FAQ Cards Container */
.card-group-corporate {
    margin-top: 20px;
}

/* Individual FAQ Card */
.card-corporate {
    background: var(--black-soft) !important;
    border: 1px solid rgba(212, 175, 55, 0.25) !important;
    border-radius: 12px !important;
    margin-bottom: 18px !important;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-corporate:hover {
    border-color: var(--gold-medium) !important;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.15);
    transform: translateY(-2px);
}

/* FAQ Card Header */
.card-corporate .card-header {
    background: var(--black-light) !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

/* FAQ Card Title / Question */
.card-corporate .card-title {
    margin: 0;
}

.card-corporate .card-title a {
    display: block;
    padding: 18px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gold-light) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    font-family: 'Montserrat', sans-serif;
}

.card-corporate .card-title a:hover {
    color: var(--gold-medium) !important;
    background-color: rgba(212, 175, 55, 0.05);
    padding-left: 30px;
}

/* Card Arrow Icon */
.card-arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

.card-arrow::before,
.card-arrow::after {
    content: '';
    position: absolute;
    background-color: var(--gold-medium);
    transition: all 0.3s ease;
}

.card-arrow::before {
    width: 12px;
    height: 2px;
    top: 11px;
    left: 6px;
}

.card-arrow::after {
    width: 2px;
    height: 12px;
    top: 6px;
    left: 11px;
}

/* Collapsed state */
.card-title a.collapsed .card-arrow::after {
    height: 0;
    opacity: 0;
}

.card-title a.collapsed .card-arrow::before {
    width: 12px;
}

/* Expanded state */
.card-title a:not(.collapsed) .card-arrow::after {
    height: 12px;
}

/* FAQ Card Body / Answer */
.card-corporate .card-body {
    background: var(--black-soft) !important;
    padding: 20px 25px;
    border-top: 1px solid rgba(212, 175, 55, 0.15);
}

.card-corporate .card-body p {
    color: #dddddd !important;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* Active/Expanded Card */
.card-corporate .collapse.show {
    background: var(--black-soft);
}

/* First card expanded by default */
.card-corporate:first-child .card-header {
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

/* Animation for collapse/expand */
.collapse {
    transition: all 0.3s ease;
}

/* FAQ Section Responsive */
@media (max-width: 768px) {
    .card-corporate .card-title a {
        padding: 15px 20px;
        padding-right: 40px;
        font-size: 0.95rem;
    }
    
    .card-corporate .card-body {
        padding: 15px 20px;
    }
    
    .card-corporate .card-body p {
        font-size: 0.85rem;
    }
    
    .card-arrow {
        right: 15px;
    }
}

@media (max-width: 480px) {
    .card-corporate .card-title a {
        padding: 12px 15px;
        padding-right: 35px;
        font-size: 0.85rem;
    }
    
    .card-corporate .card-body {
        padding: 12px 15px;
    }
}
.card-corporate .card-title a {
    background: #2e3030;
}

.card-corporate .card-arrow {
   
    background: #2e3030;
   
}

.service-features li {
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    font-size: large;
}
.service-description {
    border: 1px solid rgba(212, 175, 55, 0.2);
    font-size: large;

}
/* ========================================
   SERVICE DETAILS - ENLARGED TEXT
   ======================================== */

.service-details-row .info-box p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #e0e0e0;
}

.service-details-row .info-box p:first-of-type {
    font-size: 1.2rem;
    font-weight: 500;
}

.service-details-row .info-box h3 {
    font-size: 1.8rem;
    margin-bottom: 25px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .service-details-row .info-box p {
        font-size: 1rem;
        line-height: 1.6;
    }
    
    .service-details-row .info-box p:first-of-type {
        font-size: 1.05rem;
    }
    
    .service-details-row .info-box h3 {
        font-size: 1.5rem;
    }
}

 .row.align-items-stretch {
        display: flex;
        flex-wrap: wrap;
    }
    
    .row.align-items-stretch > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
    
    .service-detail-img.equals-height {
        height: 100%;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .service-detail-img.equals-height img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .info-box.equals-height {
        height: 100%;
    }