/* Bootstrap 5 Custom Variables */
:root {
    --bs-primary: #8b4513;
    --bs-secondary: #6b5b47;
    --bs-warning: #ffd700;
    --bs-light: #f8f6f0;
    --bs-dark: #333;
}

/* Import Bootstrap 5 */
@import url('https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css');

/* Custom Styles */
body {
    font-family: 'Arial', sans-serif;
    background-color: var(--bs-light);
}

/* Hero Section */
.hero-section {
    /* background: linear-gradient(135deg, #f8f6f0 0%, #e8e0d0 100%); */
    min-height: 100vh;
    /* background: linear-gradient(135deg, #fbeaea 0%, #89090A 100%); */
    /* background: linear-gradient(135deg, #f8f1f1 0%, #b23a3b 100%); */
    /* background: linear-gradient(135deg, #fff7f7 0%, #d46b6c 100%); */
    background: linear-gradient(135deg, #fffafa 0%, #f3c9c9 100%);
}

/* Service Icons */
.service-icon {
    /* width: 60px; */
    /* height: 60px; */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
}

.car-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d4af37"><path d="M5 11l1.5-4.5h11L19 11m-1.5 5a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5m-11 0a1.5 1.5 0 0 1-1.5-1.5 1.5 1.5 0 0 1 1.5-1.5 1.5 1.5 0 0 1 1.5 1.5 1.5 1.5 0 0 1-1.5 1.5M18.92 6c-.2-.58-.76-1-1.42-1H6.5c-.66 0-1.22.42-1.42 1L3 12v8a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1h12v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-8l-2.08-6z"/></svg>');
}

.motorbike-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d4af37"><path d="M19.5 9.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm-15 0c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zM12 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 18c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm-1-9h2v6h-2v-6zm8-2h-2v8h2V9z"/></svg>');
}

.inter-province-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d4af37"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>');
}

/* Phone Mockup */
.phone-mockup {
    position: relative;
    width: 300px;
    height: 600px;
    background: #000;
    border-radius: 30px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.app-interface {
    padding: 20px;
    height: 100%;
    background: linear-gradient(135deg, #f8f6f0 0%, #e8e0d0 100%);
}

.app-header {
    text-align: center;
    font-weight: bold;
    color: var(--bs-primary);
    margin-bottom: 30px;
    font-size: 0.9rem;
}

.vehicle-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.vehicle-icon {
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.location-pin {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 60px;
    height: 60px;
    background: var(--bs-warning);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(255,215,0,0.4);
}

.location-pin::before {
    content: '📍';
    font-size: 30px;
}

.hero-person {
    position: absolute;
    right: -50px;
    bottom: 0;
}

.person-image {
    width: 200px;
    height: auto;
}

/* App Interface Elements */
.greeting {
    font-size: 1.2rem;
    color: var(--bs-primary);
    margin-bottom: 20px;
    font-weight: bold;
}

.route-selection {
    font-size: 1rem;
    color: var(--bs-secondary);
    margin-bottom: 15px;
}

.map-input input {
    border: 2px solid #d4af37;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.service-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.option {
    padding: 8px 12px;
    background: #d4af37;
    color: #fff;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
}

.vehicle-selection {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Feature Icons */
.feature-icon {
    width: 70px;
    height: 70px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

.shield-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d4af37"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11H16V16H8V11H9.2V10C9.2,8.6 10.6,7 12,7M12,8.2C11.2,8.2 10.4,8.7 10.4,10V11H13.6V10C13.6,8.7 12.8,8.2 12,8.2Z"/></svg>');
}

.thumbs-up-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d4af37"><path d="M23,10C23,8.89 22.1,8 21,8H14.68L15.64,3.43C15.66,3.33 15.67,3.22 15.67,3.11C15.67,2.7 15.5,2.32 15.23,2.05L14.17,1L7.59,7.58C7.22,7.95 7,8.45 7,9V19A2,2 0 0,0 9,21H18C18.83,21 19.54,20.5 19.84,19.78L22.86,12.73C22.95,12.5 23,12.26 23,12V10M1,21H5V9H1V21Z"/></svg>');
}

.clock-icon {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23d4af37"><path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z"/></svg>');
}

/* Service Card Icons */
.service-card-icon {
    width: 80px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* News Image */
.news-image {
  
    overflow: hidden;
}

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

/* Swiper Customization */
.swiper-pagination-bullet {
    background: #d4af37;
}

.swiper-pagination-bullet-active {
    background: var(--bs-primary);
}

/* Custom Button Styles */
.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 139, 69, 19;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .phone-mockup {
        width: 250px;
        height: 500px;
    }
    
    .hero-person {
        right: -30px;
    }
    
    .person-image {
        width: 150px;
    }
}

@media (max-width: 480px) {
    .phone-mockup {
        width: 200px;
        height: 400px;
        padding: 15px;
    }
    
    .hero-person {
        right: -20px;
    }
    
    .person-image {
        width: 120px;
    }
}


.slogan-middle{}
.slogan-middle p{font-size: 1.5rem;font-weight: 600;color: var(--primary);margin: 0;}
.slogan-middle h2{
    font-size: 2.2rem;
    font-weight: 600;
    color: #4a4a4a;
    margin-bottom: 20px;
}
.index-title{}
.index-title p{
    font-size: 1.5rem;
    font-weight: 600;
    color: #7c7c7c;
    text-transform: capitalize;
}
.index-title h2{
    font-size: 2.5rem;
    color: var(--primary);
}
.testimonials-section{
background: linear-gradient(135deg, #fffafa 0%, #f3c9c9 100%);
}
.testimonial-item{
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}
.testimonial-item img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
@media(max-width: 768px){
    .slogan-middle p{font-size: 1.2rem;}
    .slogan-middle h2{font-size: 1.8rem;}
    .index-title p{font-size: 1.2rem;}
    .index-title h2{font-size: 2.2rem;}
    .lead{font-size: 1rem;}
}
@media(max-width: 480px){
    .slogan-middle p{font-size: 1rem;}
    .slogan-middle h2{font-size: 1.5rem;}
    .index-title p{font-size: 1rem;}
    .index-title h2{font-size: 2rem;}
}