@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap'); 

/*------- General design --------*/

body{
  background-color: #FFFFFF;
  color: #001D4A;
}

 /*-------- header ------------- */
 .main-header {
    display: flex;
    align-items: center;
    position: absolute;
    gap: 24px;
    height: 56px;
    padding: 0 32px;
    background: #FFFFFF;/* #F5F7FB; #FFCD00;*/
    box-shadow: 0px 4px 16px rgba(1, 11, 27, 0.1);
    top: 0;
    left: 0;
    right: 0;
  }

  .main-header__logo {
    width: 110px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .main-nav {
    display: flex;
    align-items: center;
  }



  /*-------- card ------------- */

  .container{
    background-color: #FFCD00;
    display: block;
    min-height: 100vh;   
    width: 100%;
  }

  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .title{
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: bold;
    font-size: 38px;
    color: #4B3D3C;
    margin-top: 130px;
    margin-bottom: 5px;
    padding-bottom: 0px;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
  }

  .sub-title{
   font-size: 16px;
   margin-block-end: 0.2em;
   margin-block-start: 0.2em;
  }

  .text{
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    color: #4B3D3C;
  }

  span{
   font-family: 'IBM Plex Sans';
   font-weight: 500;
   font-size: 14px;
  }

  .mdp{
    font-family: 'IBM Plex Sans';
    font-style: italic;
    font-weight: 400;
    font-size: 16px;
    padding-top: 8px;
  }

/* -----------------------------------------*/ 
/* Media query for smaller screens */
@media (max-width: 768px) {
   .main-header {
    height: 65px;
  }
  
  #logo{
    width: 100px;
    height: auto;
  }

  .container{
    background-color: #FFCD00;
    display: block;
    width: 97%;
    min-height: 100vh;
  }

  .card {
    margin-top: 235px; 
  }

  .title {
    font-size: 28px; 
    margin-bottom: 5px;
    padding-bottom: 0px;
    margin-top: 30px;
  }

  .sub-title{
    font-size: 14px;
   }
  
   .photon-container{
    margin-top: 35px;
    background-color: #FFCD00;
    min-height: 100%;
  }

  img {
    max-width: 100%; 
    height: auto; 
  }

  footer{
    background-color: #FFCD00;
  }
}