/***********************************************************************
 * SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
 * ---------------------------------------------------------------------
 * Project      : SAI-WEB-001
 * Engine       : SAI-X 1.1
 * File         : assets/css/know-more.css
 *
 * Version      : 2.0.0
 * Sprint       : LP-FINAL-05
 * Build ID     : SAI-X-KM-0063
 * Delivery     : 0063 (Part A)
 * Status       : Production
 *
 * ---------------------------------------------------------------------
 * KNOW MORE EXPERIENCE
 *
 * This stylesheet controls the complete presentation of the
 * Know More page.
 *
 * Structure
 * ---------------------------------------------------------------------
 * 01 Root Variables
 * 02 Global Reset
 * 03 Typography
 * 04 Media
 * 05 Main Container
 * 06 Floating Header
 * 07 Header Layout
 * 08 Logo
 * 09 Primary Navigation
 *
 * Hero begins in Part B.
 ***********************************************************************/


/***********************************************************************
01. ROOT VARIABLES
***********************************************************************/

:root{

    --color-primary:#FF6A00;

    --color-background:#000000;

    --color-surface:#FFFFFF;

    --color-heading:#1B1F24;

    --color-body:#5E6470;

    --color-border:#E7ECF3;

    --color-divider:#D7DEE8;

    --color-white:#FFFFFF;

    --header-height:90px;

    --content-width:1320px;

    --container-width:1280px;

    --transition:300ms ease;

    --radius-large:24px;

    --radius-medium:16px;

    --shadow-card:0 12px 42px rgba(0,0,0,.08);

    --font-heading:'Poppins',sans-serif;

    --font-body:'Inter',sans-serif;

}


/***********************************************************************
02. GLOBAL RESET
***********************************************************************/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#000;

    color:#fff;

    font-family:var(--font-body);

    overflow-x:hidden;

}


/***********************************************************************
03. TYPOGRAPHY
***********************************************************************/

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);

    font-weight:700;

}

p{

    line-height:1.75;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


/***********************************************************************
04. MEDIA
***********************************************************************/

img{

    display:block;

    max-width:100%;

    height:auto;

}


/***********************************************************************
05. MAIN APPLICATION CONTAINER
***********************************************************************/

.sai-km-main{

    position:relative;

    width:100%;

    overflow:hidden;

}

.sai-km-container{

    width:100%;

    max-width:var(--container-width);

    margin:0 auto;

    padding-left:80px;

    padding-right:80px;

}


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

.sai-km-header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:transparent;

}

.sai-km-header-container{

    max-width:1400px;

    height:96px;

    margin:0 auto;

    padding:0 42px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    box-sizing:border-box;

}


/* ==========================================================
   LOGO
========================================================== */

.sai-km-logo{

    display:flex;

    align-items:center;

    gap:16px;

    text-decoration:none;

}

.sai-km-logo img{

    height:64px;

    width:auto;

}

.sai-km-logo span{

    color:#ffffff;

    font-size:22px;

    font-weight:600;

}


/* ==========================================================
   NAVIGATION
========================================================== */

.sai-km-navigation ul{

    display:flex;
    gap:48px;
    list-style:none;

}

.sai-km-navigation li{

    position:relative;

}

.sai-km-navigation li::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:1px;

    background:#2EA8FF;

}
.sai-km-navigation a{

    color:#ffffff;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    transition:.30s;

}

.sai-km-navigation a:hover{

    color:#F47A20;

}

.sai-km-navigation .sai-km-active{

    color:#F47A20;

}

/***********************************************************************
RESPONSIVE
***********************************************************************/

@media (max-width:991px){

    .sai-km-logo-image{

        height:60px;

    }

}

@media (max-width:768px){

    .sai-km-site-header{

        top:18px;

    }

    .sai-km-nav-list{

        gap:24px;

    }

}

@media (max-width:576px){

    .sai-km-nav-link{

        font-size:14px;

    }

}


/***********************************************************************
KNOW MORE HERO
Part B Starts Here
***********************************************************************/

/***********************************************************************
10. KNOW MORE HERO
-----------------------------------------------------------------------
Provides the hero presentation for the Know More page.
(Frozen Layout)
***********************************************************************/

.sai-km-hero{

    position:relative;

    min-height:620px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding-top:100px;

    padding-bottom:90px;

    background-size:cover;

    background-position:112% center;

    background-repeat:no-repeat;

}


/***********************************************************************
HERO OVERLAY
***********************************************************************/

.sai-km-hero-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.66) 0%,
        rgba(0,0,0,.40) 32%,
        rgba(0,0,0,.12) 60%,
        rgba(0,0,0,.04) 100%
    );

    z-index:1;

}


