.contact-info {
     background-color: #343a40;
     padding: 3rem 0;
 }

 .contact-box {
     padding: 2rem;
     background: #495057;
     border-radius: 8px;
     transition: background 0.3s ease;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100%;
     min-width: 370px;
     /* Adjust to fit the widest content */
     max-width: 100%;
     flex: 1;
     /* Allow boxes to grow/shrink equally */
     box-sizing: border-box;
     /* Include padding in width calculation */
 }

 .contact-box:hover {
     background: #6c757d;
 }

 .contact-box i {
     color: #ffc107;
     margin-bottom: 1rem;
 }

 .contact-box h5 {
     margin-bottom: 1rem;
     font-weight: 700;
     color: #ffc107;
     text-align: center;
 }

 .contact-box p {
     margin-bottom: 0.5rem;
     color: #f8f9fa;
     text-align: center;
     word-wrap: break-word;
     overflow-wrap: break-word;
     max-width: 100%;
     white-space: normal;
 }

 .contact-info .row {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
     gap: 20px;
     /* Add a gap between flex items */
     padding: 0 20px;
     /* Add padding inside the row to ensure spacing */
 }

 .contact-info .col-md-3,
 .contact-info .col-sm-6 {
     display: flex;
     justify-content: center;
     padding: 0;
     /* Remove padding to avoid extra space issues */
 }

 .contact-box a {
     text-decoration: none;
     color: #ffc107;
 }

 .contact-box a:hover {
     text-decoration: underline;
     color: #ffdd57;
 }