/* Your existing CSS */
:root {
     --first-color: #4286f2;
    --second-color: #ea4235;
    --black: #0d0d0d;
    --white: #f2f2f2;
    --grey: #b3b3b3;
}
body {
    box-sizing: border-box;
     font-family: 'Lato', sans-serif;
    overflow: scroll;
  }

::-webkit-scrollbar {
  display: none;
}

.text-orange {
  color: var(--first-color);
}

/* BUTTON */
.orange-button {
  background-color: var(--first-color);
  color: var(--white);
}

.orange-button:hover {
  background-color: var(--white);
  color: var(--first-color);
  border-color: var(--first-color);
  font-weight: bold;
}

.orange-button:active {
  background-color: var(--white);
  color: var(--second-color) !important;
  border-color: var(--second-color) !important;
}

.orange-button-fill {
  background-color: var(--first-color);
  color: var(--white);
}

.orange-button-fill:hover {
  background-color: var(--second-color);
  color: var(--white);
}
/* BUTTON */

.orange-bg {
  background-color: var(--first-color);
}

@media screen and (max-width: 600px) {
  .col-6 {
    width: 100%;
  }
}

@media screen and (min-width: 601px) and (max-width: 1000px) {
  .col-6 {
    width: 50%;
  }

  .col-md-9 {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Center the card horizontally */
  .card {
    margin: 0 auto;
  }
}

/* For screens smaller than 768px (tablets and mobile phones) */
@media screen and (max-width: 600px) {
  .fs-3 {
    text-align: center;
  }

  .fs-2 {
    text-align: center;
  }

  .fs-6 {
    text-align: left;
  }
}

/* For screens between 601px and 1000px */
@media screen and (min-width: 601px) and (max-width: 1000px) {
  .fs-3 {
    text-align: center;
  }

  .fs-2 {
    text-align: center;
  }

  .fs-6 {
    text-align: left;
  }
}
@media screen and (min-width: 601px) and (max-width: 1000px) {
  /* Add your specific styling for the content on the left here */

  .fs-3,
  .fs-2,
  .fs-6 {
    text-align: left; /* Adjust text alignment as needed */

  }
  .col-md-9{
    width: 100% !important;
  }
}