.about-container {
     display: flex;
     padding: 40px 0;
 }

.about-img {
     flex: 1;
     padding-right: 30px;

 }

.about-img img {
     width: 100%;
     height: auto;
     border-radius: 5px;
      margin-top:15%;
     
 }

.about-main {
     flex: 1;
 }

.about-title h2 {
     font-size: 52px;
     margin-bottom: 10px;
     color: var(--primary-color);
     font-weight: 500;
 }

.about-title h2 span {
     font-family: var(--font-family-title);
     font-weight: 100;
     color: grey;
     font-size: 40px;
 }

.about-title span {
     font-style: italic;
     color: var(--accent-color);
 }

.move {
     display: flex;
     align-items: center;
     font-style: italic;
     gap: 30px;
     /* spacing between line and text */
 }

.move::before {
     content: "";
     flex: 1;
     height: 1px;
     background-color: grey;
 }


.about-content {
     line-height: 1.8;
     margin-bottom: 0;
 }

.about-info ul {
     list-style: none;
     padding: 0;
     margin: 0;

 }

.about-info li {
     display: inline-block;
     align-items: center;


 }

.about-info li a {
     color: grey;
     text-decoration: none;
     font-weight: thinner;
     font-size: 30px;
 }

.about-info i {
     margin-right: 15px;
     color: var(--primary-color);
     font-size: 30px;
 }

 /* Mobile (phones) - max-width: 767.98px */
 @media (max-width: 767.98px) {
     .about-title h2 {
         font-size: 36px;
     }

     .about-title h2 span {
         font-size: 28px;
     }

     .about-content {
         font-size: 14px;
         line-height: 1.6;
     }

     .about-info ul {
         padding: 0;
         margin: 0;
         text-align: center;
     }

     .about-info li a,
     .about-info i {
         font-size: 24px;
         margin-top: 0;
     }

     .about-img {
         padding-right: 0;
         margin-bottom: 30px;
         margin-left: 1px;
     }

     .about-container {
         flex-direction: column;
     }
 }

 /* Tablet (768px–991.98px) */
 @media (min-width: 768px) and (max-width: 991.98px) {
     .about-container {
         flex-direction: column;
     }

     .about-img {
         padding-right: 0;
         margin-bottom: 30px;
     }
 }

 /* Desktop (≥992px) — optional if you want to override styles */
 @media (min-width: 992px) {
     /* Add desktop-specific overrides here if needed */
 }


.contact-btn {
    border: 1px solid white;
    text-decoration: none;
    padding: 5px 15px !important;
}


.clear {
    justify-content: center;
}


.cta-card {
    display: flex;
    height: 150px;
    background-color: var(--light-gray);
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none; /* Remove underline */
    color: var(--primary-color); /* Inherit text color */
    border: 1px solid #ccc; /* Add border */
    transition: all 0.3s ease;
}

.cta-card h3 {
    font-size: 1.8rem;
    margin: 0;
    transition: all 0.3s ease;
}

.cta-card h3 span {
    display: block;
    font-size: 1.2rem;
    font-weight: 300;
}

.cta-card:hover {
    background-color: black;
    color: white;
}

.cta-card:hover h3 {
    color: var(--secondary-color);
}