/* ==========================================================================
   CONTENT & SECTION STYLES
   Structure for driven text, vision, solutions, and section spacing
   ========================================================================== */
.driven-text {
    font-size: 24px;
    font-weight: var(--font-weight-light);
    margin: 40px 0 0 0;
    color: var(--primary-color);
}

.feat-salution-main,
.vision-main {
    padding: 140px 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 60px;
}

.vision-main p {
    margin: 0;
}

.vision-main h2 {
    color: var(--primary-color);
    text-align: center;
    font-size: 42px;
    font-weight: var(--font-weight-normal);
}

/* ==========================================================================
   NEURO SURGERY SECTION
   Two-column layout with image and content
   ========================================================================== */
.neuro-surgery-main {
    display: flex;
    justify-content: space-between;
    padding: 120px 0 0 0;
}

.neuro-surgery-left {
    width: 56%;
}

.neuro-surgery-right {
    width: 30%;
    height: 414px;
}

.neuro-surgery-right img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: var(--radius);
}

/* ==========================================================================
   WHY CHOOSE ROBOTIC SECTION
   Centered stacked layout with large spacing
   ========================================================================== */
.Why-choose-robotic {
    padding: 120px 0 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 96px;
}

/* ==========================================================================
   RESEARCH CARD SECTION
   Three-column card layout with hover effects
   ========================================================================== */
.research-card-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    gap: 32px;
}

.research-card {
    min-height: 525px;
    width: 32%;
    border-top: 1px solid var(--primary-color);
    border-radius: var(--radius);
    border-bottom: 1px solid var(--accent-color);
    padding: 36px 36px 70px 36px;
    box-shadow: 0 -0.543px 20.334px 0 rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}

.research-card h1 {
    font-size: 24px;
    color: var(--primary-color);
    font-weight: var(--font-weight-medium);
    padding: 48px 0 32px 0;
    max-height: 145px;
    min-height: 145px;
}

.research-card p {
    font-size: 18px;
    font-weight: var(--font-weight-light);
    line-height: 28px;
    color: var(--primary-color);
}

.research-card:hover {
    transform: scale(1.03);
}

/* ==========================================================================
   COLLABORATION CARD SECTION
   Grid of feature cards with background image on hover
   ========================================================================== */
.collab-card-main {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.collab-card {
    position: relative;
    min-height: 525px;
    width: 32%;
    border-top: 1px solid var(--primary-color);
    border-radius: var(--radius);
    border-bottom: 1px solid var(--accent-color);
    padding: 36px 36px 70px 36px;
    box-shadow: 0 -0.543px 20.334px 0 rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.5s ease;
}

.collab-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-img) center/cover no-repeat;
    opacity: 0;
    border-radius: var(--radius);
    transition: opacity 0.5s ease;
    z-index: 0;
}

.collab-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.collab-card h1 {
    position: relative;
    z-index: 2;
    font-size: 28px;
    font-weight: var(--font-weight-medium);
    color: var(--primary-color);
    margin-top: 30px;
    text-shadow: 1px 1px 3px rgba(26, 25, 56, 0.4);
    transition: color 0.5s ease;
}

.collab-card h1::before {
    content: "";
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: width 0.5s ease;
}

.collab-card p {
    position: relative;
    z-index: 2;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    font-size: 20px;
    font-weight: var(--font-weight-normal);
    margin-top: 50px;
    color: var(--primary-color);
    transition: opacity 0.5s ease, max-height 0.5s ease;
}

.collab-card:hover::before { opacity: 1; }
.collab-card:hover::after { opacity: 1; }
.collab-card:hover h1::before { width: 50%; }
.collab-card:hover p { opacity: 1; max-height: 200px; }
.collab-card:hover { border: none; }

/* ==========================================================================
   VISION SECTION IMAGE
   Full-width image with shadow and rounded corners
   ========================================================================== */
.vision-main {
    padding: 140px 0 0 0;
}

.vision-img {
    height: 700px;
    border-radius: var(--radius);
    overflow: hidden;
    width: 100%;
    box-shadow: var(--shadow);
}

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

/* ==========================================================================
   SWIPER SLIDER SECTION
   Horizontal scrollable card slider
   ========================================================================== */
.swiper {
    width: 100%;
    margin: 36px 0 140px 0;
    overflow: hidden;
    padding: 20px 0;
    box-sizing: border-box;
}

.swiper-wrapper {
    display: flex;
}

.swiper-slide {
    flex-shrink: 0;
    width: 400px !important;
    height: 300px !important;
    display: flex !important;
    flex-direction: column;
    text-align: start;
    justify-content: space-between;
    padding: 28px 24px;
    border-radius: var(--radius);
    margin-right: 16px;
}

.swiper-slide h1 {
    font-size: 22px;
    color: var(--primary-color);
    font-weight: var(--font-weight-normal);
}

.swiper-slide p {
    font-size: 16px;
    color: var(--primary-color);
    font-weight: var(--font-weight-light);
    line-height: 26px;
}

.swiper-slide a {
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: #8c8c9b;
    transition: all 0.3s ease;
}

.swiper-slide a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   Breakpoints for mobile and tablet devices
   ========================================================================== */
@media (max-width: 1250px) {
    .feat-salution-main, .vision-main,
   .Why-choose-robotic{
    padding: 80px 0 0 0;
   }
    .neuro-surgery-main{
        padding: 80px 0 0 0;
        flex-direction: column;
    }
    .neuro-surgery-left,
    .neuro-surgery-right{
        width: 100%;
    }
  
    .neuro-surgery-right{
        margin: 40px 0 0 0;
    }
    .driven-text{
        font-size: 20px;
        text-align: start;
    }
    .feat-salution-main, .vision-main,
    .Why-choose-robotic{
        gap: 40px;
    }
    .feat-salution-main, .vision-main,
    .Why-choose-robotic{
        align-items: self-start;
        text-align: left;
    }
   
        .vision-img {
        height: 400px;
    }
    .collab-card-main,
    .research-card-main{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .collab-card,
    .research-card{
        width: 100%;
    }
}
@media (max-width: 768px) {  
    .collab-card-main,
    .research-card-main{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }  
    .research-card {
    display: flex
;
    flex-direction: column;
    align-items: center;
    min-height: auto;
}
.research-card h1{
    min-height: auto;
    max-height: auto;
}
    .driven-text {
        font-size: 18px;
    }
    .swiper-slide h1 {
        font-size: 18px;
    }
    .swiper-slide p {
        font-size: 14px;
    }
    .image-slider {
    height: 500px;
}

}

@media (max-width: 480px) {
    .research-card h1{
        font-size: 20px;
    }
    .research-card p{
        font-size: 16px;
    }
    .research-card{
        padding: 30px;
    }
    .swiper-slide {
        width: 300px !important;
        height: 270px !important;
        padding: 16px 12px;
    }
.image-slider {
        height: 300px;
    }
    .swiper-slide h1 {
        font-size: 18px;
    }

    .swiper-slide p {
        font-size: 14px;
    }
    .feature-card__description {
        font-size: 24px;
    }
   
}