/* ====== Navbar Core Styles ====== */
.navbar {
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.98);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    transition: padding 0.3s ease, background-color 0.3s ease;
    width: 100%;
    min-height: 90px; /* konsisten tinggi */
}

.navbar.scrolled {
    padding: 0.5rem 1rem;
}

.navbar-brand {
    display: flex;
    align-items: center;
    color: #63B23E !important;
}



.navbar-brand img {
    max-height: 44px; 
    width: auto;
}

/* ====== Navigation Links ====== */
.navbar-nav {
    margin-left: 2rem;
}

.nav-item {
    position: relative;
    margin: 0 1rem;
}

.nav-link {
    color: #2c3e50 !important;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0 !important;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #3498db !important;
}

.nav-link.active {
    color: #3498db !important;
}

/* ====== Auth Buttons ====== */
.navbar-auth {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-book,
.navbar-auth .btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    line-height: 1.2;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ====== Profile Dropdown ====== */
.dropdown-toggle {
    background: none;
    border: none;
    padding: 0.4rem 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #2c3e50;
    text-decoration: none;
}

.dropdown-toggle img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* ====== Mobile Styles ====== */
@media (max-width: 991.98px) {
    html, body {
        overflow-x: hidden;
    }
    .navbar {
        padding: 0.5rem 1rem;
        min-height: 60px;
    }

    .navbar-brand img {
        max-height: 38px; /* konsisten dengan desktop */
    }

    .navbar-toggler {
        padding: 0.5rem;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: white;
        margin-left: 0.5rem;
    }

    /* Animasi Collapse */
    .navbar-collapse {
        background: rgba(255, 255, 255, 0.98);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 0.5rem;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* smooth scroll iOS */
        transform: translateY(-10px);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease 0.05s;
    }
    .navbar-collapse.show {
        transform: translateY(0);
        opacity: 1;
    }

    /* Dropdown mobile supaya tidak overflow */
    .navbar .dropdown-menu {
        position: static;
        float: none;
        width: 100%;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .navbar-auth {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        margin-top: 1rem;
    }

    .btn-book,
    .navbar-auth .btn {
        width: 100%;
        padding: 0.7rem 1rem;
        font-size: 1rem;
        justify-content: center;
        box-sizing: border-box;
    }

    .nav-link {
        padding: 0.75rem 1rem !important;
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}
/* hero style */
.hero-section {
position: relative;
overflow: hidden;
background-color: #ffffff;
}

.hero-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}

.language-switch .btn {
font-size: 0.875rem;
}

@media (max-width: 991.98px) {
.hero-section .container {
        padding: 2rem 15px;
    }

.hero-section h1 {
font-size: 2.5rem;
}

.position-absolute.top-0.end-0 {
opacity: 0.7;
}
}

/* stats style */

.stats-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: center;
    color: white;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
}

.stat-card.highlighted {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #FFB800;
}

.stat-description {
    font-size: 1rem;
    line-height: 1.6;
    opacity: 0.9;
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #FFB800;
}

@media (max-width: 768px) {
    .stats-section {
        padding: 3rem 0;
    }

    .stat-number {
        font-size: 2rem;
    }

    .stat-description {
        font-size: 0.9rem;
    }
}

/* New styles for features section */
.features-section {
padding: 5rem 0;
background: #fff;
}

.features-content h2 {
font-size: 2.8rem;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 1rem;
}

.features-description {
color: #666;
margin-bottom: 2.5rem;
line-height: 1.6;
font-size: 1rem;
}

.feature-list {
margin-top: 2rem;
}

.feature-item {
margin-bottom: 2rem;
display: flex;
align-items: flex-start;
}

.feature-icon {
width: 40px;
height: 40px;
background: #f0f6ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1rem;
flex-shrink: 0;
}

.feature-icon i {
color: #2673DD;
font-size: 1.2rem;
}

.feature-content {
flex: 1;
}

.feature-title {
font-size: 1.2rem;
font-weight: 600;
color: #1A1A1A;
margin-bottom: 0.5rem;
}

.feature-text {
color: #666;
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}


.vehicle-image {
max-width: 100%;
height: auto;
}

/* Vehicles Section Styles */
.vehicles-section {
padding: 5rem 0;
background: #fff;
}

.section-title {
text-align: center;
font-size: 2.5rem;
font-weight: bold;
color: #1A1A1A;
margin-bottom: 3rem;
position: relative;
}

.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: #ffd700;
}

