/*==================================================
BIOINFRATECH
WHY BIOINFRATECH PAGE
==================================================*/


/*==================================================
ROOT VARIABLES
==================================================*/

:root{

    --awhy-primary:#0A2342;

    --awhy-secondary:#008C95;

    --awhy-accent:#00AEEF;

    --awhy-success:#00B67A;

    --awhy-dark:#1E293B;

    --awhy-text:#5F6F81;

    --awhy-border:#E6ECF3;

    --awhy-bg:#F7F9FC;

    --awhy-white:#FFFFFF;

    --awhy-radius-sm:14px;

    --awhy-radius-md:22px;

    --awhy-radius-lg:34px;

    --awhy-shadow-sm:
    0 10px 30px rgba(10,35,66,.08);

    --awhy-shadow-md:
    0 20px 60px rgba(10,35,66,.12);

    --awhy-shadow-lg:
    0 35px 90px rgba(10,35,66,.18);

}



/*==================================================
PAGE
==================================================*/

.awhy-page{

    background:var(--awhy-white);

    overflow-x:hidden;

}



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

.awhy-section{

    position:relative;

    padding:140px 0;

    background:
    linear-gradient(
    180deg,
    #FFFFFF 0%,
    #F8FBFD 100%);

}



/*==================================================
CONTAINER
==================================================*/

.awhy-container{

    width:min(1320px,92%);

    margin:auto;

}



/*==================================================
HEADER
==================================================*/

.awhy-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}



/*==================================================
TAG
==================================================*/

.awhy-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:60px;

    background:
    rgba(0,140,149,.08);

    color:var(--awhy-secondary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:24px;

}



/*==================================================
TITLE
==================================================*/

.awhy-title{

    font-size:

    clamp(2.4rem,5vw,3.8rem);

    line-height:1.15;

    color:var(--awhy-primary);

    margin-bottom:24px;

    font-weight:800;

}



/*==================================================
DESCRIPTION
==================================================*/

.awhy-description{

    font-size:1.08rem;

    line-height:2;

    color:var(--awhy-text);

    max-width:760px;

    margin:auto;

}
/*==================================================
BANNER
==================================================*/

.awhy-banner{

    position:relative;

    margin:0 auto 90px;

    border-radius:34px;

    overflow:hidden;

    box-shadow:var(--awhy-shadow-lg);

    background:#fff;

}

.awhy-banner img{

    width:100%;

    display:block;

    height:580px;

    object-fit:cover;

    transition:.6s ease;

}

.awhy-banner:hover img{

    transform:scale(1.04);

}

.awhy-banner::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    rgba(10,35,66,.05),

    rgba(10,35,66,.18)

    );

}



/*==================================================
FEATURE GRID
==================================================*/

.awhy-grid{

    display:grid;

    grid-template-columns:

    repeat(3,minmax(320px,1fr));

    gap:34px;

    align-items:stretch;

}



/*==================================================
COMMON CARD
==================================================*/

.awhy-card{

    position:relative;

    background:#fff;

    border:1px solid var(--awhy-border);

    border-radius:28px;

    padding:42px 34px;

    overflow:hidden;

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    border-color .35s ease;

    box-shadow:var(--awhy-shadow-sm);

}

.awhy-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--awhy-shadow-md);

    border-color:rgba(0,174,239,.25);

}



/*==================================================
TOP ACCENT
==================================================*/

.awhy-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:

    linear-gradient(

    90deg,

    var(--awhy-primary),

    var(--awhy-secondary),

    var(--awhy-accent)

    );

}



/*==================================================
CARD ICON WRAPPER
==================================================*/

.awhy-icon{

    width:78px;

    height:78px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    margin-bottom:28px;

    background:

    linear-gradient(

    135deg,

    var(--awhy-primary),

    var(--awhy-secondary)

    );

    color:#fff;

    font-size:2rem;

    box-shadow:

    0 18px 40px rgba(10,35,66,.16);

}



/*==================================================
CARD TITLE
==================================================*/

.awhy-card-title{

    color:var(--awhy-primary);

    font-size:1.55rem;

    line-height:1.3;

    margin-bottom:18px;

    font-weight:700;

}



/*==================================================
CARD DESCRIPTION
==================================================*/

.awhy-card-description{

    color:var(--awhy-text);

    line-height:1.9;

    font-size:1rem;

}

/*==================================================
PREMIUM CARD HOVER EFFECT
==================================================*/

.awhy-card{

    isolation:isolate;

}

.awhy-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    circle at top right,

    rgba(0,174,239,.10),

    transparent 65%

    );

    opacity:0;

    transition:.45s ease;

    z-index:-1;

}

.awhy-card:hover::after{

    opacity:1;

}

.awhy-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 70px rgba(10,35,66,.15);

}



/*==================================================
ICON ANIMATION
==================================================*/

.awhy-icon{

    transition:

    transform .35s ease,

    box-shadow .35s ease,

    background .35s ease;

}

