/***********************************************************************
 * SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
 * ---------------------------------------------------------------------
 * Project      : SAI-WEB-001
 * Engine       : SAI-X 2.0
 *
 * File         : request-for-demo.css
 *
 * Delivery     : D-005A-004
 * Version      : 1.0.0
 *
 * Module       :
 * Floating Header
 * Hero Section
 *
 **********************************************************************/

/* ==========================================================
   GLOBAL
========================================================== */

body{

    margin:0;

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

    background:#ffffff;

    color:#13233E;

}

.sai-rd-container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:0 42px;

    box-sizing:border-box;

}


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

.sai-rd-header{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

    background:transparent;

}

.sai-rd-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-rd-logo{

    display:flex;

    align-items:center;

    gap:16px;

    text-decoration:none;

}

.sai-rd-logo img{

    height:64px;

    width:auto;

}

.sai-rd-logo span{

    color:#ffffff;

    font-size:22px;

    font-weight:600;

}


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

.sai-rd-navigation ul{

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

}

.sai-rd-navigation li{

    position:relative;

}

.sai-rd-navigation li::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:100%;

    height:1px;

    background:#2EA8FF;

}
.sai-rd-navigation a{

    color:#ffffff;

    text-decoration:none;

    font-size:16px;

    font-weight:500;

    transition:.30s;

}

.sai-rd-navigation a:hover{

    color:#F47A20;

}

.sai-rd-navigation .sai-rd-active{

    color:#F47A20;

}


/* ==========================================================
   HERO
========================================================== */

.sai-rd-hero{

    background:#071529;

    padding-top:130px;

    padding-bottom:70px;

}

.sai-rd-hero-grid{

    display:grid;

    grid-template-columns:45% 55%;

    align-items:center;

    gap:40px;

}


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

.sai-rd-label{

    display:inline-block;

    margin-bottom:18px;

    color:#F47A20;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

}

.sai-rd-title{

    margin:0;

    color:#ffffff;

    font-size:40px;

    line-height:1.18;

    font-weight:500;

}

.sai-rd-title span{

    display:block;

    color:#F47A20;

}

.sai-rd-description{

    margin-top:24px;

    max-width:520px;

    color:#E6EDF5;

    font-size:17px;

    line-height:1.70;

}

.sai-rd-divider{

    width:72px;

    height:4px;

    margin:34px 0;

    border-radius:20px;

    background:#F47A20;

}

.sai-rd-response{

    display:flex;

    align-items:center;

    gap:13px;

    color:#E6EDF5;

    font-size:15px;

}

.sai-rd-response-icon{

    color:#F47A20;

    font-size:22px;

}


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

.sai-rd-hero-right{

    display:flex;
    
    transform: translateY(-18px);

    justify-content:flex-end;

}

.sai-rd-hero-image-wrapper{

    max-width:820px;

    margin-left:auto;


}

.sai-rd-hero-image{

    width:100%;

    display:block;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:992px){

    .sai-rd-hero-grid{

        grid-template-columns:1fr;

    }

    .sai-rd-hero-right{

        justify-content:center;

    }

    .sai-rd-title{

        font-size:42px;

    }

}

/*==========================================================
    DEMONSTRATION JOURNEY
==========================================================*/

/*==========================================================
    HOW YOUR DEMONSTRATION WORKS
==========================================================*/

.sai-rd-demo-journey{

    padding:110px 0;

    background:#F7F9FC;

}


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

.sai-rd-demo-header{

    text-align:center;

    margin-bottom:70px;

}


.sai-rd-section-tag{

    display:inline-block;

    margin-bottom:22px;

    color:#13233E;

    font-size:32px;

    font-weight:700;

    letter-spacing:0.5px;

    text-transform:none;

    line-height:1.2;

}


.sai-rd-demo-header h2{

    margin-bottom:22px;

    font-size:36px;

    font-weight:600;

    color:#13233E;

}


.sai-rd-demo-header p{

    width:760px;

    max-width:100%;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:#667085;

}


/*==========================================================
    TIMELINE
==========================================================*/

.sai-rd-timeline{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:flex-start;
    
    gap:55px;

}


.sai-rd-timeline-line{

    position:absolute;

    left:8%;

    right:8%;

    top:44px;

    height:4px;

    background:#2EA8FF;

    border-radius:50px;

    z-index:1;

}


/*==========================================================
    NODE
==========================================================*/

.sai-rd-node{

    position:relative;

    width:180px;

    text-align:center;

    z-index:2;

}


/*==========================================================
    CIRCLE
==========================================================*/

.sai-rd-circle{

    position:relative;

    width:96px;

    height:96px;

    margin:auto;

    border-radius:50%;

    background:#FFFFFF;

    border:3px solid #2EA8FF;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:

        0 10px 30px rgba(0,0,0,.08);

    transition:.35s;

}


.sai-rd-circle i{

    font-size:38px;

    color:#F47A20;

}


/*==========================================================
    STEP NUMBER
==========================================================*/

