/* conference.css */

/* reset browser stylesheet*/

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

 body{
   background-color: rgb(226, 226, 226);
 }

.title{
   margin-top: 10px;
   text-align: center;
   font-size: 50px;
 }

 .sub-title{
   text-align: center;
   margin-bottom: 50px;
   font-size: 20px;
 }

 .grid-container{
            width: 1200px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 550px);
            justify-content: center;
            margin: 0px auto;
            gap: 20px 40px;
        }

    /* .item{ } */

   .sub-item-top{
            width: auto;
            height: 50%;
            flex-direction: column;
            display: flex;
   }

   .profile-pic-1{
   width: auto;
   height: 50vh;
   background: linear-gradient(to right, rgb(104, 104, 255),rgb(255, 122, 153));
   text-align: center;
   align-content: center;
   font-size: 60px;
   }

   .profile-pic-2{
   width: auto;
   height: 50vh;
   background: linear-gradient(to right, rgb(104, 255, 200),rgb(122, 193, 255));
   text-align: center;
   align-content: center;
   font-size: 60px;
   }

   .profile-pic-3{
   width: auto;
   height: 50vh;
   background: linear-gradient(to right, rgb(255, 152, 104),rgb(251, 255, 122));
   text-align: center;
   align-content: center;
   font-size: 60px;
   }

   .profile-pic-4{
   width: auto;
   height: 50vh;
   background: linear-gradient(to right, rgb(255, 104, 157),rgb(253, 122, 255));
   text-align: center;
   align-content: center;
   font-size: 60px;
   }

   .profile-pic-5{
   width: auto;
   height: 50vh;
   background: linear-gradient(to right, rgb(104, 255, 109),rgb(255, 137, 122));
   text-align: center;
   align-content: center;
   font-size: 60px;
   }

   .profile-pic-6{
   width: auto;
   height: 50vh;
   background: linear-gradient(to right, rgb(132, 255, 104),rgb(122, 239, 255));
   text-align: center;
   align-content: center;
   font-size: 60px;
   }

   .sub-item-bottom{
       width: auto;
       height: 50%;
      background: white;
      border-bottom-left-radius: 25px;
      border-bottom-right-radius: 25px;
   }

   .bottom-item{
   background: inherit;
   padding: 5px 25px;
   }

   .header{
      padding-top: 15px;
      font-size: 25px;
      font-weight: bold;
   }

   .position{
      color: blue;
   }

   .detail-list{
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      gap: 20px;
      padding: 20px;
   }

   .detail{
      background-color: rgb(191, 191, 250);
      color:blue;
      border-radius: 25px;
   }

   .social-list{
    display: flex;
   flex-wrap: wrap;
   flex-direction: row;
   gap: 20px;
   padding-left: 20px;
   }

   .social{
      background-color: rgb(211, 211, 211);
      border-radius: 50px;
      width: 35px;
      height: 35px;
      text-align: center;
      align-content: center;
   }