.about-us-section {
background-color: var(--color-light-gray);
padding: 80px 0;
}
.about-us-top-content-wrap {
max-width: 1080px;
margin: 0 auto;
} .about-sec-top-content {
text-align: center;
margin-bottom: 60px;
} .content-grid {
display: flex;
flex-wrap: wrap;
gap: 40px;
margin-bottom: 60px;
}
.content-card-item {
flex: 1 1 calc(50% - 20px);
min-width: 300px;
}
.content-card {
background-color: var(--color-white);
padding: 40px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
text-align: left;
}
.content-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
} .card-icon {
width: 70px;
height: 70px;
background-color: var(--color-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
}
.card-icon svg {
width: 35px;
}
.card-icon svg path {
stroke: var(--color-white);
} .card-heading {
margin-bottom: 20px;
} .card-content p {
margin-bottom: 15px;
}
.card-content p:last-child {
margin-bottom: 0;
} .about-sec-bottom-content {
background-color: var(--color-white);
padding: 40px;
border-radius: 8px;
text-align: center;
margin-bottom: 40px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
.about-sec-bottom-content p {
margin-bottom: 15px;
}
.about-sec-bottom-content p:last-child {
margin-bottom: 0;
}
.about-sec-bottom-content a {
color: var(--color-secondary);;
text-decoration: none;
font-weight: 600;
border-bottom: 2px solid transparent;
transition: border-color 0.3s ease;
}
.about-sec-bottom-content a:hover {
border-bottom-color: var(--color-secondary);;
} .about-sec-btn-wrap {
text-align: center;
} @media (max-width: 1024px) {
.about-us-section {
padding: 60px 0px;
}
}
@media (max-width: 768px) {
.about-us-section {
padding: 50px 0px;
}
.about-sec-top-content {
margin-bottom: 40px;
} .content-grid {
gap: 30px;
margin-bottom: 40px;
}
.content-card-item {
flex: 1 1 100%;
}
.content-card {
padding: 30px;
}
.about-sec-bottom-content {
padding: 30px 20px;
}
}
@media (max-width: 480px) {
.content-card {
padding: 25px;
}
.card-icon {
width: 60px;
height: 60px;
}
.card-icon svg {
width: 30px;
height: 30px;
}
}