/* ==========================
   WINDOW INFO SECTION
========================== */

.window-info{

    padding:110px 0;

    background:#F8FAFC;

}


/* ==========================
   SECTION HEADING
========================== */

.window-section-heading{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.window-eyebrow{

    display:inline-block;

    color:#2563EB;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1.5px;

    margin-bottom:15px;

}

.window-section-heading h2{

    font-size:clamp(32px,4vw,46px);

    line-height:1.15;

    color:#111827;

    margin:0 0 20px;

}

.window-section-heading p{

    max-width:650px;

    margin:0 auto;

    color:#6B7280;

    font-size:18px;

    line-height:1.7;

}


/* ==========================
   MAIN WRAPPER
========================== */

.window-info-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


/* ==========================
   IMAGE
========================== */

.window-info-image{

    position:relative;

}

.window-info-image img{

    width:100%;

    height:560px;

    object-fit:cover;

    display:block;

    border-radius:24px;

    box-shadow:0 25px 60px rgba(15,23,42,.12);

}


/* Floating badge */

.image-badge{

    position:absolute;

    left:25px;

    bottom:25px;

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:16px 20px;

    background:rgba(255,255,255,.94);

    backdrop-filter:blur(10px);

    border-radius:12px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.image-badge strong{

    color:#111827;

    font-size:16px;

}

.image-badge span{

    color:#6B7280;

    font-size:13px;

}


/* ==========================
   CONTENT
========================== */

.window-info-content{

    max-width:600px;

}

.window-section-tag{

    display:inline-block;

    padding:8px 16px;

    border-radius:50px;

    background:#DBEAFE;

    color:#2563EB;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.window-info-content h3{

    font-size:clamp(30px,3.5vw,42px);

    line-height:1.15;

    color:#111827;

    margin:0 0 25px;

}

.window-info-content > p{

    color:#6B7280;

    font-size:16px;

    line-height:1.8;

    margin-bottom:18px;

}


/* ==========================
   BENEFITS
========================== */

.window-benefits{

    display:flex;

    flex-direction:column;

    gap:18px;

    margin:30px 0;

}

.window-benefit{

    display:flex;

    align-items:flex-start;

    gap:15px;

    padding:16px;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:12px;

    transition:.3s ease;

}

.window-benefit:hover{

    transform:translateX(5px);

    box-shadow:0 10px 25px rgba(15,23,42,.07);

}

.benefit-icon{

    width:42px;

    height:42px;

    min-width:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#EFF6FF;

    border-radius:10px;

    font-size:20px;

}

.window-benefit h4{

    margin:0 0 5px;

    font-size:16px;

    color:#1F2937;

}

.window-benefit p{

    margin:0;

    color:#6B7280;

    font-size:14px;

    line-height:1.5;

}


/* ==========================
   CTA
========================== */

.window-info-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 32px;

    background:#2563EB;

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-size:16px;

    font-weight:700;

    transition:.3s ease;

}

.window-info-btn:hover{

    background:#1D4ED8;

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(37,99,235,.3);

}


/* ==========================
   TABLET / MOBILE
========================== */

@media(max-width:900px){

    .window-info{

        padding:80px 0;

    }

    .window-info-wrapper{

        grid-template-columns:1fr;

        gap:45px;

    }

    .window-info-content{

        max-width:100%;

    }

    .window-info-image img{

        height:450px;

    }

}

@media(max-width:600px){

    .window-section-heading{

        margin-bottom:45px;

    }

    .window-section-heading h2{

        font-size:32px;

    }

    .window-section-heading p{

        font-size:16px;

    }

    .window-info-image img{

        height:350px;

        border-radius:18px;

    }

    .image-badge{

        left:15px;

        bottom:15px;

    }

    .window-info-content h3{

        font-size:30px;

    }

    .window-benefit{

        padding:14px;

    }

    .window-info-btn{

        width:100%;

    }

}