.butn-light-gray {
background-color: var(--butn-light-gray); /* light-gray */
border: none;
color: var(--pure-black);
font-weight: var(--font-weight-bold);
padding: 10px;      
text-align: center;
font-size:var(--font-size-base);
cursor: pointer;
border-radius: 5px;
}

.butn-strong-blue {
background-color: var(--butn-strong-blue); /* strong blue */
border: none;
color: var(--pure-white);
font-weight: var(--font-weight-bold);
padding: 10px;
text-align: center;
font-size:var(--font-size-base);
cursor: pointer;
border-radius: 5px;
}

.button-green-shade-blue{
width: 100%; /* Stretch to the full width of its container */
background-color: var(--green-shade-blue); /* strong blue */
border: none;
color: var(--pure-white);
font-weight: var(--font-weight-bold);
padding: 10px;
text-align: center;
font-size:var(--font-size-base);
cursor: pointer;
border-radius: 5px;
}

.dot {
position: relative;
font-size: 150%; /* Makes the dot larger than the surrounding text */
color: var(--pure-black); /* Bright red color for visibility */
margin: 0 2px; /* Adds horizontal space around the dot */
vertical-align:baseline;
top: -2px; /* Adjust this value to fine-tune the vertical position */
}

.arrow-icon-circle {
display: flex;
align-items: center; /* Vertically centers content */
justify-content: center; /* Horizontally centers content */
width: calc(var(--margin-lg) + var(--margin-xxs));
height: calc(var(--margin-lg) + var(--margin-xxs));
background-color:var(--mlighter-gray);
border-radius: 50%;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-base); /* Adjust as necessary */
font-family:var(--font-family-montserrat); /* Standardizing font */
}

.align-img-with-text {
width: 22px; /* base size for 1536px screen */
height: auto;	
vertical-align:middle;
padding-left:var(--margin-md);
}

.align-topic-img-with-text {
width: 25px; /* base size for 1536px screen */
height: auto;	
vertical-align:middle;
}

/* === Large Desktops (min-width: 1920px) === */
@media (min-width: 1920px) {
    .arrow-icon-circle {
      width: 30px;
      height: 30px;
      font-size: 20px;
    }
  
    .align-img-with-text {
      width: 26px;
    }

    .align-topic-img-with-text {
        width: 30px;
      }
  }

/* === Standard Laptops (max-width: 1280px) === */
@media (max-width: 1280px) {
    .arrow-icon-circle {
      width: 25px;
      height: 25px;
      font-size: 16px;
    }
  
    .align-img-with-text {
        width: 20px;
      }
  
      .align-topic-img-with-text {
          width: 22px;
      }
  }

  /* === Small Laptops (max-width: 1024px) === */
@media (max-width: 1024px) {
    .arrow-icon-circle {
      width: 20px;
      height: 20px;
      font-size: 15px;
    }
  
    .align-img-with-text {
      width: 18px;
    }

    .align-topic-img-with-text {
        width: 20px;
      }
  }