/***********************************************************************
HERO CONTENT
***********************************************************************/

.sai-km-hero-content{

    position:relative;

    z-index:10;

    max-width:680px;

    padding-top:30px;

}


/***********************************************************************
THREE-LINE HERO TITLE
***********************************************************************/

.sai-km-hero-title{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-bottom:30px;

}

.sai-km-hero-line{

    display:block;

}

/*----------------------------------------------------
Line 1
----------------------------------------------------*/

.sai-km-hero-line-1{

    font-family:var(--font-heading);

    font-size:2rem;

    font-weight:500;

    line-height:1;

    color:#FFFFFF;

}

/*----------------------------------------------------
Line 2
----------------------------------------------------*/

.sai-km-hero-line-2{

    font-family:var(--font-heading);

    font-size:1.5rem;

    font-weight:300;

    line-height:.90;

    color:#FFFFFF;

    margin-top:8px;

}

/*----------------------------------------------------
Line 3
----------------------------------------------------*/

.sai-km-hero-line-3{

    font-family:var(--font-heading);

    font-size:2.5rem;

    font-weight:600;

    line-height:1;

    color:var(--color-primary);

    margin-top:6px;

}


/***********************************************************************
HERO DESCRIPTION
***********************************************************************/

.sai-km-hero-description{

    max-width:640px;

    margin-bottom:42px;

    font-family:var(--font-body);

    font-size:22px;

    line-height:1.15;

    color:#E8E8E8;

}


/***********************************************************************
PRIMARY CTA
***********************************************************************/

.sai-km-primary-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:8px;

    font-family:var(--font-heading);

    font-size:18px;

    font-weight:500;

    color:#FFFFFF;

    cursor:pointer;

    transition:var(--transition);

}

.sai-km-primary-button:hover{

    color:var(--color-primary);

}


/***********************************************************************
BOTTOM CINEMATIC FADE
***********************************************************************/

.sai-km-hero::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:420px;

    pointer-events:none;

    z-index:2;

    background:linear-gradient(

        to bottom,

        rgba(0,0,0,0.00) 0%,

        rgba(0,0,0,0.00) 18%,

        rgba(0,0,0,0.05) 35%,

        rgba(0,0,0,0.15) 50%,

        rgba(0,0,0,0.32) 65%,

        rgba(0,0,0,0.58) 80%,

        rgba(0,0,0,0.88) 94%,

        rgba(0,0,0,1.00) 100%

    );

}


/***********************************************************************
SECONDARY HERO NAVIGATION
***********************************************************************/

.sai-km-hero-secondary{

    position:absolute;

    left:0;

    bottom:70px;

    width:100%;

    z-index:20;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:56px;

    padding:22px 60px;

    background:linear-gradient(

        to top,

        rgba(0,0,0,.65),

        rgba(0,0,0,0)

    );

}


.sai-km-secondary-link{

    font-family:var(--font-heading);

    font-size:16px;

    font-weight:500;

    color:#FFFFFF;

    transition:var(--transition);
    
    text-decoration: underline;     /* underline */
    text-decoration-color: #1E90FF; /* elegant blue underline */
    text-decoration-thickness: 2px; /* makes underline bold */
    text-underline-offset: 6px;     /* pushes underline slightly down */
  

}

.sai-km-secondary-link:hover,

.sai-secondary-link.active{

    color:var(--color-primary);

}


/***********************************************************************
10. ABOUT US SECTION
Part C Starts Here
***********************************************************************/

/***********************************************************************
11. ABOUT US SECTION
-----------------------------------------------------------------------
Corporate introduction and Company at a Glance
Delivery 0063
***********************************************************************/

.sai-km-about-section{

    position:relative;

    background:#F6F8FB;

    padding:100px 0 90px;

}


/***********************************************************************
ABOUT HEADER
***********************************************************************/

.sai-km-about-header{

    width:100%;

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}


/***********************************************************************
COMPANY LOGO
***********************************************************************/

.sai-km-about-logo{

    display:flex;

    justify-content:center;

    margin-bottom:28px;

}

.sai-km-about-logo-image{

    width:auto;

    height:78px;

}


/***********************************************************************
SECTION LABEL
***********************************************************************/

.sai-km-about-label{

    display:inline-block;

    margin-bottom:18px;

    font-family:var(--font-heading);

    font-size:.88rem;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    color:var(--color-primary);

}


/***********************************************************************
SECTION TITLE
***********************************************************************/

