.about-section {
max-width: 1600px;
margin: 0 auto;
padding: 40px 20px;
} .about-title {
font-size: 42px;
text-align: center;
font-weight: 700;
color: #0e171e;
margin-bottom: 20px;
}
.about-lead {
text-align: center;
margin: 0 auto 60px auto;
line-height: 1.7;
color: #4a5568;
} .about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 145px;
} .about-box {
background: #fff;
padding: 30px;
border-radius: 14px;
border: 1px solid #d4af37;
box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
background: linear-gradient(145deg, #ffffff 0%, #fcfcfc 55%, #f8f8f8 100%);
} .about-box-header {
display: flex;
align-items: center;
justify-content: left;
gap: 22px;
margin-bottom: 28px;
} .about-box-icon {
width: 130px;
height: 130px;
object-fit: contain;
flex-shrink: 0;
} .about-box-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.about-box ul {
list-style: none;
padding: 0;
margin-left: 60px;
}
.about-box ul li {
position: relative;
padding: 10px 0 10px 24px;
line-height: 1.6;
} .about-box ul li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #d4af37;
box-shadow: 0 0 8px rgba(212,175,55,0.35);
} .about-box-title h3 {
margin: 0;
color: #0e171e;
text-align: center;
font-size: 32px !important;
} .gold-divider-1 {
border: none;
height: 2px;
width: 80px;
background-color: #d4af37;
margin: 10px auto 0 0;
} .about-highlight {
background: linear-gradient(145deg,#0e171e,#1b1f25);
color: #fff;
text-align: center;
padding: 40px 20px;
border-radius: 16px;
margin-bottom: 50px;
border: 1px solid gold;
position: relative;
overflow: visible; 
padding-top: 120px; 
}
.about-image {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
border-radius: 50%;
overflow: hidden;
z-index: 10;
border: 3px solid gold; 
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
} .about-features {
display: flex;
gap: 20px;
text-align: center;
justify-content: center;
margin-bottom: 50px;
}
.feature {
flex: 1;
padding: 10px;
border: 1px solid #d4af37;
box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
background:#0e171e;
color: white;
}
.feature h3 {
color: #d4af37;
}
.gold-divider {
border: none;
height: 1px;
width: 130px;
background-color: #d4af37;
margin: -5px auto 10px auto;
}
.feature-icon-about img {
width: 130px;
height: 130px;
object-fit: contain;
margin-bottom: 20px;
} .about-footer {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.about-footer::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23d4af37' d='M19.8 9.3C10.5 11.8 4.6 17 2.1 24.8c2.3-3.6 5.6-5.4 9.9-5.4 3.3 0 6 1.1 8.3 3.3 2.2 2.2 3.4 5 3.4 8.3 0 3.2-1.1 5.8-3.3 8-2.2 2.2-5.1 3.2-8.7 3.2-3.7 0-6.5-1.2-8.6-3.5C1 36.3 0 33.1 0 29 0 18.3 6.5 11.2 19.6 7.9l.2 1.4zm26.4 0C36.9 11.9 31 17 28.5 24.8c2.2-3.6 5.5-5.4 9.8-5.4 3.2 0 6 1.1 8.3 3.2 2.3 2.2 3.4 4.9 3.4 8.3 0 3.1-1.1 5.8-3.3 7.9-2.2 2.2-5.1 3.3-8.6 3.3-3.7 0-6.6-1.1-8.6-3.4-2.1-3.4-3.1-5.5-3.1-9.7 0-10.7 6.6-17.8 19.7-21.1l.1 1.4z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 140px;
opacity: 0.12;
z-index: 0;
pointer-events: none;
} @media (max-width: 768px) {
.about-section {
padding: 30px 15px;
}
.about-title {
font-size: 28px;
}
.about-lead {
padding: 0 10px;
}
.about-grid {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 80px;
}
.about-box {
text-align: center;
padding: 25px 18px;
}
.about-box-header {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 12px;
text-align: center;
margin-bottom: 0;
}
.about-box-icon {
width: 90px;
height: 90px;
}
.about-box-title {
align-items: center;
}
.about-box-title h3 {
font-size: 24px !important;
text-align: center;
}
.gold-divider-1 {
margin: 10px auto 0 auto;
}
.about-box ul {
margin-left: 0;
text-align: left;
display: inline-block;
}
.about-features {
flex-direction: column;
gap: 15px;
}
.feature {
width: 100%;
}
.about-image {
width: 120px;
height: 120px;
}
.about-highlight {
padding-top: 90px;
}
}