/* ===== Root Colours & Fonts ===== */

:root {
    --purple:#403d84;
    --blue:#bed6fc;
    --green:#88aa6f;
    --green-hover:#76985f;
    --dark-purple:#2f2c63;
    --white:#fff;
    --light:#f5f7fa;
    --text:#333;
    --text-light:#6d6060;
    --border:#e0e4e8;
    --radius:12px;
    --transition:.3s ease;
    --heading:'Merriweather', serif;
    --body:'Open Sans', sans-serif;
  }
  
  /* ===== RESET ===== */
  
  *{
    margin:0;
    padding:0;
    box-sizing:border-box;
  }
  
  body{
    font-family:var(--body);
    color:var(--text);
    background:#c2e2fd;
    line-height:1.6;
  }
  
  img{
    max-width:100%;
    display:block;
  }
  
  a{
    text-decoration:none;
    transition:var(--transition);
    color:inherit;
  }
  
  ul{
    list-style:none;
  }
  
  h1,h2,h3{
    font-family:var(--heading);
    color:var(--purple);
  }
  
  h2{
    font-size:2.9rem;
  }
  
  .container{
    max-width:1200px;
    margin:auto;
    padding:0 20px;
  }
  
  
  /* ===== BUTTONS ===== */
  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:11px 22px;
    font-weight:600;
    border:2px solid transparent;
    border-radius:24px;
    cursor:pointer;
    transition:var(--transition);
  }
  
  .btn-primary{
    background:var(--green);
    border-color:var(--green);
    color:var(--white);
  }
  
  .btn-primary:hover{
    background:var(--green-hover);
  }
  
  .btn-dark{
    background:var(--purple);
    color:#fff;
  }
  
  .btn-dark:hover{
    background:var(--dark-purple);
  }
  
  .btn-outline{
    border-color:#fff;
    color:#fff;
    background:transparent;
  }
  
  .btn-outline:hover{
    background:#fff;
    color:var(--purple);
  }
  
  
  /* ===== HEADER ===== */
  
  header{
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,.1);
    position:sticky;
    top:0;
    z-index:10;
  }
  
  header .container{display:flex;align-items:center;justify-content:space-between;height:90px}
  
  .logo img{
    height:80px;
  }
  
  .nav-list{
    display:flex;
    gap:1.5rem;
  }
  
  .nav-list a{
    font-weight:600;
    position:relative;
  }
  
  .nav-list a::after{
    content:"";
    position:absolute;
    bottom:-5px;
    left:0;
    width:0;
    height:2px;
    background:var(--blue);
    transition:var(--transition);
  }
  
  .nav-list a:hover::after{
    width:100%;
  }
  
  
  /* ===== RESEARCH GALLERY ===== */
  
  .research-gallery{
    width:100%;
    min-height:100vh;
    padding:40px 55px;
  }
  
  
  /* ===== TITLE ===== */
  
  .research-gallery h1{
    font-size:72px;
    font-weight:800;
    line-height:1.08;
    color:#000;
    margin-bottom:40px;
  }
  
  
  /* ===== SEARCH BAR ===== */
  
  /* .search-bar{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:65px;
    position:relative;
  }
  
  .search-bar input{
    width:560px;
    height:78px;
    border:4px solid #000;
    border-radius:60px;
    background:transparent;
    outline:none;
    padding:0 90px 0 35px;
    font-size:22px;
  }
  
  .search-bar button{
    position:absolute;
    right:calc(50% - 280px + 16px);
    top:50%;
    transform:translateY(-50%);
    width:55px;
    height:55px;
    border:none;
    background:transparent;
    cursor:pointer;
  }
  
  .search-bar i{
    font-size:42px;
    color:#000;
  }
   */
  
  /* ===== GALLERY ===== */
  
  .gallery-wrapper{
    height:700px;
    overflow-y:auto;
    padding-right:10px;
  }
  
  
  /* ===== SCROLLBAR ===== */
  
  .gallery-wrapper::-webkit-scrollbar{
    width:14px;
  }
  
  .gallery-wrapper::-webkit-scrollbar-track{
    background:#eef2f5;
    border-radius:20px;
  }
  
  .gallery-wrapper::-webkit-scrollbar-thumb{
    background:#555;
    border-radius:20px;
    border:2px solid #eef2f5;
  }
  
  
  /* ===== GRID ===== */
  
  .gallery-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px ;
    justify-items:center;
  }
  
  
  /* ===== CARDS ===== */
  /* CARD */

  .card{
    width:330px;
    background:#fff;
    border:4px solid #676464;
    text-decoration:none;
    overflow:visible;
    display:block;
    transition:transform .3s ease, border-color .3s ease;
  }
  
  .card:hover{
    transform:translateY(-5px);
    border-color:#88aa6f; /* dark purple */
  }
  
  
  /* IMAGE AREA */
  
  .card-image{
    width:100%;
    height:380px; /* controls image area height */
    overflow:hidden;
    background:#f2f2f2;
  }
  
  
  /* IMAGE */
  
  .card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  
  
  /* CONTENT */
  
  .card-content{
    padding:20px;
  }
  
  .card-content h3{
    font-size:20px;
    color:#000;
    margin-bottom:8px;
    text-align: center;
  }
  
  .card-content p{
    font-size:15px;
    color:#555;
  }