@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;1,100&display=swap');

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

         body {
           font-family:'Raleway', sans-serif;
           background:#fff;
           color:#333;
           line-height:1.6;
         }

         ul {
                 list-style:none;
         }

         a {
                 color:#333;
                 text-decoration: none;
         }

         h1, h2 {
                 font-weight: 300;
                 line-height: 1.2;
         }

         p {
                 margin: 10px 0;
         }

         img {
                 width:100%;
         }

         /* NavBar */
         .navbar {
                 display:flex;
                 align-items: center;
                 justify-content: space-between;
                 background-color:#7b6b6e;
                 color:#f1eae8;
                 opacity:0.8;
                 width:100%;
                 height:70px;
                 position:fixed;
                 top:0px;
                 padding: 0 30px;
                 transition: 0.5s;
         }

         .navbar.top {
                 background:transparent;
         }

         .navbar ul {
                 display:flex;
         }
         .navbar a {
                 color:#c8d2e2;
                 padding: 10px 20px;
                 margin: 0 5px;
         }

         .navbar a:hover {
                 border-bottom:  #f7dbbb 2px solid;
         }

         .hero {
                 background:url(../img/noir_cover.jpg) no-repeat center center/cover;
                 height:100vh;
                 position:relative;
                 color:#fff;
         }

         .hero .content {
                 display: flex;
                 flex-direction: column;
                 align-items:center;
                 justify-content: center;
                 text-align: center;
                 height: 100%;
                 padding: 0 20px;
         }

         .hero .content h1 {
                 font-size:55px;
         }

         .hero .content p {
                 font-size: 23px;
                 max-width: 600px;
                 margin: 20px 0 30px;
         }

         .hero::before {
                 content:'';
                 position:absolute;
                 top: 0;
                 left: 0;
                 width: 100%;
                 height: 100%;
                 background:rgba(0,0,0,0.6);
         }

         .hero * {
                 z-index:10;
         }

         /* Icons */
         .icons {
                 padding:30px;
         }

         .icons h3 {
                 font-weight: bold;
                 margin-bottom: 15px;
         }

         .icons i {
                 background-color:#F7DBBB;
                 border-radius:50%;
                 padding:1rem;
                 margin-bottom:15px;
         }
         
         .cases img:hover {
                 opacity:0.7;
         }

         /* Footer */
         .footer {
                 display:flex;
                 flex-direction:column;
                 align-items:center;
                 justify-content:center;
                 text-align:center;
                 height:200px;
         }

         .footer .social > * {
                 margin-right:30px;
         }

         .footer a:hover {
                 color:#f7dbbb;

         }

         /* Mobile */
         @media(max-width:768px) {
                 .navbar {
                         flex-direction: column;
                         height: 120px;
                         padding: 20px;
                 }
                 .navbar a {
                         padding: 10px 10px;
                         margin: 0 3px;
                 }

                 .flex-items {
                         flex-direction:column;
                 }

                 .flex-columns .column, .flex-grid .column{
                         flex:100%;
                         max-width:100%;
                 }
         }