.awhy-card:hover .awhy-icon{

    transform:

    translateY(-6px)

    rotate(-6deg)

    scale(1.08);

    background:

    linear-gradient(

    135deg,

    var(--awhy-secondary),

    var(--awhy-accent)

    );

    box-shadow:

    0 20px 45px rgba(0,140,149,.30);

}



/*==================================================
TITLE ANIMATION
==================================================*/

.awhy-card-title{

    transition:.35s ease;

}

.awhy-card:hover .awhy-card-title{

    color:var(--awhy-secondary);

}



/*==================================================
DESCRIPTION
==================================================*/

.awhy-card-description{

    transition:.35s ease;

}

.awhy-card:hover .awhy-card-description{

    color:var(--awhy-dark);

}



/*==================================================
BANNER EFFECT
==================================================*/

.awhy-banner{

    position:relative;

}

.awhy-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(10,35,66,.02),

    rgba(10,35,66,.12)

    );

    z-index:1;

    pointer-events:none;

}



/*==================================================
REVEAL ANIMATION
==================================================*/

.awhy-header,

.awhy-banner,

.awhy-card{

    opacity:0;

    transform:translateY(40px);

    animation:

    awhyFadeUp .9s ease forwards;

}

.awhy-banner{

    animation-delay:.2s;

}

.awhy-card:nth-child(1){

    animation-delay:.30s;

}

.awhy-card:nth-child(2){

    animation-delay:.40s;

}

.awhy-card:nth-child(3){

    animation-delay:.50s;

}

.awhy-card:nth-child(4){

    animation-delay:.60s;

}

.awhy-card:nth-child(5){

    animation-delay:.70s;

}

.awhy-card:nth-child(6){

    animation-delay:.80s;

}



/*==================================================
KEYFRAMES
==================================================*/

@keyframes awhyFadeUp{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.awhy-banner img{

    transition:

    transform .8s ease,

    filter .5s ease;

}

.awhy-banner:hover img{

    transform:scale(1.05);

    filter:brightness(1.03);

}



/*==================================================
SMOOTH TRANSITIONS
==================================================*/

.awhy-section *{

    transition-property:

    color,

    background,

    border-color,

    transform,

    box-shadow,

    opacity;

    transition-duration:.30s;

    transition-timing-function:ease;

}

/*==================================================
LARGE TABLETS
==================================================*/

@media (max-width:1200px){

    .awhy-container{

        width:min(94%,1200px);

    }

    .awhy-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:30px;

    }

    .awhy-banner img{

        height:500px;

    }

}



/*==================================================
TABLETS
==================================================*/

@media (max-width:992px){

    .awhy-section{

        padding:100px 0;

    }

    .awhy-header{

        margin-bottom:55px;

    }

    .awhy-title{

        font-size:2.7rem;

    }

    .awhy-description{

        font-size:1rem;

        line-height:1.9;

    }

    .awhy-banner{

        margin-bottom:70px;

        border-radius:24px;

    }

    .awhy-banner img{

        height:420px;

    }

    .awhy-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:26px;

    }

    .awhy-card{

        padding:34px 28px;

    }

}



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

@media (max-width:768px){

    .awhy-section{

        padding:80px 0;

    }

    .awhy-container{

        width:92%;

    }

    .awhy-header{

        margin-bottom:45px;

    }

    .awhy-tag{

        font-size:.72rem;

        letter-spacing:1.5px;

        padding:8px 18px;

    }

    .awhy-title{

        font-size:2.2rem;

        line-height:1.2;

    }

    .awhy-description{

        font-size:.96rem;

        line-height:1.8;

    }

    .awhy-banner{

        border-radius:20px;

        margin-bottom:50px;

    }

    .awhy-banner img{

        height:300px;

    }

    .awhy-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .awhy-card{

        padding:30px 24px;

        border-radius:22px;

    }

    .awhy-icon{

        width:68px;

        height:68px;

        font-size:1.7rem;

        margin-bottom:22px;

    }

    .awhy-card-title{

        font-size:1.35rem;

    }

    .awhy-card-description{

        font-size:.95rem;

        line-height:1.8;

    }

}



/*==================================================
SMALL MOBILE
==================================================*/

@media (max-width:576px){

    .awhy-section{

        padding:70px 0;

    }

    .awhy-title{

        font-size:1.9rem;

    }

    .awhy-description{

        font-size:.92rem;

    }

    .awhy-banner{

        border-radius:18px;

    }

    .awhy-banner img{

        height:240px;

    }

    .awhy-card{

        padding:26px 20px;

    }

    .awhy-icon{

        width:60px;

        height:60px;

        font-size:1.5rem;

        border-radius:18px;

    }

    .awhy-card-title{

        font-size:1.2rem;

    }

    .awhy-card-description{

        font-size:.9rem;

        line-height:1.75;

    }

}



/*==================================================
EXTRA SMALL DEVICES
==================================================*/