.vehicle-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
margin-bottom: 2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.vehicle-image-container {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
}

.vehicle-image {
width: 100%;
height: 100%;
object-fit: cover;
}

.vehicle-details {
padding: 1.5rem;
}

.vehicle-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}

.vehicle-info {
display: flex;
align-items: center;
color: #666;
font-size: 0.9rem;
}

.info-label {
width: 120px;
color: #333;
font-weight: 500;
}

.info-icon {
color: #2673DD;
width: 16px;
margin-right: 8px;
}

.book-now-btn {
width: 100%;
background-color: #2673DD;
border: none;
padding: 0.75rem;
color: white;
font-weight: 500;
transition: all 0.3s ease;
margin-top: 0.5rem;
}

.book-now-btn:hover {
background-color: #1e5bb8;
}

.pagination-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 2rem;
}

.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ddd;
}

.dot.active {
background: #2673DD;
}

/* About Section Styles */
.about-section {
    background-color: white;
}
.experience-counter {
transition: transform 0.3s ease;
}

.experience-counter:hover {
transform: scale(1.05);
}

.feature-icon {
transition: all 0.3s ease;
}
.feature-item {
background-color: white;
}
.feature-item:hover {
    background-color: white;
    box-shadow: white;
}


.feature-text {
    margin-left: 10px;
}

.feature-card:hover .feature-icon {
transform: translateY(-5px);
}

.about-image-wrapper {
position: relative;
overflow: hidden;
border-radius: 15px;
}

.about-image-wrapper img {
transition: transform 0.5s ease;
}

.about-image-wrapper:hover img {
transform: scale(1.05);
}

/* Contact Section Styles */
.contact-info-card {
transition: transform 0.3s ease;
}

.contact-info-card:hover {
transform: translateY(-5px);
}

.contact-form input:focus,
.contact-form textarea:focus {
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
border-color: #80bdff;
}

.contact-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(45deg, #007bff, #0056b3);
}

/* Map Styles */
.map-container {
height: 400px;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Animation Classes */
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease;
}

.fade-in.visible {
opacity: 1;
transform: translateY(0);
}

.testimonials-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
opacity: 0;
visibility: hidden;
}

.testimonial-carousel {
max-width: 800px;
margin: 0 auto;
}

.testimonial-card {
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin: 1rem auto;
max-width: 600px;
}

.testimonial-image img {
width: 100px;
height: 100px;
object-fit: cover;
transition: transform 0.3s ease;
}

.hover-scale:hover {
transform: scale(1.1);
}

.carousel-control-prev,
.carousel-control-next {
width: 40px;
height: 40px;
background: rgba(13, 110, 253, 0.2);
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}

.carousel-control-prev {
left: 0;
}

.carousel-control-next {
right: 0;
}

.carousel-indicators {
bottom: -50px;
}

.carousel-indicators button {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(13, 110, 253, 0.5);
}

.decoration-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 0% 0%, rgba(13, 110, 253, 0.1) 0%, transparent 50%),
radial-gradient(circle at 100% 100%, rgba(13, 110, 253, 0.1) 0%, transparent 50%);
pointer-events: none;
}

                .custom-accordion .accordion-item {
                    opacity: 0;
                    transform: translateY(20px);
                    visibility: hidden;
                }
        
                .faq-section .section-title {
                    opacity: 0;
                    transform: translateY(20px);
                    visibility: hidden;
                }

.custom-accordion .accordion-item {
background: white;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}

.custom-accordion .accordion-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.custom-accordion .accordion-button {
border-radius: 15px;
padding: 1.2rem;
font-weight: 500;
transition: all 0.3s ease;
}

.custom-accordion .accordion-button:not(.collapsed) {
background-color: #f8f9fa;
color: var(--bs-primary);
}

.custom-accordion .accordion-body {
padding: 1.5rem;
}

/* Animated background shapes */
.faq-shapes .shape-1,
.faq-shapes .shape-2 {
position: absolute;
background: rgba(13, 110, 253, 0.1);
border-radius: 50%;
animation: float 6s infinite ease-in-out;
}