.sai-km-about-title{

    margin:0;

    font-family:var(--font-heading);

    font-size:2.80rem;

    font-weight:700;

    line-height:1.15;

    color:var(--color-heading);

}


/***********************************************************************
DIVIDER
***********************************************************************/

.sai-km-about-divider{

    width:90px;

    height:4px;

    margin:28px auto 36px;

    border-radius:999px;

    background:var(--color-primary);

}


/***********************************************************************
INTRODUCTION
***********************************************************************/

.sai-km-about-introduction{

    width:fit-content;

    margin:0 auto;

    text-align:left;

    font-family:var(--font-body);

    font-size:1.08rem;

    line-height:1.95;

    color:var(--color-body);

}


/***********************************************************************
COMPANY CARD
***********************************************************************/

.sai-km-about-card{

    margin-top:80px;

    background:#FFFFFF;

    border-radius:var(--radius-large);

    padding:60px;

    box-shadow:var(--shadow-card);

}


/***********************************************************************
CARD HEADER
***********************************************************************/

.sai-km-about-card-header{

    margin-bottom:50px;

    text-align:center;

}

.sai-km-about-card-title{

    margin:0;

    font-family:var(--font-heading);

    font-size:2rem;

    font-weight:700;

    color:var(--color-heading);

}

.sai-km-about-card-subtitle{

    margin-top:14px;

    font-family:var(--font-body);

    font-size:1rem;

    line-height:1.8;

    color:var(--color-body);

}


/***********************************************************************
THREE COLUMN GRID
***********************************************************************/

.sai-km-about-grid{

    display:grid;

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

    gap:56px;

}


/***********************************************************************
GROUP
***********************************************************************/

.sai-about-group h4{

    margin-bottom:28px;

    padding-bottom:12px;

    border-bottom:2px solid var(--color-border);

    font-family:var(--font-heading);

    font-size:1.18rem;

    font-weight:700;

    color:var(--color-primary);

}


/***********************************************************************
ITEM
***********************************************************************/

.sai-km-about-item{

    margin-bottom:26px;

}

.sai-km-about-item:last-child{

    margin-bottom:0;

}


/***********************************************************************
LABEL
***********************************************************************/

.sai-km-about-item span{

    display:block;

    margin-bottom:7px;

    font-family:var(--font-heading);

    font-size:.78rem;

    font-weight:600;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#9098A6;

}


/***********************************************************************
VALUE
***********************************************************************/

.sai-km-about-item strong{

    display:block;

    font-family:var(--font-body);

    font-size:1rem;

    font-weight:600;

    line-height:1.65;

    color:#222831;

}


/***********************************************************************
RESPONSIVE
***********************************************************************/

@media (max-width:1100px){

    .sai-km-about-grid{

        grid-template-columns:1fr;

        gap:40px;

    }

    .sai-about-card{

        padding:45px;

    }

}

@media (max-width:768px){

    .sai-km-about-section{

        padding:80px 0 70px;

    }

    .sai-km-about-title{

        font-size:2.2rem;

    }

    .sai-km-about-logo-image{

        height:64px;

    }

    .sai-km-about-card{

        padding:35px;

    }

}

@media (max-width:576px){

    .sai-km-about-introduction{

        width:100%;

        text-align:left;

    }

    .sai-km-about-title{

        font-size:1.9rem;

    }

}


/***********************************************************************
 SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
 ----------------------------------------------------------------------
 Project      : SAI-WEB-001
 Module       : Know More
 Section      : Knowledge & Insights
 Delivery     : 0068C - PART A
 Status       : PRODUCTION
***********************************************************************/



/***********************************************************************
 1. KNOWLEDGE SECTION
***********************************************************************/

.sai-knowledge-section{

    padding:90px 0 110px;

    background:#F5F7FA;

}



/***********************************************************************
 2. MAIN KNOWLEDGE CARD
***********************************************************************/

.sai-knowledge-card{

    width:min(1440px,92%);

    margin:0 auto;

    background:#FFFFFF;

    border-radius:34px;

    padding:48px 56px;

    overflow:hidden;

    position:relative;

    box-shadow:
        0 10px 25px rgba(15,23,42,.05),
        0 24px 70px rgba(15,23,42,.08);

}



/***********************************************************************
 3. GRID
***********************************************************************/

.sai-knowledge-grid{

    display:grid;

    grid-template-columns:

        minmax(0,1.72fr)

        minmax(390px,.92fr);

    gap:72px;

    align-items:start;

}



/***********************************************************************
 4. LEFT COLUMN
***********************************************************************/

.sai-knowledge-left{

    display:flex;

    flex-direction:column;

    min-width:0;

}



