Spaces:
Running
Running
| /* body { | |
| margin: 0; | |
| font-family: 'Segoe UI', Arial, sans-serif; | |
| background: #d3d1d1; | |
| color: #000000; | |
| overflow-x: hidden; | |
| } | |
| header { | |
| background: #212b31; | |
| color: #ffffff; | |
| padding: 10px 0; | |
| text-align: center; | |
| } | |
| h1 { | |
| margin: 0; | |
| } | |
| nav { | |
| margin: 20px 0; | |
| } | |
| nav a { | |
| color: #ffffff; | |
| text-decoration: none; | |
| padding: 10px 15px; | |
| } | |
| nav a:hover { | |
| background: #da775c; | |
| } | |
| .container { | |
| width: 100%; | |
| margin: auto; | |
| overflow: hidden; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 20px 0; | |
| background: #35424a; | |
| color: #000; | |
| position: relative; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| .cms-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 24px 60px 0 60px; | |
| background: #fff; | |
| border-bottom: 1px solid #ececec; | |
| } | |
| .cms-header-title { | |
| font-size: 2rem; | |
| font-weight: 500; | |
| color: #000; | |
| } | |
| .cms-nav { | |
| display: flex; | |
| gap: 32px; | |
| font-size: 1.1rem; | |
| } | |
| .cms-nav a { | |
| color: #222; | |
| text-decoration: none; | |
| padding-bottom: 4px; | |
| border-bottom: 2px solid transparent; | |
| transition: border-color 0.2s; | |
| } | |
| .cms-nav a.active, | |
| .cms-nav a:hover { | |
| border-bottom: 2px solid #222; | |
| } | |
| .cms-user-icon { | |
| font-size: 1.5rem; | |
| margin-left: 24px; | |
| } | |
| .cms-hero { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| min-height: 400px; | |
| background: #d3d1d1; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| box-sizing: border-box; | |
| } | |
| .cms-hero-content { | |
| flex: 1; | |
| max-width: 600px; | |
| } | |
| .cms-hero-content h1 { | |
| font-size: 3.2rem; | |
| font-weight: 700; | |
| margin-bottom: 24px; | |
| } | |
| .cms-hero-content p { | |
| font-size: 1.3rem; | |
| margin-bottom: 32px; | |
| color: #333; | |
| } | |
| .cms-hero-buttons { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| .cms-hero-buttons .primary { | |
| background: #222c37; | |
| color: #fff; | |
| border: none; | |
| padding: 16px 32px; | |
| font-size: 1.1rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .cms-hero-buttons .secondary { | |
| background: #fff; | |
| color: #222; | |
| border: 1px solid #d1d5db; | |
| padding: 16px 32px; | |
| font-size: 1.1rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .cms-hero-image { | |
| flex: 1; | |
| padding-left: 110px; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .cms-image-placeholder { | |
| background: #545e6a; | |
| color: #fff; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| border-radius: 16px; | |
| width: 750px; | |
| height: 400px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| .cms-news { | |
| padding: 60px; | |
| background: #e9e9eb; | |
| } | |
| .cms-news h2 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin-bottom: 24px; | |
| } | |
| .cms-news-cards { | |
| display: flex; | |
| gap: 32px; | |
| margin-top: 32px; | |
| margin-bottom: 32px; | |
| } | |
| .cms-news-card { | |
| background: #fff; | |
| border-radius: 16px; | |
| box-shadow: 0 2px 8px rgba(60,72,88,0.04); | |
| overflow: hidden; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid #ececec; | |
| min-width: 320px; | |
| max-width: 460px; | |
| } | |
| .cms-news-card-image { | |
| background: #545e6a; | |
| color: #fff; | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| height: 160px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| .cms-news-card-content { | |
| padding: 24px; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .cms-news-date { | |
| color: #666; | |
| font-size: 1rem; | |
| margin-bottom: 8px; | |
| } | |
| .cms-news-card-content h3 { | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| margin: 0 0 12px 0; | |
| } | |
| .cms-news-card-content p { | |
| color: #222; | |
| font-size: 1.05rem; | |
| margin-bottom: 18px; | |
| } | |
| .cms-news-readmore { | |
| color: #222; | |
| font-weight: 500; | |
| text-decoration: none; | |
| font-size: 1.05rem; | |
| display: inline-block; | |
| margin-top: auto; | |
| transition: color 0.2s; | |
| } | |
| .cms-news-readmore:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| .cms-news-viewall { | |
| text-align: center; | |
| margin-top: 24px; | |
| font-size: 1.1rem; | |
| } | |
| .cms-news-viewall a { | |
| color: #222; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .cms-news-viewall a:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| .cms-services { | |
| padding: 60px; | |
| background: #e9e9eb; | |
| } | |
| .cms-services h2 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin-bottom: 18px; | |
| } | |
| .cms-services-desc { | |
| font-size: 1.2rem; | |
| color: #2d3748; | |
| margin-bottom: 36px; | |
| max-width: 600px; | |
| } | |
| .cms-services-cards { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 32px; | |
| } | |
| .cms-services-card { | |
| background: #fff; | |
| border-radius: 16px; | |
| box-shadow: 0 2px 8px rgba(60,72,88,0.04); | |
| padding: 32px 28px 28px 28px; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 120px; | |
| max-width: 420px; | |
| } | |
| .cms-services-icon { | |
| background: #222c37; | |
| color: #fff; | |
| font-size: 2rem; | |
| border-radius: 50%; | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 24px; | |
| } | |
| .cms-services-card h3 { | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| margin: 0 0 12px 0; | |
| } | |
| .cms-services-card p { | |
| color: #222; | |
| font-size: 1.05rem; | |
| margin-bottom: 18px; | |
| } | |
| .cms-services-learn { | |
| color: #222; | |
| font-weight: 500; | |
| text-decoration: none; | |
| font-size: 1.05rem; | |
| display: inline-block; | |
| margin-top: auto; | |
| transition: color 0.2s; | |
| } | |
| .cms-services-learn:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| .cms-about { | |
| display: flex; | |
| gap: 48px; | |
| padding: 60px; | |
| background: #d3d1d1; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| box-sizing: border-box; | |
| } | |
| .cms-about-left { | |
| flex: 1; | |
| min-width: 340px; | |
| } | |
| .cms-about-left h2 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin-bottom: 18px; | |
| } | |
| .cms-about-left p { | |
| font-size: 1.15rem; | |
| color: #222; | |
| margin-bottom: 18px; | |
| max-width: 650px; | |
| } | |
| .cms-about-stats { | |
| display: flex; | |
| gap: 48px; | |
| margin-top: 32px; | |
| } | |
| .cms-about-stat { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .cms-about-stat-icon { | |
| background: #222c37; | |
| color: #fff; | |
| font-size: 2rem; | |
| border-radius: 50%; | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .cms-about-stat-number { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| } | |
| .cms-about-stat-label { | |
| font-size: 1.05rem; | |
| color: #222; | |
| } | |
| .cms-about-right { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| grid-template-rows: 1fr 1fr; | |
| gap: 32px; | |
| min-width: 340px; | |
| } | |
| .cms-about-feature { | |
| background: #545e6a; | |
| color: #fff; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| border-radius: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 160px; | |
| text-align: center; | |
| } | |
| /* CTA Section */ | |
| /* .cms-cta { | |
| background: #222c37; | |
| border-radius: 16px; | |
| margin: 32px auto 0 auto; | |
| padding: 48px 32px; | |
| max-width: 1400px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .cms-cta-content { | |
| text-align: center; | |
| color: #fff; | |
| width: 100%; | |
| } | |
| .cms-cta-content h2 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin-bottom: 18px; | |
| } | |
| .cms-cta-content p { | |
| font-size: 1.25rem; | |
| margin-bottom: 32px; | |
| } | |
| .cms-cta-buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 24px; | |
| margin-top: 12px; | |
| } | |
| .cms-cta-btn { | |
| padding: 14px 32px; | |
| font-size: 1.1rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| border: 1px solid #fff; | |
| background: #fff; | |
| color: #222c37; | |
| transition: background 0.2s, color 0.2s; | |
| } | |
| .cms-cta-btn.primary { | |
| background: #222c37; | |
| color: #fff; | |
| border: 1px solid #fff; | |
| } | |
| .cms-cta-btn.primary:hover { | |
| background: #fff; | |
| color: #222c37; | |
| } | |
| .cms-cta-btn.secondary { | |
| background: #fff; | |
| color: #222c37; | |
| border: 1px solid #fff; | |
| } | |
| .cms-cta-btn.secondary:hover { | |
| background: #222c37; | |
| color: #fff; | |
| } | |
| /* Footer Section */ | |
| /* .cms-footer { | |
| background: #f7f8fa; | |
| padding: 0 32px; | |
| margin-top: 32px; | |
| } | |
| .cms-footer-main { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 48px; | |
| padding: 48px 0 24px 0; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .cms-footer-col { | |
| text-align: left; | |
| } | |
| .cms-footer-col h3, | |
| .cms-footer-col h4 { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 14px; | |
| } | |
| .cms-footer-col p { | |
| font-size: 1.05rem; | |
| color: #222; | |
| margin-bottom: 18px; | |
| } | |
| .cms-footer-col ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .cms-footer-col ul li { | |
| font-size: 1.05rem; | |
| color: #222; | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .cms-footer-col ul li a { | |
| color: #222; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .cms-footer-col ul li a:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| .cms-footer-social { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: 8px; | |
| } | |
| .cms-footer-social a { | |
| color: #222; | |
| font-size: 1.3rem; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .cms-footer-social a:hover { | |
| color: #545e6a; | |
| } | |
| .cms-footer-bottom { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid #ececec; | |
| padding: 18px 0; | |
| font-size: 1rem; | |
| color: #222; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .cms-footer-links { | |
| display: flex; | |
| gap: 24px; | |
| } | |
| .cms-footer-links a { | |
| color: #222; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .cms-footer-links a:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } */ | |
| */ | |
| Responsive | |
| /* @media (max-width: 1100px) { | |
| .cms-services-cards { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .cms-about { | |
| flex-direction: column; | |
| gap: 32px; | |
| padding: 32px; | |
| } | |
| .cms-about-right { | |
| min-width: 0; | |
| } | |
| .cms-footer-main { | |
| grid-template-columns: 1fr 1fr; | |
| gap: 32px; | |
| } | |
| } | |
| @media (max-width: 700px) { | |
| .cms-services-cards { | |
| grid-template-columns: 1fr; | |
| } | |
| .cms-services { | |
| padding: 24px; | |
| } | |
| .cms-about { | |
| flex-direction: column; | |
| gap: 24px; | |
| padding: 18px; | |
| } | |
| .cms-about-stats { | |
| flex-direction: column; | |
| gap: 18px; | |
| } | |
| .cms-about-right { | |
| grid-template-columns: 1fr; | |
| grid-template-rows: repeat(4, 1fr); | |
| gap: 18px; | |
| } | |
| .cms-cta { | |
| margin: 12px 0 0 0; | |
| padding: 24px 0; | |
| } | |
| .cms-footer-main { | |
| grid-template-columns: 1fr; | |
| gap: 18px; | |
| padding: 24px 0 12px 0; | |
| } | |
| .cms-footer-bottom { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 8px; | |
| } */ | |
| } */ | |
| /* Global Reset */ | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-family: 'Segoe UI', Arial, sans-serif; | |
| background: #d3d1d1; | |
| color: #000; | |
| overflow-x: hidden; | |
| } | |
| /* Header */ | |
| header { | |
| background: #212b31; | |
| color: #fff; | |
| padding: 10px 0; | |
| text-align: center; | |
| } | |
| h1 { | |
| margin: 0; | |
| } | |
| /* Navigation */ | |
| nav { | |
| margin: 20px 0; | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| gap: 10px; | |
| } | |
| nav a { | |
| color: #fff; | |
| text-decoration: none; | |
| padding: 10px 15px; | |
| } | |
| nav a:hover { | |
| background: #da775c; | |
| } | |
| /* Container */ | |
| .container { | |
| width: 100%; | |
| margin: auto; | |
| overflow: hidden; | |
| } | |
| /* Footer */ | |
| footer { | |
| text-align: center; | |
| padding: 20px 0; | |
| background: #35424a; | |
| color: #000; | |
| position: relative; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| /* CMS Header */ | |
| .cms-header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 24px 20px; | |
| background: #fff; | |
| border-bottom: 1px solid #ececec; | |
| } | |
| .cms-header-title { | |
| font-size: 2rem; | |
| font-weight: 500; | |
| color: #000; | |
| } | |
| .cms-nav { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| font-size: 1.1rem; | |
| } | |
| .cms-nav a { | |
| color: #222; | |
| text-decoration: none; | |
| padding-bottom: 4px; | |
| border-bottom: 2px solid transparent; | |
| transition: border-color 0.2s; | |
| } | |
| .cms-nav a.active, | |
| .cms-nav a:hover { | |
| border-bottom: 2px solid #222; | |
| } | |
| .cms-user-icon { | |
| font-size: 1.5rem; | |
| margin-left: 24px; | |
| } | |
| /* Hero Section */ | |
| .cms-hero { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| min-height: 400px; | |
| background: #d3d1d1; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| .cms-hero-content { | |
| flex: 1 1 300px; | |
| max-width: 600px; | |
| } | |
| .cms-hero-content h1 { | |
| font-size: 3.2rem; | |
| font-weight: 700; | |
| margin-bottom: 24px; | |
| } | |
| .cms-hero-content p { | |
| font-size: 1.3rem; | |
| margin-bottom: 32px; | |
| color: #333; | |
| } | |
| .cms-hero-buttons { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .cms-hero-buttons .primary { | |
| background: #222c37; | |
| color: #fff; | |
| border: none; | |
| padding: 16px 32px; | |
| font-size: 1.1rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .cms-hero-buttons .secondary { | |
| background: #fff; | |
| color: #222; | |
| border: 1px solid #d1d5db; | |
| padding: 16px 32px; | |
| font-size: 1.1rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .cms-hero-image { | |
| flex: 1; | |
| padding-left: 110px; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .cms-image-placeholder { | |
| background: #545e6a; | |
| color: #fff; | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| border-radius: 16px; | |
| width: 750px; | |
| height: 400px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| /* News Section */ | |
| .cms-news { | |
| padding: 60px; | |
| background: #e9e9eb; | |
| } | |
| .cms-news h2 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin-bottom: 24px; | |
| } | |
| .cms-news-cards { | |
| display: flex; | |
| gap: 32px; | |
| margin-top: 32px; | |
| margin-bottom: 32px; | |
| } | |
| .cms-news-card { | |
| background: #fff; | |
| border-radius: 16px; | |
| box-shadow: 0 2px 8px rgba(60,72,88,0.04); | |
| overflow: hidden; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| border: 1px solid #ececec; | |
| min-width: 320px; | |
| max-width: 460px; | |
| } | |
| .cms-news-card-image { | |
| background: #545e6a; | |
| color: #fff; | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| height: 160px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| } | |
| .cms-news-card-content { | |
| padding: 24px; | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .cms-news-date { | |
| color: #666; | |
| font-size: 1rem; | |
| margin-bottom: 8px; | |
| } | |
| .cms-news-card-content h3 { | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| margin: 0 0 12px 0; | |
| } | |
| .cms-news-card-content p { | |
| color: #222; | |
| font-size: 1.05rem; | |
| margin-bottom: 18px; | |
| } | |
| .cms-news-readmore { | |
| color: #222; | |
| font-weight: 500; | |
| text-decoration: none; | |
| font-size: 1.05rem; | |
| display: inline-block; | |
| margin-top: auto; | |
| transition: color 0.2s; | |
| } | |
| .cms-news-readmore:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| .cms-news-viewall { | |
| text-align: center; | |
| margin-top: 24px; | |
| font-size: 1.1rem; | |
| } | |
| .cms-news-viewall a { | |
| color: #222; | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: color 0.2s; | |
| } | |
| .cms-news-viewall a:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| /* Services Section */ | |
| .cms-services { | |
| padding: 60px; | |
| background: #e9e9eb; | |
| } | |
| .cms-services h2 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin-bottom: 18px; | |
| } | |
| .cms-services-desc { | |
| font-size: 1.2rem; | |
| color: #2d3748; | |
| margin-bottom: 36px; | |
| max-width: 600px; | |
| } | |
| .cms-services-cards { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 32px; | |
| } | |
| .cms-services-card { | |
| background: #fff; | |
| border-radius: 16px; | |
| box-shadow: 0 2px 8px rgba(60,72,88,0.04); | |
| padding: 32px 28px 28px 28px; | |
| display: flex; | |
| flex-direction: column; | |
| min-width: 120px; | |
| max-width: 420px; | |
| } | |
| .cms-services-icon { | |
| background: #222c37; | |
| color: #fff; | |
| font-size: 2rem; | |
| border-radius: 50%; | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 24px; | |
| } | |
| .cms-services-card h3 { | |
| font-size: 1.3rem; | |
| font-weight: 600; | |
| margin: 0 0 12px 0; | |
| } | |
| .cms-services-card p { | |
| color: #222; | |
| font-size: 1.05rem; | |
| margin-bottom: 18px; | |
| } | |
| .cms-services-learn { | |
| color: #222; | |
| font-weight: 500; | |
| text-decoration: none; | |
| font-size: 1.05rem; | |
| display: inline-block; | |
| margin-top: auto; | |
| transition: color 0.2s; | |
| } | |
| .cms-services-learn:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| /* About Section */ | |
| .cms-about { | |
| display: flex; | |
| gap: 48px; | |
| padding: 60px; | |
| background: #d3d1d1; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| box-sizing: border-box; | |
| } | |
| .cms-about-left { | |
| flex: 1; | |
| min-width: 340px; | |
| } | |
| .cms-about-left h2 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin-bottom: 18px; | |
| } | |
| .cms-about-left p { | |
| font-size: 1.15rem; | |
| color: #222; | |
| margin-bottom: 18px; | |
| max-width: 650px; | |
| } | |
| .cms-about-stats { | |
| display: flex; | |
| gap: 48px; | |
| margin-top: 32px; | |
| } | |
| .cms-about-stat { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .cms-about-stat-icon { | |
| background: #222c37; | |
| color: #fff; | |
| font-size: 2rem; | |
| border-radius: 50%; | |
| width: 48px; | |
| height: 48px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .cms-about-stat-number { | |
| font-size: 1.2rem; | |
| font-weight: 700; | |
| } | |
| .cms-about-stat-label { | |
| font-size: 1.05rem; | |
| color: #222; | |
| } | |
| .cms-about-right { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| grid-template-rows: 1fr 1fr; | |
| gap: 32px; | |
| min-width: 340px; | |
| } | |
| .cms-about-feature { | |
| background: #545e6a; | |
| color: #fff; | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| border-radius: 14px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 160px; | |
| text-align: center; | |
| } | |
| /* CTA Section */ | |
| .cms-cta { | |
| background: #222c37; | |
| border-radius: 16px; | |
| margin: 32px auto 0 auto; | |
| padding: 48px 32px; | |
| max-width: 1400px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .cms-cta-content { | |
| text-align: center; | |
| color: #fff; | |
| width: 100%; | |
| } | |
| .cms-cta-content h2 { | |
| font-size: 2.2rem; | |
| font-weight: 600; | |
| margin-bottom: 18px; | |
| } | |
| .cms-cta-content p { | |
| font-size: 1.25rem; | |
| margin-bottom: 32px; | |
| } | |
| .cms-cta-buttons { | |
| display: flex; | |
| justify-content: center; | |
| gap: 24px; | |
| margin-top: 12px; | |
| } | |
| .cms-cta-btn { | |
| padding: 14px 32px; | |
| font-size: 1.1rem; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| border: 1px solid #fff; | |
| background: #fff; | |
| color: #222c37; | |
| transition: background 0.2s, color 0.2s; | |
| } | |
| .cms-cta-btn.primary { | |
| background: #222c37; | |
| color: #fff; | |
| border: 1px solid #fff; | |
| } | |
| .cms-cta-btn.primary:hover { | |
| background: #fff; | |
| color: #222c37; | |
| } | |
| .cms-cta-btn.secondary { | |
| background: #fff; | |
| color: #222c37; | |
| border: 1px solid #fff; | |
| } | |
| .cms-cta-btn.secondary:hover { | |
| background: #222c37; | |
| color: #fff; | |
| } | |
| /* Footer Section */ | |
| .cms-footer { | |
| background: #f7f8fa; | |
| padding: 0 32px; | |
| margin-top: 32px; | |
| } | |
| .cms-footer-main { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 48px; | |
| padding: 48px 0 24px 0; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .cms-footer-col { | |
| text-align: left; | |
| } | |
| .cms-footer-col h3, | |
| .cms-footer-col h4 { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 14px; | |
| } | |
| .cms-footer-col p { | |
| font-size: 1.05rem; | |
| color: #222; | |
| margin-bottom: 18px; | |
| } | |
| .cms-footer-col ul { | |
| list-style: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .cms-footer-col ul li { | |
| font-size: 1.05rem; | |
| color: #222; | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .cms-footer-col ul li a { | |
| color: #222; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .cms-footer-col ul li a:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| .cms-footer-social { | |
| display: flex; | |
| gap: 16px; | |
| margin-top: 8px; | |
| } | |
| .cms-footer-social a { | |
| color: #222; | |
| font-size: 1.3rem; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .cms-footer-social a:hover { | |
| color: #545e6a; | |
| } | |
| .cms-footer-bottom { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top: 1px solid #ececec; | |
| padding: 18px 0; | |
| font-size: 1rem; | |
| color: #222; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| .cms-footer-links { | |
| display: flex; | |
| gap: 24px; | |
| } | |
| .cms-footer-links a { | |
| color: #222; | |
| text-decoration: none; | |
| transition: color 0.2s; | |
| } | |
| .cms-footer-links a:hover { | |
| color: #545e6a; | |
| text-decoration: underline; | |
| } | |
| @media (max-width: 1100px) { | |
| .cms-services-cards { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| .cms-about { | |
| flex-direction: column; | |
| gap: 32px; | |
| padding: 32px; | |
| } | |
| .cms-about-right { | |
| min-width: 0; | |
| } | |
| .cms-footer-main { | |
| grid-template-columns: 1fr 1fr; | |
| gap: 32px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .cms-header, | |
| .cms-hero, | |
| .cms-about, | |
| .cms-footer-bottom { | |
| flex-direction: column; | |
| text-align: center; | |
| gap: 16px; | |
| } | |
| .cms-hero-content h1 { | |
| font-size: 2.2rem; | |
| } | |
| .cms-hero-content p { | |
| font-size: 1.1rem; | |
| } | |
| .cms-hero-buttons { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .cms-hero-image { | |
| padding-left: 0; | |
| margin-top: 20px; | |
| } | |
| .cms-image-placeholder { | |
| width: 100%; | |
| height: auto; | |
| font-size: 1.2rem; | |
| padding: 40px 20px; | |
| } | |
| .cms-news, | |
| .cms-services { | |
| padding: 20px; | |
| } | |
| .cms-news-cards { | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .cms-services-cards { | |
| grid-template-columns: 1fr; | |
| gap: 20px; | |
| } | |
| .cms-about-stats { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .cms-about-right { | |
| grid-template-columns: 1fr; | |
| gap: 16px; | |
| } | |
| .cms-cta { | |
| padding: 32px 20px; | |
| } | |
| .cms-cta-buttons { | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .cms-footer-main { | |
| grid-template-columns: 1fr; | |
| gap: 18px; | |
| padding: 24px 0 12px 0; | |
| } | |
| .cms-footer-links { | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| } | |