/* ==========================================================
   TRISHA WEB — ABOUT / LAYOUT 1
   Exact structure:
   LEFT  = image + 14+ badge + bottom stats
   RIGHT = eyebrow + title + description + 2x2 features + CTA
   ========================================================== */

.tw-about-section{
    position:relative;
    overflow:hidden;
    padding:96px 0 110px;
    background:#f5f9ff;
}

.tw-about-container{
    width:min(1240px, calc(100% - 48px));
    margin:0 auto;
}

.tw-about-layout1{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:72px;
    align-items:center;
}

/* ================= LEFT ================= */

.tw-about-left{
    position:relative;
    min-width:0;
}

.tw-about-image-area{
    position:relative;
    min-height:535px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 0 70px;
}

.tw-about-bg-circle{
    position:absolute;
    width:560px;
    height:560px;
    border-radius:50%;
    background:radial-gradient(
        circle,
        rgba(29,120,239,.15) 0%,
        rgba(29,120,239,.07) 48%,
        transparent 73%
    );
}

.tw-about-image-card{
    position:relative;
    z-index:2;
    width:min(100%,570px);
    height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:28px;
    background:#fff;
    border:1px solid rgba(18,102,210,.08);
    box-shadow:0 24px 65px rgba(21,60,105,.14);
}

.tw-about-main-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
}

.tw-about-no-image{
    flex-direction:column;
    gap:14px;
    color:#1477ef;
    font-size:18px;
    font-weight:700;
}

.tw-about-no-image i{
    font-size:64px;
}

/* 14+ badge */
.tw-about-years-badge{
    position:absolute;
    z-index:5;
    top:88px;
    left:-22px;
    width:142px;
    min-height:142px;
    padding:20px 17px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:#fff;
    border-radius:20px;
    border:1px solid rgba(18,102,210,.08);
    box-shadow:0 18px 45px rgba(20,63,116,.18);
}

.tw-about-years-badge strong{
    color:#1477ef;
    font-size:40px;
    line-height:1;
    font-weight:800;
}

.tw-about-years-badge span{
    margin-top:8px;
    color:#14233f;
    font-size:14px;
    line-height:1.4;
    font-weight:700;
}

/* Bottom stats */
.tw-about-stats-card{
    position:absolute;
    z-index:6;
    left:18px;
    right:18px;
    bottom:0;
    min-height:94px;
    display:flex;
    align-items:center;
    background:#fff;
    border-radius:22px;
    border:1px solid rgba(18,102,210,.08);
    box-shadow:0 18px 50px rgba(20,63,116,.15);
    padding:15px 14px;
}

.tw-about-stat-item{
    flex:1 1 0;
    min-width:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:4px 10px;
}

.tw-about-stat-icon{
    flex:0 0 auto;
    width:44px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eaf3ff;
    color:#1477ef;
    font-size:18px;
}

.tw-about-stat-copy{
    min-width:0;
}

.tw-about-stat-copy strong{
    display:block;
    color:#1477ef;
    font-size:25px;
    line-height:1.05;
    font-weight:800;
}

.tw-about-stat-copy span{
    display:block;
    margin-top:5px;
    color:#263955;
    font-size:12px;
    line-height:1.3;
}

.tw-about-stat-line{
    width:1px;
    height:52px;
    flex:0 0 auto;
    background:#e2e9f2;
}

/* ================= RIGHT ================= */

.tw-about-right{
    min-width:0;
}

.tw-about-eyebrow{
    display:flex;
    align-items:center;
    gap:17px;
    margin-bottom:17px;
}

.tw-about-eyebrow span{
    color:#1477ef;
    font-size:16px;
    font-weight:800;
    letter-spacing:.08em;
}

.tw-about-eyebrow::after{
    content:"";
    width:78px;
    height:2px;
    background:#1477ef;
}

.tw-about-title{
    max-width:700px;
    margin:0;
    color:#10213d;
    font-size:clamp(42px,4vw,58px);
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:800;
}

.tw-about-highlight{
    color:#1477ef;
}

.tw-about-description{
    max-width:700px;
    margin-top:25px;
    color:#596b84;
    font-size:16px;
    line-height:1.75;
}

.tw-about-description br{
    display:block;
    content:"";
    margin-bottom:11px;
}

/* 2 x 2 feature cards */
.tw-about-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    margin-top:32px;
}