/***********************************************************************
 5. SECTION LABEL
***********************************************************************/

.sai-knowledge-label{

    display:inline-block;

    margin-bottom:24px;

    font-family:Poppins,sans-serif;

    font-size:.92rem;

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#0B5FFF;

}



/***********************************************************************
 6. MAIN TITLE
***********************************************************************/

.sai-knowledge-title{

    margin:0;

    max-width:760px;

    font-family:Poppins,sans-serif;

    font-size:2.5rem;

    font-weight:500;

    line-height:1.00;

    letter-spacing:-.04em;

    color:#111827;

}



.sai-knowledge-title span{

    display:block;

    margin-top:8px;

    color:#FF6A13;

}



/***********************************************************************
 7. ORANGE DIVIDER
***********************************************************************/

.sai-knowledge-divider{

    width:84px;

    height:5px;

    margin:16px 0 18px;

    border-radius:999px;

    background:#FF6A13;

}



/***********************************************************************
 8. INTRODUCTION
***********************************************************************/

.sai-knowledge-intro{

    max-width:860px;

    margin:0;

    font-size:1.0rem;

    line-height:1.5;
    
    margin-bottom:0;

    color:#475569;
    
    text-align: justify;
    
    text-justify: inter-word;

}



.sai-knowledge-intro strong{

    color:#0F172A;

    font-weight:700;

}



/***********************************************************************
 9. STREAM HEADER
***********************************************************************/

.sai-stream-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:15px;

    margin-bottom:8px;

}



.sai-stream-linkedin-icon{

    width:38px;

    height:38px;

    flex-shrink:0;

}



.sai-stream-header h3{

    margin:0;

    font-family:Poppins,sans-serif;

    font-size:0.9rem;

    font-weight:700;

    line-height:1.12;

    color:#111827;

}



.sai-stream-header h3 span{

    color:#0A66C2;

}



/***********************************************************************
10. HEADER DIVIDER
***********************************************************************/

.sai-stream-header::after{

    content:"";

    width:100px;

    height:2px;

    margin-left:18px;

    background:#CFE1FF;

    border-radius:999px;

}



/***********************************************************************
11. STREAM LIST
***********************************************************************/

.sai-stream-list{

    display:flex;

    flex-direction:column;

    gap:0;

}

/***********************************************************************
12. STREAM ROWS
***********************************************************************/

.sai-stream-row{

    display:grid;

    grid-template-columns:
        33px
        147px
        1px
        minmax(0,1fr);

    align-items:center;

    column-gap:10px;

    padding:06px 0;

    border-bottom:1px solid #EDF2F7;

    transition:
        background .25s ease,
        transform .25s ease;

}

.sai-stream-row:last-child{

    border-bottom:none;

}

.sai-stream-row:hover{

    background:#FAFCFF;

}



/***********************************************************************
13. ICON TILE
***********************************************************************/

.sai-stream-icon{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    background:#FFF7ED;

    transition:.25s;

}

.sai-stream-row:hover .sai-stream-icon{

    transform:translateY(-2px);

    box-shadow:0 10px 24px rgba(249,115,22,.12);

}

.sai-stream-icon img{

    width:28px;

    height:28px;

    object-fit:contain;

}



/***********************************************************************
14. STREAM TITLE
***********************************************************************/

.sai-stream-title{

    font-family:Poppins,sans-serif;

    font-size:0.8rem;

    font-weight:600;

    line-height:1.30;

    color:#111827;

}



/***********************************************************************
15. STREAM DIVIDER
***********************************************************************/

.sai-stream-divider{

    width:1px;

    height:54px;

    background:#D7E2EF;

}



/***********************************************************************
16. STREAM DESCRIPTION
***********************************************************************/

.sai-stream-description{

    font-size:.9rem;
    
    font-weight: 400;

    line-height:1.72;

    color:#475569;

}



/***********************************************************************
17. LINKEDIN PANEL
***********************************************************************/

.sai-linkedin-panel{

    align-self:start;

    background:#F8FAFC;

    border:1px solid #E5EAF1;

    border-radius:28px;

    padding:26px 28px;

    display:flex;

    flex-direction:column;

    text-align:center;

    box-shadow:
        0 8px 28px rgba(15,23,42,.05);

}



/***********************************************************************
18. LINKEDIN VISUAL
***********************************************************************/

.sai-linkedin-visual{

    margin-bottom:16px;

}

.sai-linkedin-visual img{

    width:100%;

    max-width:280px;

    display:block;

    margin:0 auto;

}



/***********************************************************************
19. LINKEDIN TITLE
***********************************************************************/