.sai-rd-step-no{

    position:absolute;

    top:-10px;

    right:-8px;

    width:28px;

    height:28px;

    border-radius:50%;

    background:#2EA8FF;

    color:#FFFFFF;

    font-size:14px;

    font-weight:600;

    display:flex;

    justify-content:center;

    align-items:center;

}


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

.sai-rd-node h4{

    margin-top:26px;

    margin-bottom:12px;

    font-size:20px;

    font-weight:600;

    color:#13233E;

}


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

.sai-rd-node p{

    font-size:15px;

    line-height:1.70;

    color:#667085;

}


/*==========================================================
    FINAL NODE
==========================================================*/

.sai-rd-node-final .sai-rd-circle{



    border-width:4px;

    border-color:#F47A20;

}




/*==========================================================
    HOVER
==========================================================*/

.sai-rd-node:hover .sai-rd-circle{

    transform:translateY(-8px);

    box-shadow:

        0 18px 40px rgba(46,168,255,.28);

}


/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:1200px){

    .sai-rd-timeline{

        flex-wrap:wrap;

        justify-content:center;

        gap:60px;

    }

    .sai-rd-timeline-line{

        display:none;

    }

}

/*==========================================================
    REQUEST DEMONSTRATION FORM
==========================================================*/

.sai-rd-request-section{

    padding:40px 0 60px;

    background:#FFFFFF;

}

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

.sai-rd-request-header{

    text-align:center;

    margin-bottom:30px;

}

.sai-rd-request-header h2{

    margin-bottom:18px;

    font-size:36px;

    font-weight:700;

    color:#13233E;

}

.sai-rd-request-header p{

    width:760px;

    max-width:100%;

    margin:auto;

    font-size:18px;

    line-height:1.8;

    color:#667085;

}

/*==========================================================
    FORM
==========================================================*/

#sai-rd-request-form{

    background:#FFFFFF;

    border:1px solid #E8EDF3;

    border-radius:20px;

    padding:40px;

    box-shadow:

        0 18px 45px rgba(0,0,0,.06);

}

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

.sai-rd-form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:35px;

}

.sai-rd-form-column{

    display:flex;

    flex-direction:column;

    gap:26px;

}

/*==========================================================
    FORM GROUP
==========================================================*/

.sai-rd-form-group{

    display:flex;

    flex-direction:column;

}

.sai-rd-form-group label{

    margin-bottom:10px;

    font-size:15px;

    font-weight:600;

    color:#13233E;

}

.sai-rd-form-group label span{

    color:#E53935;

}

/*==========================================================
    INPUTS
==========================================================*/

.sai-rd-form-group input,

.sai-rd-form-group select{

    height:54px;

    padding:0 18px;

    border:1px solid #D8E0E8;

    border-radius:10px;

    font-size:15px;

    color:#13233E;

    background:#FFFFFF;

    transition:.30s;

}

.sai-rd-form-group input:focus,

.sai-rd-form-group select:focus{

    outline:none;

    border-color:#2EA8FF;

    box-shadow:

        0 0 0 4px rgba(46,168,255,.12);

}

/*==========================================================
    SUBMIT BUTTON
==========================================================*/

.sai-rd-submit{

    text-align:center;

    margin-top:45px;

}

.sai-rd-submit button{

    border:none;

    border-radius:10px;

    padding:16px 44px;

    background:#F47A20;

    color:#FFFFFF;

    font-size:17px;

    font-weight:600;

    transition:.30s;

}

.sai-rd-submit button:hover{

    background:#D96616;

    transform:translateY(-2px);

}

.sai-rd-submit i{

    margin-left:10px;

}

/*==========================================================
    CONFIDENTIALITY
==========================================================*/

.sai-rd-confidentiality{

    margin-top:50px;

    padding:35px;

    border-left:5px solid #2EA8FF;

    background:#F8FAFD;

    border-radius:12px;

}

.sai-rd-confidentiality h3{

    margin-bottom:18px;

    font-size:24px;

    font-weight:700;

    color:#13233E;

}

.sai-rd-confidentiality p{

    margin-bottom:18px;

    line-height:1.9;

    font-size:15px;

    color:#4B5563;

}

.sai-rd-confidentiality p:last-child{

    margin-bottom:0;

}

/*==========================================================
    RESPONSIVE
==========================================================*/

@media(max-width:992px){

    .sai-rd-form-grid{

        grid-template-columns:1fr;

    }

    #sai-rd-request-form{

        padding:35px;

    }

}

@media(max-width:576px){

    .sai-rd-request-header h2{

        font-size:30px;

    }

    #sai-rd-request-form{

        padding:25px;

    }

    .sai-rd-submit button{

        width:100%;

    }

}


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

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

.sai-rd-footer{

    margin-top:70px;

    background:#151E28;

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

    padding:48px 0 22px;

}


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

.sai-rd-footer-grid{

    display:grid;

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

    gap:52px;

    align-items:flex-start;

}


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

