.header-bg {
    background-color: #70a4d7;
}

body {
    background-color: #f8f9fa;
    direction: rtl;
}

.layout-wrapper {
    direction: ltr;
    /* Flip Bootstrap layout back to LTR */
}

/* Swiper container with external navigation */
.swiper-container-wrapper {
    position: relative;
    padding: 10px 10px;
    /* Add padding for external buttons */
}

.swiper {
    padding: 0px 0;
}

/* Set fixed width for slides */
.swiper-slide {
    width: 250px !important;
    /* Force 400px width */
    flex-shrink: 0;
    /* Prevent shrinking */
}

.card img {
    object-fit: cover;
    height: 250px;
}

/* Position navigation buttons outside the swiper */
.swiper-button-next,
.swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #007bff;
    background: white;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-top: 0;
}

.swiper-button-next {
    right: 10px;
    /* Position outside the swiper */
    left: auto;
}

.swiper-button-prev {
    left: 10px;
    /* Position outside the swiper */
    right: auto;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px;
    font-weight: bold;
}

@media (min-width: 768px) {
    .fixed-card {
        position: sticky;
        top: 20px;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .swiper-container-wrapper {
        padding: 30px 40px;
    }

    .swiper-slide {
        width: 300px !important;
        /* Smaller width on mobile */
    }
}

@media (max-width: 480px) {
    .swiper-container-wrapper {
        padding: 30px 20px;
    }

    .swiper-slide {
        width: 280px !important;
        /* Even smaller on very small screens */
    }
}



.card-slider {
    height: 340px;
    /* גובה אחיד לכל כרטיס */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-img-top-slider {
    width: 100%;
    height: 225px;
    object-fit: cover;
}

.card-body-slider {
    display: flex;
    align-items: flex-end;
    /* שים את הכותרת בתחתית הכרטיס */
    justify-content: center;
    padding: 10px;
    height: 100%;
    /* מאפשר להתפרס על השטח שנשאר */
    text-align: center;
}

.card-title-slider {
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.4;
    direction: rtl;
}

.brand-img {
    width: 200px;
    height: 200px;

}

/* Footer */
footer {
    background-color: #70a4d7;
 /*   background: var(--dark-gradient) !important; */
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--secondary-gradient);
}

.social-link {
    color: var(--text-light) !important;
    text-decoration: none;
    padding: 1rem;
    border-radius: 15px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    margin: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    color: #ffffff !important;
}

.social-link i {
    font-size: 1.5rem;
    margin-left: 0.5rem;
}

/* Header profile image specific styles - add to your index.css */

/* Make only the header profile image column align to bottom */
.col-md-4:has(.header-profile-img) {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

/* Style only the header profile image */
.header-profile-img {
    width: 100%;
    max-width: 400px !important;
    height: auto;
    object-fit: cover;
    margin-bottom: 0 !important; /* Remove bottom margin to sit at bottom */
}

/* Ensure the header card has proper height */
.header-bg .card-body {
    min-height: 350px;
}

/* Make sure the header row aligns properly */
.header-bg .card-body .row {
    align-items: flex-end;
    min-height: 100%;
}

/* Alternative approach if :has() doesn't work in older browsers */
.header-image-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.header-image-container .header-profile-img {
    width: 100%;
    max-width: 280px;
    height: auto;
    object-fit: cover;
    margin-bottom: 0;
}

/* Replace the existing header image styles in your index.css with these: */

/* Remove padding from card-body to eliminate gap */
.header-bg .card-body {
    min-height: 350px;
    padding-bottom: 0 !important; /* Remove bottom padding */
}

/* Make the header image container fill full height and align to bottom */
.header-image-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
    padding-bottom: 0; /* Remove any padding */
    margin-bottom: 0; /* Remove any margin */
}

/* Style the header profile image to sit at very bottom */
.header-image-container .header-profile-img {
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: cover;
    margin-bottom: 0 !important; /* No bottom margin */
    border-bottom-left-radius: 0 !important; /* Remove bottom radius to sit flush */
    border-bottom-right-radius: 0 !important; /* Remove bottom radius to sit flush */
}

/* Make sure the header row stretches full height */
.header-bg .card-body .row {
    align-items: stretch; /* Changed from flex-end to stretch */
    min-height: 100%;
    margin-bottom: 0; /* Remove any margin */
}

/* Ensure the text column has proper padding but image column doesn't */
.header-bg .card-body .col-md-8 {
    padding-bottom: 1.25rem; /* Keep padding for text content */
}

.header-bg .card-body .col-md-4.header-image-container {
    padding-bottom: 0 !important; /* Remove padding from image column */
}