.sai-linkedin-panel h3{

    margin:0;

    font-family:Poppins,sans-serif;

    font-size:1.40rem;

    font-weight:700;

    line-height:1.30;

    color:#111827;

}

.sai-linkedin-panel h3 span{

    display:block;

    color:#0A66C2;

}



/***********************************************************************
20. LINKEDIN DIVIDER
***********************************************************************/

.sai-linkedin-divider{

    width:70px;

    height:4px;

    margin:24px auto;

    border-radius:999px;

    background:#0A66C2;

}



/***********************************************************************
21. LINKEDIN DESCRIPTION
***********************************************************************/

.sai-linkedin-panel p{

    margin:0;

    font-size:1rem;

    line-height:1.80;

    color:#475569;

}



/***********************************************************************
22. CTA BUTTON
***********************************************************************/

.sai-linkedin-button{

    margin-top:34px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    align-self:center;

    padding:15px 28px;

    border-radius:12px;

    background:#0A66C2;

    color:#FFF;

    text-decoration:none;

    font-weight:600;

    transition:.30s;

}

.sai-linkedin-button:hover{

    background:#084F99;

    transform:translateY(-2px);

}

.sai-linkedin-button img{

    width:90px;

    height:60px;

}

.sai-arrow{

    font-size:0.9rem;

}



/***********************************************************************
23. RESPONSIVE
***********************************************************************/

@media (max-width:1200px){

    .sai-knowledge-grid{

        grid-template-columns:1fr;

        gap:60px;

    }

    .sai-linkedin-panel{

        max-width:620px;

        margin:0 auto;

    }

}



@media (max-width:768px){

    .sai-knowledge-card{

        padding:42px 28px;

        border-radius:24px;

    }

    .sai-knowledge-title{

        font-size:2.75rem;

    }

    .sai-stream-header{

        flex-wrap:wrap;

    }

    .sai-stream-header::after{

        display:none;

    }

    .sai-stream-row{

        grid-template-columns:58px 1fr;

        row-gap:12px;

    }

    .sai-stream-divider{

        display:none;

    }

    .sai-stream-description{

        grid-column:2;

    }

}


/***********************************************************************
12. TECHNOLOGY SECTION
Part D Starts Here
***********************************************************************/

/***********************************************************************
 TECHNOLOGY ARCHITECTURE
***********************************************************************/

.sai-technology-section{

    padding:100px 0 110px;

    background:#F5F7FA;

}



/***********************************************************************
 HEADER
***********************************************************************/

.sai-technology-header{

    max-width:1080px;

    margin:0 auto 55px;

    text-align:center;

}



.sai-technology-label{

    display:inline-block;

    margin-bottom:22px;

    font-family:Poppins,sans-serif;

    font-size:.92rem;

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#0B5FFF;

}



.sai-technology-title{

    margin:0;

    font-family:Poppins,sans-serif;

    font-size:3.30rem;

    font-weight:700;

    line-height:1.08;

    color:#111827;

}



.sai-technology-divider{

    width:84px;

    height:5px;

    margin:28px auto 34px;

    border-radius:999px;

    background:#FF6A13;

}



.sai-technology-introduction{

    max-width:980px;

    margin:0 auto;

    font-size:1.08rem;

    line-height:1.82;

    text-align:center;

    color:#475569;

}



.sai-technology-introduction strong{

    color:#111827;

    font-weight:700;

}



/***********************************************************************
 ARCHITECTURE FIGURE
***********************************************************************/

.sai-technology-figure{

    margin:0;

    text-align:center;

}



.sai-technology-figure img{

    display:block;

    width:100%;

    max-width:1320px;

    margin:0 auto;

    height:auto;

}



.sai-technology-figure figcaption{

    margin-top:18px;

    font-size:.95rem;

    font-style:italic;

    color:#64748B;

}



/***********************************************************************
 * File        : assets/css/know-more.css
 * Delivery    : D-002A
 * Date        : 24-Jul-2026
 * Status      : Production Ready
 *
 * COMPONENT   : Applications
 ***********************************************************************/


/***********************************************************************
13. APPLICATIONS SECTION
***********************************************************************/

.sai-applications-section{

    padding:110px 0 120px;

    background:#F5F7FA;

}



/***********************************************************************
APPLICATIONS HEADER
***********************************************************************/

.sai-applications-header{

    max-width:980px;

    margin:0 auto 70px;

    text-align:center;

}



/***********************************************************************
SECTION LABEL
***********************************************************************/

