*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f5f7fb;
    font-family:Arial,sans-serif;
}


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

.scientific-hero{

    position:relative;

    height:80px;

    overflow:hidden;
}


.hero-image{

    width:100%;

    height:100%;

    object-fit:cover;
}


.hero-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(rgba(34,53,108,.80),
                    rgba(34,53,108,.65));
}


.hero-content{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;
}


.hero-badge{

    background:#22356c;

    border:3px solid #f8770e;

    padding:12px 30px;

    border-radius:50px;

    box-shadow:0 10px 25px rgba(0,0,0,.25);
}


.hero-badge h1{

    color:white;

    margin:0;

    font-size:30px;

    font-weight:500;
}







/*================ MEMBERS SECTION ================*/

.scientific-section{

    padding:40px 0 90px;
}


.scientific-list{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px 50px;
}



/* Ribbon Card */

.scientific-card{

    background:#22356c;

    color:white;

    min-height:80px;

    display:flex;

    align-items:center;

    position:relative;

    padding-left:95px;

    border-radius:50px 0 0 50px;

    transition:.3s;

    width:100%;
}



/* Right Arrow */

.scientific-card::after{

    content:"";

    position:absolute;

    right:-30px;

    border-top:40px solid transparent;

    border-bottom:40px solid transparent;

    border-left:30px solid #22356c;
}



/* Circle */

.icon-circle{

    width:70px;

    height:70px;

    background:white;

    border-radius:50%;

    border:3px solid #f8770e;

    position:absolute;

    left:-10px;

    display:flex;

    justify-content:center;

    align-items:center;
}


.icon-circle i{

    color:#22356c;

    font-size:24px;
}


.scientific-card h4{

    margin:0;

    font-size:24px;

    font-weight:600;
}


.scientific-card:hover{

    transform:translateX(10px);
}




/*================ TABLET ================*/

@media(max-width:991px){

.hero-badge h1{
    font-size:30px;
}

.scientific-list{

    grid-template-columns:repeat(2,1fr);

    gap:25px;
}

.scientific-card h4{

    font-size:20px;
}

}




/*================ MOBILE ================*/

@media(max-width:768px){

.scientific-hero{
    height:220px;
}

.hero-badge{
    padding:10px 30px;
}

.hero-badge h1{
    font-size:25px;
}


/* One card in one row */
.scientific-list{

    grid-template-columns:1fr;

    gap:20px;
}


.scientific-card{

    min-height:70px;

    padding-left:75px;
}


.scientific-card::after{

    right:-25px;

    border-top:35px solid transparent;

    border-bottom:35px solid transparent;

    border-left:25px solid #22356c;
}


.icon-circle{

    width:55px;

    height:55px;

    left:-5px;

    flex-shrink:0;
}


.icon-circle i{

    font-size:18px;
}


.scientific-card h4{

    font-size:16px;

    line-height:1.4;
}

}