.about-banner{
position: relative;
padding-top: 50px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
background: #0093DA;
overflow: hidden;
}

.banner-overlay{
position: absolute;
inset: 0;
background: rgba(0,35,70,.50);
}

.banner-content{
position: relative;
z-index: 2;
text-align: center;
color: #fff;
}

.banner-content h1{
font-size: 60px;
line-height: 1.08;
color: #fff;
font-weight:800;
margin-bottom: 20px;
}

.breadcrumb{
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
font-size: 18px;
font-weight: 400;
line-height: 1.9;
}

.breadcrumb a{
color: #fff;
text-decoration: none;
}

.breadcrumb span{
color: #fff;
}

.about-page{
padding: 80px 0;
background: linear-gradient(135deg,#eef8ff 0%,#d9f0ff 100%);
}

.about-grid{
display: grid;
grid-template-columns: 1fr 520px;
gap: 70px;
align-items: center;
}

.about-text h2{
font-size: 45px;
font-weight: 800;
color: #006FA3;
line-height: 1.2px;
margin-bottom: 20px;
}

.about-text h4{
font-size: 24px;
color: #0093DA;
font-style: italic;
line-height: 1.6;
margin-bottom: 35px;
font-weight: 600;
}

.about-text p{
font-size: 18px;
line-height: 1.9;
color: #444;
margin-bottom: 22px;
}

.about-image{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.about-image::before{
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: #ffffff;
    opacity: .55;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.about-image img{
    position: relative;
    width: 100%;
    max-width: 520px;
    display: block;
    z-index: 2;
    animation: float 5s ease-in-out infinite;
}

.floating-card{
margin-top: 30px;
width: 200px;
background: #fff;
padding: 10px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0,0,0,.12);
text-align: center;
}

.floating-card h3{
font-size: 45px;
color: #006FA3;
font-weight: 800;
margin-bottom: 5px;
}

.floating-card p{
font-size: 18px;
color: #444;
margin: 0;
}

.about-info-section{
    padding:50px 0;
}

.info-wrapper{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:40px;
    align-items:start;
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.info-card{
    background:#f5fbff;
    border:1px solid #dcecff;
    border-radius:24px;
    padding:35px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    min-height:260px;
    transition:.35s;
}

.info-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,111,163,.12);
}

.info-card h3{
    font-size:24px;
    font-weight:600;
    color:#006FA3;
    margin-bottom:20px;
    line-height:1.6;
}

.info-card p{
    font-size:18px;
    line-height:1.9;
    color:#444;
    margin:0;
}

.contact-box{
    background:#006FA3;
    color:#fff;
    border-radius:30px;
    padding:45px 35px;
    box-shadow:0 20px 45px rgba(0,0,0,.18);
}

.contact-box h2{
    font-size:30px;
    margin-bottom:40px;
    font-weight:700;
}

.contact-item{
    display:flex;
    align-items:center;
    gap:18px;
    margin-bottom:28px;
}

.contact-item .icon{
    width:55px;
    height:55px;
    background: #fff;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
        flex-shrink:0;

}

.contact-item span{
    font-size:18px;
    line-height:1.6;
    color: #fff;
}

.linkedin-btn{
    display:inline-block;
    margin-top:30px;
    background:#fff;
    color:#006FA3;
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.linkedin-btn:hover{
    background:#0093DA;
    color:#fff;
}


.achievements-section{

    padding:100px 0;
    background:linear-gradient(180deg,#f8fbff 0%,#eef8ff 100%);
}

.achievements-section .container h2{

    font-size: 45px;
    font-weight: 800;
color: #006FA3;
}


.achievements-wrapper{

    position:relative;

    padding-top:170px;
}

.top-connector{

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:80%;

    height:150px;

    overflow:visible;

    pointer-events:none;
}


.connector-path{

    fill:none;

    stroke:url(#connectorGradient);

    stroke-width:4;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:12 8;

    filter:url(#glow);

    animation:dashMove 12s linear infinite;
}


@keyframes dashMove{

    from{

        stroke-dashoffset:0;
    }

    to{

        stroke-dashoffset:-160;
    }
}


.connector-dot{

    fill:#0093DA;

    filter:url(#glow);

    animation:none;  
}

.achievements-grid{

    display:flex;

    justify-content:center;

    gap:70px;
}

.achievement-card{

    background:#fff;

    width:500px;

    border-radius:18px;

    padding:25px 35px;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.4s;
    margin-top: -30px;
}

.achievement-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,111,163,.18);
}

.icon{

    font-size:42px;

    color:#0093DA;

    margin-bottom:18px;
}

.achievement-card h3{

    font-size:26px;

    color:#006FA3;

    margin-bottom:15px;

    font-weight:700;
}

.achievement-card p{

    font-size:17px;

    color:#555;

    line-height:1.9;
}

@media (max-width:480px){

    .about-banner{
        height:260px;
        padding-top:10px;
    }

    .banner-content h1{
        font-size:32px;
        margin-bottom:10px;
    }

    .breadcrumb{
        flex-wrap:wrap;
        gap:8px;
        font-size:14px;
    }


    .about-page{
        padding:60px 0;
    }

    .about-grid{
        display:flex;
        flex-direction:column-reverse;
        gap:40px;
    }

    .about-text{
        width:100%;
        text-align:left;
    }

    .about-text h2{
        font-size:30px;
        line-height:1.3;
        margin-bottom:18px;
    }

    .about-text h4{
        font-size:18px;
        margin-bottom:20px;
                padding-left: 10px;

    }

    .about-text p{
        font-size:15px;
        line-height:1.8;
        padding-left: 10px;
    }

    .about-image::before{
        width:280px;
        height:280px;
    }

    .about-image img{
        max-width:260px;
    }

    .floating-card{
        width:160px;
        margin:20px auto 0;
                        padding-left: 10px;

    }

    .floating-card h3{
        font-size:30px;
    }

    .floating-card p{
        font-size:14px;
    }

    /* Info */

    .about-info-section{
        padding:60px 0;
        margin-left: 10px;
                margin-right: 10px;

    }

    .info-wrapper{
        display:grid;
        grid-template-columns:1fr;
        gap:30px;
    }

    .info-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .info-card{
        min-height:auto;
        padding:24px;
        border-radius:18px;
    }

    .info-card h3{
        font-size:22px;
        margin-bottom:12px;
    }

    @media (max-width:480px){

    .about{
        padding:40px 0;
    }

    .about-wrapper{
        flex-direction:column-reverse;
        gap:15px;              /* reduced from 40px */
        align-items:center;
    }

    .about-left{
        width:100%;
        min-height:260px;      /* instead of 550px */
        display:flex;
        justify-content:center;
        align-items:flex-end;
        margin-bottom:0;
    }

    .about-person{
        width:280px;
        top:0;                 
    }

    .flag-bg{
        width:320px;
        height:320px;
        top:50%;
    }

    .about-right{
        width:100%;
        text-align:center;
        margin-left:0 !important;
        margin-top:0;
    }

    .section-subtitle{
        margin-top:40px; 
        font-size:14px;
    }

    .about-right h2{
        margin-top:1 8px;
        font-size:30px;
        line-height:1.3;
    }

    .about-right p{
        margin-top:16px;
        font-size:15px;
    }
}

    .info-card p{
        font-size:15px;
        line-height:1.8;
    }

    /* Contact Box */

    .contact-box{
        width:100%;
        padding:25px 20px;
        border-radius:20px;
    }

    .contact-box h2{
        font-size:24px;
        margin-bottom:25px;
        text-align:center;
    }

    .contact-item{
        align-items:flex-start;
        gap:15px;
        margin-bottom:20px;
    }

    .contact-item .icon{
        width:46px;
        height:46px;
        font-size:20px;
        flex-shrink:0;
    }

    .contact-item span{
        font-size:15px;
        line-height:1.7;
        word-break:break-word;
    }

    .linkedin-btn{
        display:block;
        width:100%;
        text-align:center;
        padding:14px;
        font-size:15px;
    }

  @media (max-width:480px){

    .achievements-section{
        padding:50px 0;
        margin:0 10px;
    }

    .section-title {
        font-size:40px !important;
        line-height:1.3;
    }

    .section-title p{
        font-size:15px;
    }

    .achievements-grid{
        flex-direction:column;
                margin-top: -90px !important;

    }

    .achievement-card{
        width:100%;
    }

    .achievement-card h3{
        font-size:18px;
    }

    .achievement-card p{
        font-size:15px;
        line-height:1.8;
    }

    .top-connector{
        display: none !important;
    }

}
}