.sai-applications-label{

    display:inline-block;

    margin-bottom:20px;

    font-family:var(--font-heading);

    font-size:.92rem;

    font-weight:700;

    letter-spacing:.22em;

    text-transform:uppercase;

    color:#0B5FFF;

}



/***********************************************************************
SECTION TITLE
***********************************************************************/

.sai-applications-title{

    margin:0;

    font-family:var(--font-heading);

    font-size:3.20rem;

    font-weight:700;

    line-height:1.08;

    color:#111827;

}



/***********************************************************************
ORANGE DIVIDER
***********************************************************************/

.sai-applications-divider{

    width:84px;

    height:5px;

    margin:28px auto 34px;

    border-radius:999px;

    background:#FF6A13;

}



/***********************************************************************
INTRODUCTION
***********************************************************************/

.sai-applications-introduction{

    max-width:920px;

    margin:0 auto;

    font-family:var(--font-body);

    font-size:1.05rem;

    line-height:1.85;

    color:#475569;

    text-align:center;

}

.sai-applications-introduction strong{

    color:#111827;

    font-weight:700;

}



/***********************************************************************
APPLICATION CARD
***********************************************************************/

.sai-application-card{

    background:#FFFFFF;

    border-radius:28px;

    padding:34px 36px;

    margin-bottom:20px;
    
    min-height: 520px;

    border:1px solid #E8EDF4;

    box-shadow:

        0 10px 28px rgba(15,23,42,.05),

        0 28px 72px rgba(15,23,42,.08);

}



/***********************************************************************
CARD HEADER
***********************************************************************/

.sai-application-card-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:10px;

}



/***********************************************************************
LOGO
***********************************************************************/

.sai-application-logo{

    flex-shrink:0;

}

.sai-application-logo img{

    width:128px;

    height:auto;

}



/***********************************************************************
HEADING
***********************************************************************/

.sai-application-heading{

    display:flex;

    flex-direction:column;

}

.sai-application-number{

    display:block;

    margin-bottom:8px;

    font-family:var(--font-heading);

    font-size:.82rem;

    font-weight:600;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:#0B5FFF;

}

.sai-application-heading h3{

    margin:0;

    font-family:var(--font-heading);

    font-size:2rem;

    font-weight:700;

    color:#111827;

}



/***********************************************************************
THREE COLUMN GRID
***********************************************************************/

.sai-application-grid{

    display:grid;

    grid-template-columns:

        1fr

        1fr

        .9fr;

    gap:34px;

    align-items:start;

}



/***********************************************************************
COMMON PANEL
***********************************************************************/

.sai-application-query,

.sai-application-environment,

.sai-application-results{

    background:#FAFCFF;

    border:1px solid #E5ECF4;

    border-radius:20px;

    padding:24px;

    height:100%;

}



/***********************************************************************
COMMON PANEL TITLES
***********************************************************************/

.sai-application-query h4,

.sai-application-environment h4,

.sai-application-results h4{

    margin:0 0 18px;

    font-family:var(--font-heading);

    font-size:1rem;

    font-weight:600;

    color:#111827;

}


/***********************************************************************
 * File        : assets/css/know-more.css
 * Delivery    : D-002B
 * Date        : 24-Jul-2026
 * Status      : Production Ready
 *
 * COMPONENT   : Applications
 ***********************************************************************/


/***********************************************************************
APPLICATION IMAGES
***********************************************************************/

.sai-application-query img,
.sai-application-environment img{

    display:block;

    width:95%;
    
    max-width:110%;

    height:auto;
    
    margin-top:auto;
    
    margin-bottom:auto;
    
    aspect-ratio:15/11;

    object-fit:cover;


    border-radius:14px;

    border:1px solid #E7ECF3;

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}



/***********************************************************************
QUERY PANEL
***********************************************************************/

.sai-application-query{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}



/***********************************************************************
VISUAL ENVIRONMENT PANEL
***********************************************************************/

.sai-application-environment{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}



/***********************************************************************
OPERATIONAL BENEFIT PANEL
***********************************************************************/

.sai-application-results{

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

}



/***********************************************************************
RESULT TEXT
***********************************************************************/

.sai-application-results p{

    margin:0;

    font-family:var(--font-body);

    font-size:1rem;
    
    font-weight: 600;

    line-height:1.85;

    color:#475569;

    text-align:justify;

    text-justify:inter-word;

}



/***********************************************************************
IMAGE HOVER
***********************************************************************/

.sai-application-card:hover
.sai-application-query img{

    transform:translateY(-4px);

    box-shadow:

        0 12px 32px rgba(15,23,42,.12);

}



