/* Know About Us Component */
.know-about-us-component{ background: var(--black); color: var(--white); margin-top: -40px; position: relative; z-index: 100; padding: 120px 0; border-radius: 40px 40px 0 0; }
.know-about-us-component .content{ display: flex; justify-content: space-between; }
.know-about-us-component .left { max-width: 550px; } 
.know-about-us-component .left .pre{ text-transform: uppercase; margin-bottom: 20px; display: block; font-size: 15px; }
.know-about-us-component .left h2{ font-size: 48px; margin-bottom: 60px; letter-spacing: -1px; }
.know-about-us-component .left .whats-in-list { }
.know-about-us-component .left .whats-in-list li{ display: flex; align-items: center; margin-bottom: 80px; }
.know-about-us-component .left .whats-in-list li i{ color: var(--white); font-size: 48px; width: 70px; min-width: 70px; margin-right: 35px; }
.know-about-us-component .left .whats-in-list li i.icon-user{ font-size: 36px; }

.know-about-us-component .left .whats-in-list li p{ font-size: 15px; position: relative; line-height: 1.4; font-weight: 400; }
.know-about-us-component .left .whats-in-list li p:before{ content: ""; display: block; width: 100%; height: 3px; position: absolute; bottom: -25px; background: linear-gradient(90deg, #0023E5 0%, #E7EDF1 98.97%); }

.know-about-us-component .left .logos-list{ display: flex; align-items: center; margin-left: 15px; flex-wrap: wrap; gap: 15px; }
.know-about-us-component .left .logos-list li{ width: 70px; }
.know-about-us-component .left .logos-list li:last-child{ margin-right: 0; }
.know-about-us-component .left .logos-list li figure{ width: 100%; }
.know-about-us-component .left .logos-list li figure img{ width: 100%; }

.know-about-us-component .left .logos-list li.soc{ width: 60px; }
.know-about-us-component .left .logos-list li.iso{}
.know-about-us-component .left .logos-list li.aws{ width: 65px; }
.know-about-us-component .left .logos-list li.databricks{ width: 62px; }
.know-about-us-component .left .logos-list li.snowflake{ }
.know-about-us-component .left .logos-list li.langchain{ width: 90px; }

.know-about-us-component .right{ width: 500px; margin-top: 35px; } 
.know-about-us-component .right figure{ border-radius: 20px; overflow: hidden; line-height: 0; width: 100%; }
.know-about-us-component .right figure img{ width: 100%; height: 100%; object-fit: cover; } 

@media screen and (max-width: 1280px){

    /* Whats in it */
    .know-about-us-component .left{ padding-right: 40px; }
    .know-about-us-component .left h2{ font-size: 38px; }
    .know-about-us-component .left .pre{ font-size: 14px; }
    .know-about-us-component .left .whats-in-list li i{ margin-right: 5px; }
    .know-about-us-component .left .whats-in-list li p{ font-size: 15px; }
    .know-about-us-component .left .logos-list{ margin-left: 70px; }

}

@media screen and (max-width: 1024px){

    /* Whats in it */
    .know-about-us-component{ padding: 80px 0 70px; }
    .know-about-us-component .content{ flex-direction: column; }
    .know-about-us-component .left{ max-width: 100%; padding-right: 0; }
    .know-about-us-component .left h2{ margin-bottom: 40px; font-size: 32px; }
    .know-about-us-component .left .whats-in-list li{ margin-bottom: 50px; }
    .know-about-us-component .left .whats-in-list li p{ font-size: 14px; }
    .know-about-us-component .left .whats-in-list li p:before{ height: 2px; bottom: -20px; }
    .know-about-us-component .right{ width: 100%; margin-top: 20px; }
 
}