body{
    font-family: poppins;
    background: #272044;
    padding: 37px;
    margin: 0;
}
.container{
    max-width: 100%;
    margin: 0 auto;
}
    
    header{
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8))
    ,url(../images/lisbon.png);
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    color: white;
    padding: 200px 0;
}
    header h1{
        font-size: 96px;
        font-weight: 700;
        line-height: 1;
        margin: 30px 0;
       
    }
    header h2{
        font-size: 40px;
        font-weight: 400;
        line-height: 1px;
        margin: 0 auto;
        margin-bottom: 20px;
        padding: 30px;
    }
    header h3{
        font-size: 24px;
        font-weight: 900;
        display: inline-block;
        margin: 0 auto;
        letter-spacing: 5px;
        text-transform: uppercase;
    }
    header a{
        display: inline-block;
        text-transform: uppercase;
        text-decoration: none;
        color: #272044;
        padding: 16px 32px;
        font-size: 14px;
        font-weight: 700;
        margin-top: 32px;
        background-color: white;
        line-height: 1.5;
        letter-spacing: 3px;
    }
    .grid-main{
        background-color: white;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 64px;
    }
    main section{
      max-width: 100%;
      margin: 0 auto;
      padding: 100px;
    }
    main h2{
        font-weight: 700;
        font-size: 16px;
        letter-spacing: 5px;
        line-height: 1.5;
        color: #272044;
        opacity: 0.3;
        text-transform: uppercase;
        margin: 0;
    }
    main h3{
        font-weight: 700;
        font-size: 40px;
        line-height: 1.5;
        color: #272044;
        margin: 0;
    } 
    main p{
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        color: #272044;
        opacity: 0.7;
    }
    .text-center{
        text-align: center;
    }
    h4{
       font-weight: 700;
       font-size: 24px;
         line-height: 1.5; 
         color: #272044;
    }
    h5{
      font-weight: 700;
      font-size: 13px;
        line-height: 1.5;
        color: #272044;  
    }
    .middle-section a{
      padding: 16px 32px;
      color: white;
      background-color:#462CB2;
      text-decoration: none;
      gap: 10px; 
      display: block;
      font-weight: 700;
        font-size: 14px;
        line-height: 21px;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-top: 32px;
        text-align: center;
    }
   
    .cafe-grid-3-columns{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
    }
    .cafe-card{
        background: white;
        margin: 30px 0;
    } 
    .media-grid{
        grid-template-columns: 1fr 1fr;
        display: grid;
        height: 250px;
    }
    .media-grid img,
.media-grid iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.instagram-embeds {
  margin: 30px 0;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
    .card-content{
        padding: 30px;
    }
    .card-link{
        padding: 0 30px 30px;
    }
    .middle-section {
  background: #f8f8f8;
}
    footer{
    color: white;
    background-image: linear-gradient(rgba(39, 32, 68, 0.9), rgba(39, 32, 68, 0.9)), url(../images/lisbon-footer.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 100px 0;
    }

    .grid-footer{
        display: grid;
        grid-template-columns: 1fr 2fr 2fr;
        grid-gap:64px;
       
    }
    section{
        max-width: 100%;
        margin: 0 auto;
        padding: 100px;
    }
    .img-responsive {
    width: 100%;
    display: block;
    }
    footer h3{
        color: white;
        font-weight: 700;
        font-size: 20px;
        line-height: 30px;
    }
    footer li{
        list-style: none;
        margin: 0;
        padding: 0;
    }
    footer ul{
        padding: 0;
    }
    footer a{
        text-decoration:underline;
        color: white;
        font-size: 16px;
        line-height: 1.5;
        opacity: 0.7;
    }
    
    footer p{
        color: white;
        opacity: 0.7;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
    }

    @media (max-width:960px){
        header{
            padding:60px 0;
        }
        header h1{
            font-size:48px;
        }
        header h2{
            font-size:20px;
        }
        header h3{
            font-size:12px;
        }
        .grid-main{
            grid-template-columns: 1fr;
            grip-gap:32px;
        }
        main section{
            padding:20px;
        }
        .grid-footer{
            grid-template-columns: 1fr;
            grid-gap: 32px;
        }
        footer{
            padding: 30px;
        }
        .media-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .cafe-grid-3-columns {
    grid-template-columns: 1fr;
  }
  .media-grid iframe {
    height: 220px;
  }
  .media-grid img {
    display: none;
    }
        .gallery-grid {
    grid-template-columns: 1fr;
  }
    }