/* Font Awesome icon spacing in classic pages */
a > i.fa,
a > i.fas,
a > i.far,
a > i.fab,
a > span.fa,
a > span.fas,
a > span.far,
a > span.fab {
  margin-right: 8px;
}

.classic-button {
  background-color: #3498DB;
  color: white; 
  padding: 12px 24px; 
  border: 2px solid #2980B9; 
  border-radius: 4px;
}

.classic-button:hover{
  color: white;
}

img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.logo-left {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.breadcrumb li{
  margin-bottom: 0 !important;
}

.breadcrumbs {
    padding-top: 32px;
}

.feature-box {
    display: flex;          /* Aligns icon and content horizontally */
    align-items: flex-start; /* Keeps icon at the top of the text block */
    gap: 20px;              /* Creates the gap between icon and heading */
}

.feature-box .icon-img img {
    text-align: left;       /* Fixes the centering issue */
    display: block;         /* Removes bottom whitespace from images */
    max-width: none;        /* Ensures image doesn't shrink unexpectedly */
}

.feature-box .content h3 {
    margin-top: 0;          /* Ensures heading aligns perfectly with top of icon */
}