@media (max-width:360px){

    .awhy-title{

        font-size:1.7rem;

    }

    .awhy-banner img{

        height:210px;

    }

    .awhy-card{

        padding:22px 18px;

    }

}
/*==================================================
BACKGROUND DECORATIONS
==================================================*/

.awhy-section{

    overflow:hidden;

}

.awhy-section::before{

    content:"";

    position:absolute;

    top:-180px;

    left:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(0,174,239,.10),

    transparent 70%

    );

    pointer-events:none;

}

.awhy-section::after{

    content:"";

    position:absolute;

    right:-200px;

    bottom:-200px;

    width:500px;

    height:500px;

    border-radius:50%;

    background:

    radial-gradient(

    rgba(0,140,149,.08),

    transparent 70%

    );

    pointer-events:none;

}



/*==================================================
CARD SHINE EFFECT
==================================================*/

.awhy-card{

    overflow:hidden;

}

.awhy-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-50%;

    width:60%;

    height:260%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transform:rotate(25deg);

    transition:1s;

    pointer-events:none;

}

.awhy-card:hover::after{

    left:150%;

}



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

.awhy-banner::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(10,35,66,.05),

        rgba(10,35,66,.15)

    );

    pointer-events:none;

}



/*==================================================
KEYBOARD ACCESSIBILITY
==================================================*/

.awhy-card:focus-visible{

    outline:3px solid var(--awhy-accent);

    outline-offset:6px;

}

.awhy-banner img:focus-visible{

    outline:3px solid var(--awhy-accent);

}



/*==================================================
TEXT SELECTION
==================================================*/

.awhy-section ::selection{

    background:var(--awhy-accent);

    color:#fff;

}



/*==================================================
SMOOTH SCROLL OFFSET
==================================================*/

#why{

    scroll-margin-top:120px;

}



/*==================================================
REDUCED MOTION SUPPORT
==================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}



/*==================================================
PRINT OPTIMIZATION
==================================================*/

@media print{

    .awhy-section{

        padding:40px 0;

        background:#fff;

    }

    .awhy-banner{

        box-shadow:none;

    }

    .awhy-card{

        break-inside:avoid;

        box-shadow:none;

        border:1px solid #dcdcdc;

    }

}



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

.awhy-banner img{

    image-rendering:auto;

    backface-visibility:hidden;

}



/*==================================================
FINAL PERFORMANCE
==================================================*/

.awhy-card,

.awhy-banner img{

    will-change:transform;

}

.awhy-card:hover,

.awhy-banner:hover img{

    transform:translateZ(0);

}

.awhy-banner{

    width:100%;

    height:580px;

    overflow:hidden;

    border-radius:34px;

    background:#ffffff;

    display:flex;

    align-items:center;

    justify-content:center;

}

.awhy-banner img{

    width:100%;

    height:100%;

    display:block;

    object-fit:contain;

    object-position:center center;

    transition:transform .5s ease;

}

.awhy-banner:hover img{

    transform:scale(1.02);

}
.awhy-banner img{

    width:100%;

    height:580px;

    object-fit:cover;

    object-position:center 40%;

    display:block;

}

.awhy-banner{

    position:relative;

    width:100%;

    height:620px;

    overflow:hidden;

    border-radius:34px;

    background:#0A2342;

}

.awhy-banner img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:50% 50%;

}

.awhy-header{

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.awhy-banner{

    position:relative;

    width:100%;

    max-width:1100px;

    margin:0 auto 90px;

    border-radius:34px;

    overflow:hidden;

    background:#0A2342;

    aspect-ratio:16 / 9;

    box-shadow:0 25px 60px rgba(10,35,66,.18);

}

.awhy-banner img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center 45%;

    transition:transform .6s ease;

}

.awhy-banner:hover img{

    transform:scale(1.03);

}


/*==================================================
WHY BIOINFRATECH IMAGE MOBILE FIX
==================================================*/


@media(max-width:768px){

    .awhy-banner{

        width:100%;

        height:auto;

        aspect-ratio:16 / 10;

        border-radius:20px;

        margin-bottom:50px;

    }


    .awhy-banner img{

        width:100%;

        height:100%;

        object-fit:cover;

        object-position:center center;

    }

}



@media(max-width:576px){

    .awhy-banner{

        aspect-ratio:4 / 3;

        border-radius:18px;

    }


    .awhy-banner img{

        object-position:center center;

    }

}



@media(max-width:360px){

    .awhy-banner{

        aspect-ratio:1 / 1;

    }


    .awhy-banner img{

        object-position:center;

    }

}


/* WHY BIOINFRATECH: show the complete supplied banner without cropping on any screen */
.awhy-banner {
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    background: #0A2342;
}
.awhy-banner img {
    display: block;
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center;
    transform: none !important;
}
.awhy-banner:hover img {
    transform: none !important;
}
@media (max-width: 768px) {
    .awhy-banner { height: auto !important; aspect-ratio: auto !important; border-radius: 16px; }
    .awhy-banner img { width: 100%; height: auto !important; object-fit: contain !important; }
}