/* ===================================
   NAVBAR
=================================== */

:root{
    --nesma-blue:#1AA4D8;
    --nesma-red:#E30613;
    --nesma-dark:#222222;
}








/* ===================================
   ABOUT SECTION (HERO-STYLE MATCH)
=================================== */

.about-section{
    background:#fff;
}

/* Image wrapper */
.about-image-wrapper{
    position:relative;
}

/* Floating badge (same visual language as hero badge) */
.about-badge{
    position:absolute;
    bottom:20px;
    left:20px;
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:#eef9fd;
    color:var(--nesma-blue);
    font-weight:600;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

/* Title styling */
.about-title{
    font-size:2.5rem;
    font-weight:800;
    color:#111;
    line-height:1.3;
}

.about-title span{
    color:var(--nesma-blue);
}

/* Paragraph */
.about-text{
    font-size:1.05rem;
    color:#666;
    line-height:1.8;
}

/* Points */
.about-points{
    display:grid;
    gap:12px;
}

.point-item{
    font-weight:500;
    color:#444;
}

.point-item i{
    color:var(--nesma-blue);
    margin-right:8px;
}

/* Make sure hero buttons are reused cleanly */
.hero-buttons{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.hero-btn-primary{
    background:var(--nesma-red);
    color:#fff;
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
    border:none;
}

.hero-btn-primary:hover{
    background:#c40011;
    color:#fff;
}

.hero-btn-secondary{
    background:#fff;
    border:2px solid var(--nesma-blue);
    color:#fff;
    padding:14px 28px;
    border-radius:50px;
    font-weight:600;
}

.hero-btn-secondary:hover{
    background:var(--nesma-blue);
    color:#fff;
}