.about-minimal {
padding: 80px 0;
background: linear-gradient(135deg, #f7f7f7 0%, #f0f2f3 100%);
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: 50%;
background: rgba(93, 143, 159, 0.03);
top: -200px;
left: -200px;
z-index: 1;
}
&::after {
content: '';
position: absolute;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(93, 143, 159, 0.05);
bottom: -150px;
right: -150px;
z-index: 1;
}
.about-minimal-header {
text-align: center;
margin-bottom: 60px;
position: relative;
z-index: 2;
h2 {
font-size: var(--font-size-5xl);
font-weight: 700;
margin-bottom: 20px;
color: #333;
position: relative;
display: inline-block;
&::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background-color: #5d8f9f;
border-radius: 2px;
}
}
.about-minimal-tagline {
font-size: var(--font-size-xl);
color: #666;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
font-weight: 300;
}
}
.about-minimal-container {
max-width: 1100px;
margin: 0 auto;
position: relative;
z-index: 2;
padding: 0 var(--spacing-md);
}
.about-minimal-content {
display: flex;
align-items: center;
gap: 70px;
margin-bottom: 80px;
.about-minimal-image {
flex: 0 0 35%;
position: relative;
width: 100%;
aspect-ratio: 1/1;
&::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: rgba(93, 143, 159, 0.2);
top: 15px;
left: 15px;
z-index: -1;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 5px solid white;
transition: transform 0.5s ease, box-shadow 0.5s ease;
&:hover {
transform: scale(1.02);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
}
}
.about-minimal-text {
flex: 0 0 65%;
h3 {
font-size: var(--font-size-2xl);
margin-bottom: 25px;
color: #333;
position: relative;
padding-bottom: 15px;
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background-color: #5d8f9f;
border-radius: 2px;
}
}
.about-minimal-description {
font-size: var(--font-size-lg);
line-height: 1.9;
color: #555;
p {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
strong {
color: #333;
font-weight: 600;
}
a {
color: #5d8f9f;
text-decoration: none;
transition: color 0.3s;
font-weight: 500;
&:hover {
color: #457383;
text-decoration: underline;
}
}
}
}
}
@media (max-width: 1200px) {
.about-minimal-container {
max-width: 960px;
padding: 0 var(--spacing-lg);
}
.about-minimal-content {
gap: 50px;
}
}
@media (max-width: 992px) {
padding: 60px 0;
.about-minimal-header {
margin-bottom: 50px;
h2 {
font-size: var(--font-size-4xl);
}
.about-minimal-tagline {
font-size: var(--font-size-lg);
max-width: 600px;
}
}
.about-minimal-content {
gap: 40px;
margin-bottom: 60px;
.about-minimal-text {
h3 {
font-size: var(--font-size-2xl);
}
.about-minimal-description {
font-size: var(--font-size-md);
line-height: 1.7;
}
}
}
}
@media (max-width: 768px) {
padding: 50px 0;
.about-minimal-header {
margin-bottom: 40px;
h2 {
font-size: var(--font-size-3xl);
}
.about-minimal-tagline {
font-size: var(--font-size-md);
max-width: 500px;
}
}
.about-minimal-container {
padding: 0 var(--spacing-md);
}
.about-minimal-content {
flex-direction: column;
text-align: center;
gap: 30px;
margin-bottom: 50px;
.about-minimal-image {
flex: none;
width: 250px;
margin: 0 auto;
&::before {
top: 10px;
left: 10px;
}
}
.about-minimal-text {
flex: none;
width: 100%;
h3 {
font-size: var(--font-size-xl);
margin-bottom: 20px;
&::after {
left: 50%;
transform: translateX(-50%);
}
}
.about-minimal-description {
font-size: var(--font-size-sm);
line-height: 1.6;
}
}
}
}
@media (max-width: 576px) {
padding: 40px 0;
.about-minimal-header {
margin-bottom: 30px;
h2 {
font-size: var(--font-size-2xl);
}
.about-minimal-tagline {
font-size: var(--font-size-sm);
max-width: 100%;
}
}
.about-minimal-container {
padding: 0 var(--spacing-sm);
}
.about-minimal-content {
gap: 25px;
margin-bottom: 40px;
.about-minimal-image {
width: 200px;
&::before {
top: 8px;
left: 8px;
}
}
.about-minimal-text {
h3 {
font-size: var(--font-size-lg);
margin-bottom: 15px;
}
.about-minimal-description {
font-size: var(--font-size-xs);
}
}
}
}
@media (max-width: 480px) {
padding: 30px 0;
.about-minimal-header h2 {
font-size: var(--font-size-xl);
}
.about-minimal-content .about-minimal-image {
width: 180px;
}
&::before,
&::after {
display: none;
}
}
}