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

html, body {
  height: 100%;
  background-color: var(--background-color);
}

body {
  overflow-x: hidden;
}

:root {
  --primary-color: #000000;
  --background-color: #000;
  --text-color: #fff;
  --color:#fff;
  --primary-font: roboto;
}

/*logo*/
.logo {
    width: 90px;
    height: 90px;
    border-radius: 10px;
}

/*navbar*/
.navbar {
  background-color: var(--primary-color);
  height: 90px;
}

/*navlinks*/
.nav-custom {
    text-decoration: none;
    color: var(--text-color);
    font-weight:600;
    font-size:medium;
    border-bottom:2px solid var(--color);
    padding: 2px;
    border-radius: 5px;
    /* font-family: var(--primary-font); */
    transition: transform 0.3 ease;
}
.nav-custom:hover {
  transform: scale(1.1);
}

#signup-btn {
    background-color: var(--color);
    /* font-family: roboto; */
}

.hero-section {
  display: flex;
  justify-content: start;
  align-items: center;
  margin-top: 30px;
}

.services-obj1 {
  width: 75%;
  padding: 2rem;
}

.about-us-obj1 {
  width: 55%;
  padding: 2rem;
}

.service-1 {
  background-image: url("../images/service-1.jpeg");
}


.service-2 {
  background-image: url("../images/service-3.jpeg");
}
.service-3 {
  background-image: url("../images/service-2.jpeg");
}

.hero-obj1 {
  width: 75%;
  padding: 2rem;
}
.hero-obj1-1 {
  width: 35%;
  height: 75%;
}
.about-obj1-1 {
  width: 35%;
}

.line {
  width: 15%;
}
.line2 {
  width: 10%;
}

.c {
  max-width: 100%;
}

/*Hero Section Character img*/
.hero-section-img {
  max-width: 100%;
  overflow: hidden;
  height: 100%;
  background-image: url("../images/hero-char.jpeg");;
  background-size: cover;
  background-position: center;
  border-radius: 50% 50% 0 0;
}
/*About Character img*/
.about-char-img {
  max-width: 100%;
  overflow: hidden;
  height: 100%;
  background-image: url("../images/about-char.jpeg");;
  background-size: cover;
  background-position: top;
  border-radius: 50% 0 0 0;
}

/*Hero section Lines*/
.topline {
  font-size: 1.2rem;
}
.midline {
  font-size: 4rem;
}
.summary {
  font-size: 1.2rem;
}
.about-summary {
  font-size: 1.2rem;
}

.service-text {
  color: var(--color);
  font-size:medium;
  font-weight: bold;
  font-style: var(--primary-font);
}


.midline, .topline, .summary, .about-summary{
  color: var(--color);
  /* font-family: var(--primary-font); */
}

.about-sub-text {
    border-top: 2px solid white;
    border-bottom: 2px solid white;
    color: var(--text-color);
    /* font-family: var(--primary-font); */
    font-size: large;
  }

.contact {
  /* font-family: var(--primary-font); */
  background-color: var(--background-color);
  color: #fff;
}

.services-obj1-1 {
    width: 75%;
    height: 100%;
  }

.footer-section {
  display: flex;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  /* font-family: var(--primary-font); */
  font-size: large;
}

.footer-obj1 {
  width: 55%;
  padding: 5rem;
}

.footer-obj2 {
  width: 35%;
  display: flex;  
  justify-content: center;
  padding-top: 2rem;
}

  ul {
    list-style: none;
    padding: 3rem;
  }

  li {
    font-size: 1.2rem;
  }

  .footer-line {
    width: 90%;
  }

.footer-last {
  width: 100%;
  height: 70px;
  display: flex;
  justify-content:space-between;
  align-items: center;
  padding-left: 2rem;
  padding-right: 2rem;
}

.footer-last p {
  font-size: 0.6rem;

}

  @media (max-width: 768px) {

    .logo {
    width: 70px;
    height: 70px;
    border-radius: 10px;
  }

    .navbar {
      height: auto;
    }

    .hero-section {
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-top: 80px;
    }

    .footer-obj2 li {
  font-size: 0.8rem;  /* or try 12px, or 0.75rem */
}


    .our-services {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }

    .service-1 {
      height: 100%;
    }

    .about-us {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .footer-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .hero-obj1 {
    width: 90%;
    padding: 0;
    padding-top: 2rem;
    margin-bottom: 2rem;
  }
  .about-us-obj1 {
    width: 90%;
    padding: 0;
    padding-top: 2rem;
    margin-bottom: 2rem;
  }

  .footer-obj1 {
  width: 90%;
}

.ak {
  margin-left: 2rem;
}

  ul {
    width: 100%;
    padding: 1rem;
  }

  .footer-obj2 {
    padding: 0;
  }
  .topline {
      font-size: larger;
    }
    .midline {
      font-size: 2rem;
    }
    .summary {
      font-size: 1.2rem;
    }
    .about-summary {
      font-size: 1.2rem;
    }

  .about-char-img {
    border: 0 0 0 0;
  }

  #signup-btn {
    display: none;
  }


  .hero-obj1-1 {
    width: 90%;
    height: 400px;
  }
  .about-obj1-1 {
    width: 90%;
    height: 100%;
  }
  .services-obj1 {
    width: 90%;
    height: auto;
    padding: 0;
    padding-top: 2rem;
    margin-bottom: 2rem;
  }

  .services-obj1-1 {
    width: 90%;
    gap: 1rem;
    padding-bottom: 2rem;
  }

  .service-text {
  font-size:0.4em;
}

  .hero-section-img {
  background-position: top;
  height: 100%;
  }

    /* Fix width for services on small screens */
  .services-obj1-1 > div {
    width: 100% !important;  /* Forces full width */
    margin: 0 auto;     /* Adds spacing between them */
  }

  /* Fix service text to be readable */
  .service-text {
    font-size: 1rem !important; /* readable size */
    text-align: center;
  }

  .vh-100 {
    height: auto !important;
  }

  /* Ensure proper layout spacing */
  .hero-obj1, .hero-obj1-1,
  .about-us-obj1, .about-obj1-1,
  .footer-obj1, .services-obj1 {
    width: 100% !important;
    padding: 1rem;
    margin: 0 auto;
  }
}

.FinanceAndTradingObj2 {
  background-image: url("../images/financeImage.jpg");
}

.PaperTradingObj1 {
  background-image: url("../images/Trade1.jpeg");
}

.SoftwareDevelopmentObj2 {
  background-image: url("../images/Software.jpeg");
}

.WebDevObj1 {
  background-image: url("../images/WebDev.jpeg");
}

.heading {
  font-size: clamp(20px, 2vw, 600px);
}

.lorem {
  font-size: clamp(12px, 1vw, 500px);
}

#map {
  height: 30vh;
  width: 20vw;
}