.tw-about-feature-card{
    display:flex;
    align-items:flex-start;
    gap:13px;
    min-width:0;
    padding:18px 16px;
    background:#fff;
    border:1px solid rgba(18,102,210,.08);
    border-radius:15px;
    box-shadow:0 8px 25px rgba(24,61,104,.06);
}

.tw-about-feature-icon{
    flex:0 0 auto;
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#eaf3ff;
    color:#1477ef;
    font-size:19px;
}

.tw-about-feature-body{
    min-width:0;
}

.tw-about-feature-body h3{
    margin:1px 0 5px;
    color:#10213d;
    font-size:16px;
    line-height:1.3;
    font-weight:800;
}

.tw-about-feature-body p{
    margin:0;
    color:#687990;
    font-size:13px;
    line-height:1.48;
}

.tw-about-button-wrap{
    margin-top:30px;
}

.tw-about-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:13px;
    min-height:54px;
    padding:0 27px;
    border-radius:11px;
    background:#1477ef;
    color:#fff;
    text-decoration:none;
    font-size:15px;
    font-weight:700;
    box-shadow:0 12px 28px rgba(20,119,239,.25);
    transition:.2s ease;
}

.tw-about-button:hover{
    color:#fff;
    background:#0c68db;
    transform:translateY(-2px);
}

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

@media (max-width:1100px){
    .tw-about-layout1{
        gap:48px;
    }

    .tw-about-title{
        font-size:46px;
    }

    .tw-about-image-card{
        height:460px;
    }

    .tw-about-image-area{
        min-height:500px;
    }

    .tw-about-years-badge{
        left:-7px;
    }
}

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

@media (max-width:991.98px){
    .tw-about-section{
        padding:76px 0 96px;
    }

    .tw-about-container{
        width:min(760px,calc(100% - 36px));
    }

    .tw-about-layout1{
        grid-template-columns:1fr;
        gap:68px;
    }

    .tw-about-left{
        max-width:650px;
        width:100%;
        margin:0 auto;
    }

    .tw-about-right{
        max-width:760px;
        width:100%;
        margin:0 auto;
    }
}

@media (max-width:767.98px){
    .tw-about-section{
        padding:58px 0 78px;
    }

    .tw-about-container{
        width:calc(100% - 28px);
    }

    .tw-about-layout1{
        gap:56px;
    }

    .tw-about-image-area{
        min-height:430px;
        padding-bottom:54px;
    }

    .tw-about-bg-circle{
        width:410px;
        height:410px;
    }

    .tw-about-image-card{
        height:390px;
        border-radius:20px;
    }

    .tw-about-main-image{
        border-radius:20px;
    }

    .tw-about-years-badge{
        left:-5px;
        top:42px;
        width:116px;
        min-height:116px;
        padding:15px 13px;
        border-radius:16px;
    }

    .tw-about-years-badge strong{
        font-size:33px;
    }

    .tw-about-years-badge span{
        font-size:11px;
    }

    .tw-about-stats-card{
        left:0;
        right:0;
        min-height:80px;
        padding:10px 6px;
        border-radius:18px;
    }

    .tw-about-stat-item{
        gap:6px;
        padding:3px 5px;
    }

    .tw-about-stat-icon{
        width:35px;
        height:35px;
        font-size:14px;
    }

    .tw-about-stat-copy strong{
        font-size:18px;
    }

    .tw-about-stat-copy span{
        font-size:9px;
    }

    .tw-about-eyebrow span{
        font-size:13px;
    }

    .tw-about-eyebrow::after{
        width:48px;
    }

    .tw-about-title{
        font-size:35px;
    }

    .tw-about-description{
        font-size:15px;
        line-height:1.7;
    }

    .tw-about-feature-grid{
        grid-template-columns:1fr;
        gap:14px;
    }

    .tw-about-feature-card{
        padding:16px 14px;
    }

    .tw-about-button{
        width:100%;
    }
}

@media (max-width:480px){
    .tw-about-image-area{
        min-height:375px;
    }

    .tw-about-image-card{
        height:330px;
    }

    .tw-about-title{
        font-size:31px;
    }

    .tw-about-stats-card{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        margin-top:-10px;
    }

    .tw-about-stat-line{
        display:none;
    }

    .tw-about-stat-item{
        flex-direction:column;
        text-align:center;
    }
}