/*Css For Tablet and Mobile*/
@media screen and (max-width: 1000px) {
   /*Header Css For Mobile*/
   header nav {
      display: none;
      background: #000000b8;
      flex-direction: column;
      width: 100%;
      padding: 10px;
      border-radius: 4px;
   }

   header nav.active {
      display: flex;
      animation: slide-left 0.6s ease-in-out;
   }

   header nav > a:hover {
      transform: translateX(10px);
   }

   #benefits-loc-div > div {
      border: none;
      padding: 20px;
      background-color: #34343480;
      flex: 1 0 150px;
      gap: 10px;
      min-width: fit-content;
      flex-direction: column;
      border-radius: 6px;
   }

   #benefits-loc-div {
      gap: 10px;
   }

   #bottom-fixed > h2 {
      display: none;
   }

   #download-div {
      gap: 10px 20px;
   }
}

/*Only For Mobile*/
@media screen and (max-width: 650px) {
   #hero-sec {
      text-align: center;
      align-items: center;
      padding: 20px;
      justify-content: center;
   }

   #hero-sec > div {
      flex-direction: column;
   }

   #project-about div:nth-child(n + 2) {
      padding: 0px;
   }

   #project-about img {
      padding: 0px;
   }

   #location-benefit {
      text-align: center;
   }

   #devloper-sec > div {
      flex-direction: column;
   }

   #devloper-sec > div:nth-child(2n) {
      flex-direction: column;
      text-align: end;
   }

   #bottom-fixed {
      flex-direction: column;
      align-items: stretch;
   }
}

/*Only Desktop Css*/
@media screen and (min-width: 1000px) {
   #nav-toggle {
      display: none;
   }

   #project-about div:nth-child(n + 2) {
      padding-top: 8vw;
   }

   #benefits-loc-div > div:not(:last-child) {
      border-right: 2px solid #d9d9d9;
   }

   #invest-sec > div {
      flex-wrap: nowrap;
   }

   footer .grid div:last-child {
      max-width: 380px;
   }

   .sticky {
      position: sticky;
      top: 20px;
   }
}

/*Custome Breakpoint*/
@media screen and (min-width: 850px) {
   #project-about {
      flex-wrap: nowrap;
   }
}