.sai-rd-footer-column{

    display:flex;

    flex-direction:column;

}


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

.sai-rd-footer-logo{

    display:inline-flex;

    align-items:center;

    margin-bottom:18px;

    text-decoration:none;

}

.sai-rd-footer-logo img{

    height:72px;

    width:auto;

}


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

.sai-rd-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-rd-footer-description{

    max-width:390px;

    margin:0;

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

    font-size:.95rem;

    line-height:1.72;

    color:#C8D0D8;

}


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

.sai-rd-footer-social{

    display:flex;

    margin-top:22px;

}


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

.sai-rd-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-rd-footer-linkedin:hover{

    background:#F47A20;

    color:#FFFFFF;

    transform:translateY(-2px);

}


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

.sai-rd-footer-heading{

    margin:8px 0 22px;

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

    font-size:1.40rem;

    font-weight:600;

    color:#FFFFFF;

}


/***********************************************************************
 * SANGYAN AI FOOTER
 * ---------------------------------------------------------------------
 * Delivery     : D-CSS-005D-002B (Part 2)
 * Version      : 2.0
 ***********************************************************************/

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

.sai-rd-footer-links{

    margin:0;

    padding:0;

    list-style:none;

}

.sai-rd-footer-links li{

    margin-bottom:14px;

}

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

    margin-bottom:0;

}

.sai-rd-footer-links a{

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

    font-size:.95rem;

    color:#C8D0D8;

    text-decoration:none;

    transition:.30s ease;

}

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

    color:#F47A20;

    padding-left:6px;

}


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

.sai-rd-footer-contact{

    margin:0;

    padding:0;

    list-style:none;

}

.sai-rd-footer-contact li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    color:#C8D0D8;

    font-size:.94rem;

}

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

    margin-bottom:0;

}

.sai-rd-footer-contact i{

    color:#F47A20;

    font-size:18px;

    flex-shrink:0;

    width:18px;

}

.sai-rd-footer-contact span{

    color:#C8D0D8;

}

.sai-rd-footer-contact a{

    color:#C8D0D8;

    text-decoration:none;

    transition:.30s ease;

}

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

    color:#F47A20;

}


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

.sai-rd-copy-button{

    margin-left:8px;

    padding:4px 12px;

    border:1px solid rgba(255,255,255,.15);

    border-radius:8px;

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

    color:#FFFFFF;

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

    font-size:.78rem;

    cursor:pointer;

    transition:all .30s ease;

}

.sai-rd-copy-button:hover{

    background:#F47A20;

    border-color:#F47A20;

    color:#FFFFFF;

}


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

.sai-rd-footer-divider{

    margin:38px 0 18px;

    height:1px;

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

}


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

.sai-rd-footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}


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

.sai-rd-footer-copyright{

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

    font-size:.82rem;

    color:#A8B3BF;

}


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

.sai-rd-footer-legal{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.sai-rd-footer-legal a{

    color:#A8B3BF;

    font-size:.82rem;

    text-decoration:none;

    transition:.30s ease;

}

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

    color:#F47A20;

}

.sai-rd-footer-separator{

    color:#5F6974;

}


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

.sai-rd-footer-column{

    transition:transform .30s ease;

}

.sai-rd-footer-column:hover{

    transform:translateY(-2px);

}


/*==============================================================================
 * SANGYAN AI TECHNOLOGIES PRIVATE LIMITED
 * ------------------------------------------------------------------------------
 * File Path       : /assets/css/request-for-demo.css
 * Delivery        : TP-5.3 - Part 5B
 * Generation Date : 09-Aug-2026
 * Module          : Request for Demonstration
 * Purpose         : Submit → Submitting… UX
 * ------------------------------------------------------------------------------
 * APPEND THIS BLOCK TO THE END OF THE EXISTING request-for-demo.css.
 * No existing visual rules are replaced.
 *==============================================================================*/

/*==============================================================================
  SUBMIT BUTTON — PROCESSING STATE
==============================================================================*/

.sai-demo-submit-spinner
{
    width:16px;

    height:16px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex:0 0 16px;

    margin-right:7px;
}


.sai-demo-submit-spinner i
{
    display:block;

    font-size:16px;

    line-height:1;

    animation:

        saiDemoSubmitRotate

        .75s

        linear

        infinite;
}


@keyframes saiDemoSubmitRotate
{
    from
    {
        transform:rotate(0deg);
    }

    to
    {
        transform:rotate(360deg);
    }
}


/*==============================================================================
  ACCESSIBILITY / USER FEEDBACK
==============================================================================*/

button[aria-busy="true"]
{
    cursor:wait;

    pointer-events:none;
}


button[aria-busy="true"]:disabled
{
    opacity:.92;
}


@media (prefers-reduced-motion:reduce)
{
    .sai-demo-submit-spinner i
    {
        animation:none;
    }
}


/***********************************************************************
 * END OF TP-5.3 - PART 5B
 ***********************************************************************/