/* About Us section */

.main-h{
    font-size: 60px;
}

.hero-c{ 
    display:grid; 
    grid-template-columns: 1.2fr .8fr; 
    gap: 35px; 
    align-items:center;
}

.about-img{
    aspect-ratio: .9;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #232a36;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.portrait{
    width: 100%;
    height: 100%;
}

.fact-badges{
    margin-top: 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.badge{
    display: inline-block;
    color: white;
    align-items: center;
    gap: .50rem;
    padding: .5rem .7rem;
    border: 1px solid #232a36;
    border-radius: 999px;
    background-color: #475569;
}

.badge i{
    width:1rem; 
    height:1rem;
    color: white;
}

/* About Us section End*/

/* Story section */

.section-h{
    font-size: 35px;
}

.story-w{
    display: grid;
    grid-template-columns: 1.2fr .8fr; 
    gap: 35px;
    align-items: start;
}

.cards{
    display: flex;
    flex-direction: column;
    gap:35px;
    align-content: center;
}

.card{
    padding: 30px;
    border: 1px solid #475569;
    background-color: #232a36;
    color: white;
    border-radius: 20px;
    text-align: center;
    height: 150px;
    align-content: center;

}

.num{
    font-weight: bold;
    font-size: 35px;

}

.txt{
    font-size: 15px;
    text-transform: uppercase;

}

/* Story section End*/

/* Approach section*/

.approach-cards{
    display: flex;
    gap: 35px;
}

.approach-card{
    border: 1px solid #475569;
    border-radius: 10px;
    overflow: hidden;
    background-color: #232a36;
}

.approach-card img{
    aspect-ratio: 16/10;
    object-fit: cover;
}

.approach-card .app-card-info{
    padding: 20px;
}

.app-card-info h3{
    margin: 0 0 .35rem;
    font-size: 30px;
    text-align: center;
}

.app-card-info p{
    margin: 0;
    font-size: 20px;
}

/* Approach section End*/