.faq-shapes .shape-1 {
width: 300px;
height: 300px;
top: -150px;
right: -150px;
}

.faq-shapes .shape-2 {
width: 200px;
height: 200px;
bottom: -100px;
left: -100px;
animation-delay: -3s;
}

@keyframes float {

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

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

.contact-section {
background-color: #f8f9fa;
opacity: 0;
visibility: hidden;
}

.contact-info-card,
.contact-form-card {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
height: 100%;
opacity: 0;
transform: translateY(20px);
}

.icon-box {
width: 45px;
height: 45px;
background: rgba(13, 110, 253, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #0d6efd;
}

.contact-item:hover .icon-box {
background: #0d6efd;
color: white;
transition: all 0.3s ease;
}

.social-links {
display: flex;
gap: 1rem;
}

.social-link {
width: 35px;
height: 35px;
background: rgba(13, 110, 253, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #0d6efd;
text-decoration: none;
transition: all 0.3s ease;
}

.social-link:hover {
background: #0d6efd;
color: white;
transform: translateY(-3px);
}

.form-control {
border: 1px solid #dee2e6;
}

.form-control:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.map-container {
border-radius: 15px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
opacity: 0;
transform: translateY(20px);
}

 .footer {
     background-color: #2c3e50;
     color: #ffffff;
     padding: 4rem 0 2rem 0;
 }

 .footer-content {
     opacity: 0;
     transform: translateY(20px);
 }

 .footer-logo {
     font-size: 1.8rem;
     font-weight: bold;
     margin-bottom: 1rem;
     color: #ffffff;
 }

 .footer-description {
     color: #ecf0f1;
     margin-bottom: 2rem;
     font-size: 0.95rem;
     max-width: 300px;
 }

 .footer-title {
     font-size: 1.2rem;
     font-weight: 600;
     margin-bottom: 1.5rem;
     color: #ffffff;
 }

 .footer-links {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .footer-links li {
     margin-bottom: 0.8rem;
 }

 .footer-links a {
     color: #ecf0f1;
     text-decoration: none;
     transition: color 0.3s ease;
     font-size: 0.95rem;
 }

 .footer-links a:hover {
     color: #3498db;
 }

 .footer-contact-info {
     margin-bottom: 1rem;
 }

 .footer-contact-item {
     display: flex;
     align-items: center;
     margin-bottom: 1rem;
     color: #ecf0f1;
 }

 .footer-contact-item i {
     margin-right: 10px;
     color: #3498db;
 }

 .social-links {
     display: flex;
     gap: 1rem;
     margin-top: 1.5rem;
 }

 /* .social-links a {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     background-color: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     color: #ffffff;
     transition: all 0.3s ease;
 } */

 .social-links a:hover {
     background-color: #3498db;
     transform: translateY(-3px);
 }

 .footer-bottom {
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
     color: #ecf0f1;
     font-size: 0.9rem;
 }

         .about-section {
             padding: 6rem 0;
             /* background: linear-gradient(to right, #f8f9fa 50%, #ffffff 50%); */
             overflow: hidden;
         }
    
         .about-image-container {
             position: relative;
             opacity: 0;
         }
    
         .about-image {
             width: 100%;
             height: auto;
             border-radius: 20px;
             box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
         }
    
         .experience-badge {
             position: absolute;
             bottom: -20px;
             right: 20px;
             background: #3498db;
             color: white;
             padding: 1.5rem;
             border-radius: 50%;
             width: 120px;
             height: 120px;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             box-shadow: 0 10px 20px rgba(52, 152, 219, 0.3);
         }
    
         .experience-number {
             font-size: 2rem;
             font-weight: bold;
             line-height: 1;
         }
    
         .experience-text {
             font-size: 0.9rem;
             text-align: center;
         }
    
         .about-content {
             padding-left: 3rem;
             opacity: 0;
         }
    
         .section-subtitle {
             color: #3498db;
             font-weight: 600;
             margin-bottom: 1rem;
             text-transform: uppercase;
             letter-spacing: 2px;
         }
    
         .section-title {
             font-size: 2.5rem;
             font-weight: bold;
             margin-bottom: 1.5rem;
             color: #2c3e50;
         }
    
         .about-description {
             color: #666;
             margin-bottom: 2rem;
             line-height: 1.8;
         }
    
         .features-list {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 1.5rem;
             margin-bottom: 2rem;
         }
    
         .feature-item {
             display: flex;
             align-items: center;
             gap: 1rem;
             background-color: white;
         }
    
         /* .feature-icon {
             width: 50px;
             height: 50px;
             background: rgba(52, 152, 219, 0.1);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             color: #3498db;
             font-size: 1.5rem;
         } */
    
         .feature-text {
             font-weight: 500;
             color: #2c3e50;
         }
    
         @media (max-width: 991.98px) {
             .about-section {
                 background: #f8f9fa;
             }
    
             .about-content {
                 padding-left: 0;
                 margin-top: 3rem;
             }
         }

                 .section-padding {
                     padding: 80px 0;
                 }
        
                 /* Requirements Section Styles */
                 .requirements-section {
                     background-color: #f8f9fa;
                     overflow: hidden;
                 }
        
                 .requirements-card {
                     background: white;
                     border-radius: 15px;
                     padding: 30px;
                     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
                     height: 100%;
                     transition: transform 0.3s ease;
                 }
        
                 .requirements-card:hover {
                     transform: translateY(-5px);
                 }
        
                 .requirement-icon {
                     width: 60px;
                     height: 60px;
                     background: #e7f1ff;
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     margin-bottom: 20px;
                 }
        
                 .requirement-icon i {
                     font-size: 24px;
                     color: #0d6efd;
                 }
        
                 /* Facilities Section Styles */
                 .facilities-section {
                     background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
                     overflow: hidden;
                 }
        
                 .facility-carousel {
                     position: relative;
                     padding: 40px 0;
                 }
        
                 .facility-card {
                     background: white;
                     border-radius: 20px;
                     padding: 40px 30px;
                     margin: 15px;
                     text-align: center;
                     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
                     transition: all 0.3s ease;
                     position: relative;
                     overflow: hidden;
                 }
        
                 .facility-card::before {
                     content: '';
                     position: absolute;
                     top: 0;
                     left: 0;
                     width: 100%;
                     height: 5px;
                     background: linear-gradient(90deg, #0d6efd, #6610f2);
                 }
        
                 .facility-icon {
                     width: 80px;
                     height: 80px;
                     background: #f8f9fa;
                     border-radius: 50%;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     margin: 0 auto 25px;
                     position: relative;
                 }
        
                 .facility-icon::after {
                     content: '';
                     position: absolute;
                     width: 90px;
                     height: 90px;
                     border: 2px dashed #0d6efd;
                     border-radius: 50%;
                     animation: rotate 15s linear infinite;
                 }
        
                 @keyframes rotate {
                     from {
                         transform: rotate(0deg);
                     }
        
                     to {
                         transform: rotate(360deg);
                     }
                 }
        
                 .facility-icon i {
                     font-size: 32px;
                     color: #0d6efd;
                 }
        
                 .facility-card h4 {
                     margin: 15px 0;
                     color: #212529;
                 }
        
                 .facility-card p {
                     color: #6c757d;
                     margin-bottom: 0;
                 }
        
                 .facility-carousel .carousel-control-prev,
                 .facility-carousel .carousel-control-next {
                     width: 40px;
                     height: 40px;
                     background: #0d6efd;
                     border-radius: 50%;
                     top: 50%;
                     transform: translateY(-50%);
                     opacity: 1;
                 }
        
                 .facility-carousel .carousel-control-prev {
                     left: -20px;
                 }
        
                 .facility-carousel .carousel-control-next {
                     right: -20px;
                 }
        
                 .facility-carousel .carousel-indicators {
                     bottom: -40px;
                 }
        
                 .facility-carousel .carousel-indicators button {
                     width: 10px;
                     height: 10px;
                     border-radius: 50%;
                     background-color: #0d6efd;
                     opacity: 0.5;
                     margin: 0 5px;
                 }
        
                 .facility-carousel .carousel-indicators button.active {
                     opacity: 1;
                 }
        
                 @media (max-width: 768px) {
        
                     .requirements-card,
                     .facility-card {
                         margin-bottom: 20px;
                     }
        
                     .facility-carousel .carousel-control-prev,
                     .facility-carousel .carousel-control-next {
                         display: none;
                     }
                 }