body{
    --main-title-color:#1a237e;
    --main-hero-dark:#070a23;
    --main-soft-color:#3949ab;
    --main-softer-color:#5c6bc0;
    --main-softest-color: #f3f7fa;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.delimiter{max-width:1200px;margin:0 auto;position:relative;z-index:1}

section{padding:80px clamp(20px, 8vw,80px)}
.section-h2{font-size:36px;color:var(--main-title-color);margin-bottom:20px;font-weight:600}
.section-p{font-size:18px;color:#666;max-width:700px;margin:0 auto 60px}

.hero{background:linear-gradient(135deg, var(--main-title-color) 0%, var(--main-hero-dark) 100%);color:white;position:relative;overflow:hidden;text-align:left}
.hero::before{content:'';position:absolute;top:0;right:-30%;width:100%;height:100%;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="0.5"/></svg>') repeat;background-size:130px 130px;transform: rotate(-15deg)}
h1{font-size:48px;font-weight:600;margin-bottom:20px}
.hero h2{font-size: 24px;margin-bottom:30px;opacity:0.95}
.hero p{font-size:18px;line-height: 1.8;max-width: 800px;opacity:0.9}

.services{background-color: #f8f9fa}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:30px}
.service-box{background:white;padding:40px 30px;border-radius:8px;box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);transition:all 0.3s ease;text-align:center}
.service-box:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.service-box img{display:block;width:50px;height:50px;padding:10px;background:linear-gradient(135deg, var(--main-soft-color) 0%, var(--main-softer-color) 100%);border-radius:20%;margin:0 auto 20px}
.service-box h3{font-size:20px;color:var(--main-title-color);margin-bottom:15px;font-weight:600}
.service-p{font-size:16px;color:#666;line-height:1.6}

.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:50px;text-align:left;justify-items: end;}
.adv-grid h3{font-size:28px;color:var(--main-title-color);margin-bottom:30px}
.adv-item{display:flex;align-items:start;margin-bottom:25px}
.adv-number{background:var(--main-soft-color);color:white;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:20px;flex-shrink:0;font-weight:bold}
.adv-texty h4{font-size:18px;color:#333;margin-bottom:8px}
.adv-texty p{font-size:16px;color:#666;line-height:1.6}
.adv-img{background:linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);height:500px;width:min(100%,500px);border-radius:8px;position:relative;overflow:hidden}
.adv-img img{height:100%;width:100%;object-fit: cover}

.office{background:var(--main-softest-color)}
.office-content{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;text-align:left}
.office-details h3{font-size:32px;color:var(--main-title-color);margin-bottom:30px;font-weight:600}
.office-item{display:flex;align-items:flex-start;margin-bottom:25px;padding:20px;background:white;border-radius:8px;box-shadow:0 2px 8px rgba(0, 0, 0, 0.06);transition:all 0.3s ease}
.office-icon{width:50px;height:50px;background:linear-gradient(135deg, var(--main-soft-color) 0%, var(--main-softer-color) 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-right:20px;flex-shrink:0;font-size:24px;color:white}
.office-text h4{font-size:18px;color:#333;margin-bottom:5px;font-weight:600}
.office-text p,.office-text a{font-size:16px;color:#666;line-height:1.6}
.office-map{background:#e8eef5;height:400px;border-radius:8px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.office-map img,.office-map iframe{width:100%;height:100%;object-fit:cover}

.article{background-color:#f8f9fa}
.article-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(350px, 1fr));gap:30px;margin-top:50px;text-align: left}
.article-box{background:white;border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);transition:all 0.3s ease}
.article-box:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.article-header{padding:30px;border-bottom:1px solid #eee}
.article-category{color:var(--main-soft-color);font-size:14px;font-weight:500;margin-bottom:10px}
.article-title{font-size:20px;color:#333;margin-bottom:10px;line-height:1.4;-webkit-line-clamp:1;line-clamp:1;
   -webkit-box-orient:vertical;
   display:-webkit-box;overflow:hidden}
.article-description{font-size:16px;color:#666;line-height:1.6;-webkit-line-clamp:2;line-clamp:2;
   -webkit-box-orient: vertical;
   display: -webkit-box;overflow:hidden}
.article-footer{padding:20px 30px;background:#fafafa;text-align:center}
.article-footer p{font-size:14px;color:#999}
.article-more{text-align:center;margin-top:40px}
.article-more a{display:inline-block;background:var(--main-soft-color);color:white;padding:15px 40px;border-radius:5px;font-weight:600;transition:all 0.3s}
.article-more a:hover{background:var(--main-title-color);transform:translateY(-2px);box-shadow:0 5px 15px rgba(0, 0, 0, 0.2)}

.contact{background-color:var(--main-title-color);color: white;padding: 80px 0;text-align: center}
.contact h2{font-size:42px;margin-bottom:20px}
.contact p{font-size:20px;margin-bottom: 30px;opacity: 0.9}
.contact a{display:inline-block;background:white;color:var(--main-title-color);padding:15px 40px;border-radius:5px;font-weight:600;transition:all 0.3s}
.contact a:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0, 0, 0, 0.2)}

@media(max-width:800px){
.adv-grid{grid-template-columns: 1fr;justify-items:center;gap:40px}
.adv-img{height:auto;width:min(400px,100%);aspect-ratio:1}
.office-content{grid-template-columns:1fr;gap:40px;}
}

@media(max-width:450px){
    .article-grid{grid-template-columns: 100%}
    .article-description{-webkit-line-clamp:4;line-clamp:4}
}
footer{margin:0}