.sai-application-card:hover
.sai-application-environment img{

    transform:translateY(-4px);

    box-shadow:

        0 12px 32px rgba(15,23,42,.12);

}



/***********************************************************************
CARD HOVER
***********************************************************************/

.sai-application-card{

    transition:

        transform .35s ease,

        box-shadow .35s ease,

        border-color .35s ease;

}



.sai-application-card:hover{

    transform:translateY(-8px);

    border-color:#D5E3F5;

    box-shadow:

        0 18px 42px rgba(15,23,42,.08),

        0 36px 90px rgba(15,23,42,.12);

}



/***********************************************************************
APPLICATION FOOTER
***********************************************************************/

.sai-applications-footer{

    margin-top:70px;

    text-align:center;

}



/***********************************************************************
FOOTER DIVIDER
***********************************************************************/

.sai-applications-footer-divider{

    width:100px;

    height:4px;

    margin:0 auto 30px;

    border-radius:999px;

    background:#FF6A13;

}



/***********************************************************************
FOOTER TEXT
***********************************************************************/

.sai-applications-footer-text{

    max-width:980px;

    margin:0 auto;

    font-family:var(--font-body);

    font-size:1rem;

    line-height:1.90;

    color:#64748B;

}



/***********************************************************************
CARD SPACING
***********************************************************************/

.sai-application-card:last-of-type{

    margin-bottom:0;

}



/***********************************************************************
ACCESSIBILITY
***********************************************************************/

.sai-application-card:focus-within{

    outline:2px solid #0B5FFF;

    outline-offset:4px;

}


/***********************************************************************
 * SANGYAN AI FOOTER
 * ---------------------------------------------------------------------
 * Page         : Know More
 * Delivery     : D-CSS-005D-003B (Part 1)
 * Version      : 2.0
 * Theme        : Corporate Charcoal
 ***********************************************************************/

/*==========================================================
    FOOTER
==========================================================*/

.sai-km-footer{

    margin-top:0px;

    background:#101820;

    border-top:1px solid rgba(255,255,255,.08);

    padding:48px 0 22px;

}


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

.sai-km-footer-grid{

    display:grid;

    grid-template-columns:1.45fr .90fr 1fr;

    gap:52px;

    align-items:flex-start;

}


/*==========================================================
    COLUMN
==========================================================*/

.sai-km-footer-column{

    display:flex;

    flex-direction:column;

}


/*==========================================================
    LOGO
==========================================================*/

.sai-km-footer-logo{

    display:inline-flex;

    align-items:center;

    margin-bottom:18px;

    text-decoration:none;

}

.sai-km-footer-logo img{

    height:72px;

    width:auto;

}


/*==========================================================
    COMPANY NAME
==========================================================*/

.sai-km-footer-company{

    margin:0 0 16px;

    font-family:var(--font-heading);

    font-size:1.55rem;

    font-weight:600;

    line-height:1.35;

    color:#FFFFFF;

}


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

.sai-km-footer-description{

    max-width:390px;

    margin:0;

    font-family:var(--font-body);

    font-size:.95rem;

    line-height:1.72;

    color:#C8D0D8;

}


/*==========================================================
    SOCIAL
==========================================================*/

.sai-km-footer-social{

    display:flex;

    margin-top:22px;

}


/*==========================================================
    LINKEDIN
==========================================================*/

.sai-km-footer-linkedin{

    width:46px;

    height:46px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:10px;

    text-decoration:none;

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

    color:#FFFFFF;

    font-size:22px;

    transition:
        background .30s ease,
        color .30s ease,
        transform .30s ease;

}

.sai-km-footer-linkedin:hover{

    background:#F47A20;

    color:#FFFFFF;

    transform:translateY(-2px);

}


/*==========================================================
    COLUMN HEADINGS
==========================================================*/

.sai-km-footer-heading{

    margin:8px 0 22px;

    font-family:var(--font-heading);

    font-size:1.40rem;

    font-weight:600;

    color:#FFFFFF;

}


/***********************************************************************
 * SANGYAN AI FOOTER
 * ---------------------------------------------------------------------
 * Page         : Know More
 * Delivery     : D-CSS-005D-003B (Part 2)
 * Version      : 2.0
 ***********************************************************************/

/*==========================================================
    QUICK LINKS
==========================================================*/

.sai-km-footer-links{

    margin:0;

    padding:0;

    list-style:none;

}

.sai-km-footer-links li{

    margin-bottom:14px;

}

.sai-km-footer-links li:last-child{

    margin-bottom:0;

}

.sai-km-footer-links a{

    font-family:var(--font-body);

    font-size:.95rem;

    color:#C8D0D8;

    text-decoration:none;

    transition:.30s ease;

}

