/* <!-- - Mobile: 375px
- Desktop: 1440px --> */

html {
   font-size: 15px
}

:root {
   --soft-orange: hsl(35, 77%, 62%);
   --Soft-red: hsl(5, 85%, 63%);
   --Off-white: hsl(36, 100%, 99%);
   --Grayish-blue: hsl(233, 8%, 79%);
   --Dark-grayish-blue: hsl(236, 13%, 42%);
   --Very-dark-blue: hsl(240, 100%, 5%);
}

* {
   box-sizing: border-box;
}

body {
   font-family: 'Inter', sans-serif;
   background-color: var(--Off-white);
   margin: 0;
   padding: 0;
}

/* BASE End */

/* HELPER */
.w-100 {
   width: 100%;
}

.bt-none {
   border-bottom: none !important;
}

/* HELPER End */

/* NAV */
nav,
.container {
   width: 1100px;
   margin: 0 auto;
}

nav {
   display: flex;
   margin-top: 80px;
   justify-content: space-between;
}

nav>ul {
   list-style: none;
   display: flex;
   gap: 10px;
}

a {
   text-decoration: none;
   color: var(--Dark-grayish-blue);
}

nav>ul>li>a:hover {
   text-decoration: underline;
}

/* NAV End */

.container {
   margin-top: 60px;
   display: flex;
   flex-wrap: wrap;
   gap: 30px;
}

.w-200 {
   display: none;
}
.container>section {
   flex: 2;
}

.info {
   display: flex;
   gap: 5px;
}



.info h1 {
   font-size: 3.5rem;
   margin: 20px 0 30px;
}

.item-detail {
   padding: 40px 25px 25px 25px;
   text-align: justify;
   display: block;
}

.item-detail>p {
   margin-top: -5px;
   margin-bottom: 65px;
}

.item-detail>a.btn {

   padding: 10px 40px;
   background-color: var(--Soft-red);
   display: inline-block;
   color: var(--Off-white);
   margin-left: 30px;
}

.container>aside {
   flex: 1;
   padding: 20px;
   background-color: var(--Very-dark-blue);
}

.container>aside>h2 {
   color: var(--soft-orange);
   margin-top: 10px;
   font-size: 2rem;
}

aside>.item {
   margin-bottom: 30px;
   border-bottom: 1px solid var(--Dark-grayish-blue);
}

aside>.item>h3 {
   color: var(--Off-white);
}

aside>.item>p {
   color: var(--Grayish-blue);
}

/* FOOTER */

footer.container {
   gap: 0px;
}

footer.container>.item {
   flex: 1;
   display: flex;
}

footer.container>.item>img {
   width: 100px;
   max-height: 120px;
}

footer.container>.item>div {
   flex: 2;
   padding: 0 20px;
}

footer.container>.item h3 {
   margin: 0;
   color: var(--Grayish-blue);
}

footer.container>.item h4 {
   margin: 10px 0 0;
}

footer.container>.item p {
   color: var(--Very-dark-blue);
}

/*Small devices (landscape phones, 576px and up) */
@media (max-width: 1024px) { 
   
   * {
      box-sizing: border-box;
      width: 100%;
   } 
   nav,
   .container {
   flex-direction: column;
   width: 100%;
   padding-left: 15px;
   padding-right: 15px;
   }
   
   .container {
      margin: 0;
   }

   .w-100 {
      display:  none;
   }

   .w-200 {
      display: block;
      
      
   }

   nav {
   
   margin-top: 20px;
   }

   nav > svg {
      margin:10px 10px 15px 0;
   }

   nav > ul {
      justify-content: flex-start;
      margin-top: 0;
      margin-bottom: 20px;
      padding: 0;
   } 

   .info {
      flex-direction: column;
   }
   .info h1 {
      padding: 0 30px 0 0;
   }
   .item-detail {
      padding: 0;
   }
   
   .item-detail > p {
      margin-top: -25px;
      margin-bottom: 25px;
      margin-right: 60px;
   }
   
   .item-detail > a.btn {
      
      margin: 0 0 10px 0;
      padding:  auto;
      width: 170px;
   } 

   .container > aside {
      margin-bottom: 60px;
      
   }

   footer.container {
      gap: 20px;
      margin-bottom: 50px;
   }
   
   footer.container > .item h3 {
      font-size: 2rem;
   }
}


/* Medium devices (tablets, 768px and up)
  @media (min-width: 768px) {
      .box {
          background: var(--green);
      }
      
  }

  /*Large devices (desktops, 992px and up) */
/* @media (min-width: 992px) {
      .box {
          background-color: var(--midnight-blue);
          color: var(--light-white);
      }
      
  } */

/*X-Large devices (large desktops, 1200px and up) */
/* @media (min-width: 1200px) {
      
  } */

/* // XX-Large devices (larger desktops, 1400px and up) */
/* @media (min-width: 1400px) {
      
  }  */