/* menu bars */
.menu-btn {
  display: none;
  width: 30px;
  cursor: pointer;
}

.menu-btn .bar {
  height: 2.5px;
  width: 100%;
  background-color: #fff;
  margin: 5px 0;
  transition: .4s;
  border-radius: 2px;
}

.menu-btn .second {
  width: 100%;
}

.menu-btn.open .first {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.open .second {
  opacity: 0;
}

.menu-btn.open .third {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* menu end */
@media (max-width: 991px) {
  .menu-btn {
    display: block;
  }

  .mobile-nav {
    display: flex;
    position: absolute;
    top: 130px;
    left: -100%;
    background-color: #000;
    width: 100%;
    height: calc(100vh - 60px);
    padding: 10px 20px;
    z-index: 1000;
    transition: all .3s ease-in-out;

    & .mobile-navlinks {
      display: flex;
      flex-direction: column;
      align-items: center;
      list-style: none;
      gap: 20px;
      width: 100%;

      & li {
        padding: 10px 0;
        width: 100%;
        text-align: center;

        & a {
          text-decoration: none;
          color: #fff;
          font-size: 1.2rem;
          font-family: "Archivo", sans-serif;
        }
      }
    }
  }

  .mobile-nav.open {
    left: 0;
  }

  header {
    width: 100%;

    & .top-nav {
      padding: 10px 20px;
      display: block;
      /* height: 50px; */

      & .welcome-text-box {
        font-size: 13px;
        margin-bottom: 5px;
      }

      & .who-are-you {
        gap: 15px;
        font-size: 13px;
        justify-content: flex-end;
      }
    }

    & .bottom-nav {
      padding: 15px 20px;


      & img {
        width: 205px;
        height: 50px;
        object-fit: contain;
      }

      & .navlinks {
        display: none;
        align-items: center;
        justify-content: space-between;
        list-style: none;

        & li {
          padding: 0 20px;

          & a {
            text-decoration: none;
            font-size: 1rem;
            color: #fff;
          }
        }
      }
    }

  }

  .hero-section {
    & .hero-text-head {
      font-size: 35px;
      padding: 50px 0 8px 21px;
    }

    & .hero-text-subhead {
      font-size: 1rem;
      padding: 12px 0 16px 21px;
      line-height: 1.5;
    }

    & .hero-buttons {
      margin: 10px 0 0 20px;
      gap: 15px;
    }

    & .hero-cards-box {
      display: flex;
      padding: 10px;
      margin-top: 0;
      gap: 5px;
      width: 100%;

      & .card {
        gap: 2px;
        /* grid-template-columns: 1fr 1fr 1fr; */
        border-radius: 10px;
        padding: 5px;

        & .image-box {
          & img {
            width: 30px;
            height: 30px;
          }
        }

        & .stock-box {
          & p {
            font-size: 10px;
          }

          & .failure {
            font-size: 12px;
            margin-top: 5px;
          }

          & .success {
            font-size: 12px;
            margin-top: 5px;
          }
        }

        & .percentage-box {
          & p {
            font-size: 9.5px;
            color: #696969;
          }
        }
      }
    }
  }


  .popular-product-section {
    padding: 20px;

    h1 {
      margin: 20px 0 30px 0;
    }

    & .product-container {
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));


      & .product-card {
        max-width: 100%;
        width: 100%;
      }
    }
  }


  .fast-execution-section {
    padding: 50px 10px;

    & .fast-execution-container {
      flex-wrap: wrap;
    }
  }

  .begin-trading-container {
    padding: 0 15px 20px;

    & .begin-trading-box {

      padding: 20px;

      & .first-column {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        justify-content: center;
        text-align: center;

        & .heading-box {
          & h2 {
            margin-bottom: 20px;
          }
        }

        & .button-box {
          justify-content: center;
        }
      }

      & .second-column {
        display: grid;
        grid-template-columns: 1fr;


        & .image-display-container {
          margin-top: 60px;
          display: block;
          width: 100%;
          margin-left: 0;

          & img {
            width: 100%;
            bottom: 0;
          }
        }
      }
    }
  }


  .tight-spread-section {
    padding: 50px 20px;

    & .tight-spread-container {
      grid-template-columns: 1fr;

      & .second-container {
        margin-top: 40px;
        padding-left: 0px;
      }
    }
  }


  .explore-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.2)), url(assets/in-equity-12-bg.png);

    & .explore-container {
      display: grid;
      grid-template-columns: 1fr;
      justify-content: center;
      align-self: center;
      margin-top: 40px;
      padding: 20px;

      & .section-one {
        height: 380px;
        margin-bottom: 30px;

        & .symbol-1 {
          left: 12%;
          top: 42%;
          width: 135px;
          height: 135px;
          animation: float 6s ease-in-out infinite;
        }

        & .symbol-2 {
          left: 58%;
          top: 18%;
          width: 102px;
          height: 102px;
          animation: float 6s ease-in-out infinite;
          /* & img{
          width: 100%;
          height: 100%;
        } */
        }

        & .symbol-3 {
          left: 22%;
          top: 13%;
          width: 70px;
          height: 70px;
          animation: float 6s ease-in-out infinite;
        }

        & .symbol-4 {
          left: 70%;
          top: 60%;
          width: 52px;
          height: 52px;
          animation: float 6s ease-in-out infinite;
        }

        & .symbol-5 {
          left: 10%;
          top: 38%;
          width: 45px;
          height: 45px;
          background: #1bb0ed;
          animation: float 6s ease-in-out infinite;
          border-radius: 50%;
        }

        & .symbol-6 {
          left: 52%;
          top: 6%;
          width: 35px;
          height: 35px;
          animation: float 6s ease-in-out infinite;
          background: #59b84e;
          border-radius: 50%;
        }

        & .symbol-7 {
          left: 70%;
          top: 89%;
          width: 50px;
          height: 50px;
          animation: float 6s ease-in-out infinite;
          background: #fac82b;
          border-radius: 50%;
        }

        & .symbol-8 {
          left: 32%;
          top: 97%;
          width: 15px;
          height: 15px;
          animation: float 6s ease-in-out infinite;
          background: #3985fc;
          border-radius: 50%;
        }
      }

      & .section-two {
        & .section-two-card-box {
          display: grid;
          grid-template-columns: 1fr;
          flex-wrap: wrap;
        }
      }

    }
  }


  .security-section {
    width: 100%;
    font-family: "Archivo";
    padding: 20px;

    & h4 {
      margin: 20px 0px 15px 30px;
    }

    & h1 {
      margin: 15px 0px 50px 30px;
    }

    & .security-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));

      & .security-card {
        & img {
          margin-left: 20px;
          margin-bottom: 20px;
          width: 70px;
        }

        & h3 {
          margin: 15px 0px 8px 20px;
        }

        & p {
          margin: 15px 0px 50px 20px;
        }
      }
    }
  }

  .currency-section {
    & .currency-container {
      margin-top: 50px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      flex-wrap: wrap;
      gap: 15px;
    }
  }

  .trade-on-section {

    & h1 {
      text-align: center;
    }

    & .subtext {
      color: #ffffffb3;
      font-size: 20px;
      margin-bottom: 40px;
      text-align: center;
      line-height: 1.5;
    }

    & .outer-container {
      overflow: hidden;


    }

    & .bottom-text {
      text-align: center;
    }

    & .stats-container {
      flex-wrap: wrap;
      gap: 40px;
      /* padding-left: 20px; */
    }
  }

  .why-invest {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    & hr {
      width: 50%;
      transform: translateX(-50%);
      margin-left: 50%;
      margin-top: 20px;
      margin-bottom: 20px;
      opacity: .2;
    }


    & .why-invest-container {
      /* grid-template-columns: 1fr; */

      & .why-invest-card {
        /* width: 300px; */
        height: 320px;
        background: #fff;
        border: 1px solid #cccccc;
        box-shadow: 0 0 10px #cccccc;
        overflow: hidden;
        padding: 30px;
        font-family: 'Raleway';
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        & .card-body {
          margin-top: 15px;

          & h5 {
            font-size: 20px;
            font-family: "Raleway";
            text-align: center;
            text-decoration: underline;
          }

          & p {
            /* margin-left: 20px; */
            margin-top: 10px;
            font-family: "Raleway";
            font-size: 16px;
            color: #696969;
            line-height: 1.5;
          }
        }
      }
    }
  }


  .why-inver-bottom-container {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    margin: 20px 0px;
    width: 100%;
  }

  .ready-start-container {
    padding: 40px 10px;

    & p {
      margin-bottom: 25px;
    }
  }


  /* footer */
  footer {
    padding: 20px 0px;

    & .footer-container-top {
      gap: 30px;
      flex-direction: column;
      flex-wrap: wrap;
      padding: 0px 20px;
      margin-top: 10px;

      & .footer-card {
        padding-left: 0px;
        margin-bottom: 40px;
      }
    }

    & hr {
      margin-bottom: 40px;
    }

    & .footer-container-bottom {
      margin: 0px 20px;

      & .bottom-section-one {
        display: none;
      }


      & .bottom-section-two {
        margin-left: 0;
      }
    }
  }

  .form::before {
    right: 10px;
    top: -10px;
    z-index: 1 ;
  }
  .form::after {
    width: 200px;
  height: 200px;
    bottom: -90px;
  left: -10px;
  z-index: 1 ;
  }
}