.sai-km-footer-links a:hover{

    color:var(--color-primary);

    padding-left:6px;

}


/*==========================================================
    CONTACT
==========================================================*/

.sai-km-footer-contact{

    margin:0;

    padding:0;

    list-style:none;

}

.sai-km-footer-contact li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#C8D0D8;

    font-size:.94rem;

}

.sai-km-footer-contact li:last-child{

    margin-bottom:0;

}

.sai-km-footer-contact i{

    width:18px;

    flex-shrink:0;

    color:var(--color-primary);

    font-size:18px;

}

.sai-km-footer-contact span{

    color:#C8D0D8;

}

.sai-km-footer-contact a{

    color:#C8D0D8;

    text-decoration:none;

    transition:.30s ease;

}

.sai-km-footer-contact a:hover{

    color:var(--color-primary);

}


/*==========================================================
    COPY BUTTON
==========================================================*/

.sai-km-copy-button{

    margin-left:8px;

    padding:4px 12px;

    border:none;

    border-radius:8px;

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

    color:#FFFFFF;

    font-family:var(--font-heading);

    font-size:.78rem;

    cursor:pointer;

    transition:all .30s ease;

}

.sai-km-copy-button:hover{

    background:var(--color-primary);

    color:#FFFFFF;

}


/*==========================================================
    DIVIDER
==========================================================*/

.sai-km-footer-divider{

    margin:38px 0 18px;

    height:1px;

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

}


/*==========================================================
    FOOTER BOTTOM
==========================================================*/

.sai-km-footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


/*==========================================================
    COPYRIGHT
==========================================================*/

.sai-km-footer-copyright{

    font-family:var(--font-body);

    font-size:.82rem;

    color:#A8B3BF;

}


/*==========================================================
    LEGAL LINKS
==========================================================*/

.sai-km-footer-legal{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.sai-km-footer-legal a{

    color:#A8B3BF;

    text-decoration:none;

    font-size:.82rem;

    transition:.30s ease;

}

.sai-km-footer-legal a:hover{

    color:var(--color-primary);

}

.sai-km-footer-separator{

    color:#5F6974;

}


/*==========================================================
    SUBTLE ANIMATION
==========================================================*/

.sai-km-footer-column{

    transition:transform .30s ease;

}

.sai-km-footer-column:hover{

    transform:translateY(-2px);

}

/***********************************************************************
 * SANGYAN AI FOOTER
 * ---------------------------------------------------------------------
 * Page         : Know More
 * Delivery     : D-CSS-005D-003C
 * Version      : 2.0
 *
 * Responsive Architecture
 ***********************************************************************/

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

@media (max-width:1200px){

    .sai-km-footer-grid{

        grid-template-columns:1fr 1fr;

        gap:50px;

    }

    .sai-km-footer-column:first-child{

        grid-column:1 / -1;

        max-width:700px;

    }

}


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

@media (max-width:992px){

    .sai-km-footer{

        padding:60px 0 24px;

    }

    .sai-km-footer-grid{

        grid-template-columns:1fr;

        gap:45px;

    }

    .sai-km-footer-column{

        align-items:flex-start;

    }

    .sai-km-footer-description{

        max-width:100%;

    }

    .sai-km-footer-bottom{

        flex-direction:column;

        align-items:flex-start;

        gap:18px;

    }

    .sai-km-footer-copyright{

        text-align:left;

    }

}


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

@media (max-width:576px){

    .sai-km-footer{

        padding:48px 0 22px;

    }

    .sai-km-footer-logo img{

        height:56px;

    }

    .sai-km-footer-company{

        font-size:1.25rem;

    }

    .sai-km-footer-heading{

        font-size:1.20rem;

        margin-bottom:18px;

    }

    .sai-km-footer-description{

        font-size:.88rem;

        line-height:1.70;

    }

    .sai-km-footer-links a,

    .sai-km-footer-contact,

    .sai-km-footer-contact a{

        font-size:.88rem;

    }

    .sai-km-footer-linkedin{

        width:42px;

        height:42px;

        font-size:20px;

    }

    .sai-km-footer-divider{

        margin:34px 0 18px;

    }

    .sai-km-footer-legal{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

    }

    .sai-km-footer-separator{

        display:none;

    }

}


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

.sai-km-footer a:focus,

.sai-km-copy-button:focus{

    outline:2px solid var(--color-primary);

    outline-offset:3px;

}


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

@media print{

    .sai-km-footer{

        background:#FFFFFF;

        color:#000000;

        border-top:1px solid #CCCCCC;

    }

}