:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:currentColor}.icon__image{width:100%;height:100%;object-fit:contain}.icon--xs{width:1rem;height:1rem;font-size:1rem}.icon--sm{width:1.25rem;height:1.25rem;font-size:1.25rem}.icon--md{width:1.5rem;height:1.5rem;font-size:1.5rem}.icon--lg{width:2rem;height:2rem;font-size:2rem}.icon--xl{width:2.5rem;height:2.5rem;font-size:2.5rem}.icon--2xl{width:3rem;height:3rem;font-size:3rem}.icon--loading{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.icon:hover{filter:brightness(.8);transition:filter .2s ease-in-out}.icon:disabled,.icon[disabled]{opacity:.5;cursor:not-allowed}:root{--z-header: 100;--z-dropdown: 1000}.header{background-color:var(--color-white);border-bottom:1px solid var(--color-gray-200);position:sticky;top:0;z-index:var(--z-header);box-shadow:var(--shadow-sm)}.header__top-bar{background-color:#0f054c;color:#fff;padding:var(--spacing-md);font-size:var(--font-size-sm)}.header__top-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl);width:100%;padding:0 var(--spacing-md);box-sizing:border-box}.header__contact-info{display:flex;gap:var(--spacing-lg)}.header__contact-item{display:flex;align-items:center;gap:var(--spacing-sm);color:#e0e0e0;text-decoration:none;font-size:var(--font-size-sm)}.header__social{display:flex;gap:var(--spacing-md)}.header__social-link{color:#fff;text-decoration:none;font-size:var(--font-size-base);transition:color var(--transition-fast);display:flex;align-items:center;justify-content:center;width:24px;height:24px}.header__social-link:hover{color:var(--color-primary)}.header__main{background-color:var(--color-white);padding:var(--spacing-md) 0;position:relative;z-index:1}.header__container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-lg);width:100%;padding:0 var(--spacing-md);box-sizing:border-box}.header__brand{display:flex;align-items:center;flex-shrink:0}.header__logo{display:block;text-decoration:none}.header__logo-image{height:60px;width:auto;object-fit:contain}.header__nav--desktop{display:none;gap:var(--spacing-md);flex:1}@media(min-width:768px){.header__nav--desktop{display:flex;align-items:center}}.header__nav-link{color:var(--color-gray-700);text-decoration:none;font-weight:600;font-size:var(--font-size-md);transition:color var(--transition-fast);padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--radius-md);white-space:nowrap;display:inline-flex;align-items:center;height:100%}.header__nav-link:hover{color:var(--color-primary);background-color:var(--color-gray-100)}.header__nav-item-dropdown{position:relative;display:inline-flex;align-items:center;height:100%}.header__dropdown-menu{position:absolute;top:100%;left:0;background-color:var(--color-white);border:1px solid var(--color-gray-200);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:200px;z-index:var(--z-dropdown);overflow:hidden;display:none;padding:var(--spacing-xs) 0}.header__nav-item-dropdown:hover .header__dropdown-menu,.header__dropdown-menu:hover{display:block}.header__dropdown-item{display:block;padding:var(--spacing-sm) var(--spacing-md);color:var(--color-gray-700);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;transition:background-color var(--transition-fast);white-space:nowrap;line-height:1.4;text-align:left}.header__dropdown-item:hover{background-color:var(--color-gray-50);color:var(--color-primary)}.header__right{display:flex;align-items:center;gap:var(--spacing-sm);margin-left:auto}.header__search,.header__info,.header__mobile-toggle{background:none;border:none;cursor:pointer;padding:var(--spacing-xs);font-size:var(--font-size-base);display:flex;align-items:center;justify-content:center;color:var(--color-gray-700)}.header__info,.header__mobile-toggle{border-radius:var(--radius-md)}.header__search:hover{transform:scale(1.1);transition:transform var(--transition-fast)}.header__info:hover{background-color:var(--color-gray-100)}.header__mobile-toggle{font-size:var(--font-size-lg)}@media(min-width:768px){.header__mobile-toggle{display:none}}.header__nav--mobile{display:flex;flex-direction:column;padding:var(--spacing-xs) var(--spacing-lg);border-top:1px solid var(--color-gray-200);background-color:var(--color-gray-50);gap:0}@media(min-width:768px){.header__nav--mobile{display:none}}@media(max-width:768px){.header__top-content{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs)}.header__contact-info{flex-direction:column;gap:var(--spacing-xs)}}html.dark .header{background-color:var(--color-gray-100);border-bottom-color:var(--color-gray-200)}html.dark .header__nav-link{color:var(--color-gray-300)}html.dark .header__nav-link:hover{background-color:var(--color-gray-200);color:var(--color-primary)}html.dark .header__dropdown-menu{background-color:var(--color-gray-100);border-color:var(--color-gray-200)}html.dark .header__dropdown-item{color:var(--color-gray-300)}html.dark .header__dropdown-item:hover{background-color:var(--color-gray-200)}html.dark .header__nav--mobile{background-color:var(--color-gray-100);border-top-color:var(--color-gray-200)}.footer{background-color:#0f054c;color:var(--color-gray-300);margin-top:auto;border-top:1px solid var(--color-gray-800)}.footer__container{max-width:1200px;margin:0 auto;padding:var(--spacing-2xl) var(--spacing-lg)}.footer__content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-2xl);margin-bottom:var(--spacing-2xl)}@media(max-width:768px){.footer__content{grid-template-columns:1fr;gap:var(--spacing-lg)}}.footer__section{display:flex;flex-direction:column;gap:var(--spacing-md)}.footer__section-title{font-size:var(--font-size-lg);font-weight:700;color:var(--color-white);margin:0}.footer__description{color:var(--color-gray-400);line-height:var(--line-height-relaxed);margin:0;font-size:var(--font-size-sm)}.footer__contact-info{display:flex;flex-direction:column;gap:var(--spacing-xs);margin-top:var(--spacing-md)}.footer__contact-item{margin:0;font-size:var(--font-size-sm)}.footer__links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--spacing-sm)}.footer__link{color:var(--color-gray-400);text-decoration:none;font-size:var(--font-size-sm);transition:color var(--transition-fast)}.footer__link:hover{color:var(--color-white)}.footer__newsletter-form{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-md);flex-wrap:wrap}.footer__newsletter-input{flex:1;min-width:200px;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-lg);border:1px solid var(--color-gray-700);background-color:var(--color-gray-800);color:var(--color-gray-300; font-size: var(--font-size-sm); transition: border-color var(--transition-fast); &:focus { outline: none; border-color: var(--color-primary); } &::placeholder { color: var(--color-gray-500); } } .footer__newsletter-button { padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-lg); background-color: var(--color-gray-800); color: var(--color-gray-300); border: none; cursor: pointer; font-size: var(--font-size-sm); transition: all var(--transition-fast); &:hover { background-color: var(--color-primary); color: white; transform: translateY(-2px); } } .footer__divider { border: none; border-top: 1px solid var(--color-gray-800); margin: 0 0 var(--spacing-xl) 0; } .footer__bottom { display: flex; flex-direction: column; gap: var(--spacing-sm); text-align: center; @media (min-width: 768px) { display: flex; flex-direction: row; justify-content: space-between; align-items: center; text-align: left; } } .footer__copyright { color: rgb(204, 200, 200); font-size: var(--font-size-sm); margin: 0; } .footer__credit { color: var(--color-gray-500); font-size: var(--font-size-xs); margin: 0; } html:not(.dark) .footer { background-color: var(--color-gray-50) !important; color: var(--color-gray-600) !important; border-top-color: var(--color-gray-200) !important; } html:not(.dark) .footer__section-title { color: var(--color-gray-900) !important; } html:not(.dark) .footer__description { color: var(--color-gray-600) !important; } html:not(.dark) .footer__contact-item a { color: var(--color-gray-600) !important; } html:not(.dark) .footer__link { color: var(--color-gray-600) !important; } html:not(.dark) .footer__link:hover { color: var(--color-gray-900) !important; } html:not(.dark) .footer__newsletter-input { background-color: var(--color-white) !important; color: var(--color-gray-900) !important; border-color: var(--color-gray-300) !important; } html:not(.dark) .footer__newsletter-input::placeholder { color: var(--color-gray-400) !important; } html:not(.dark) .footer__newsletter-button { background-color: var(--color-gray-200) !important; color: var(--color-gray-700) !important; } html:not(.dark) .footer__newsletter-button:hover { background-color: var(--color-primary) !important; color: white !important; } html:not(.dark) .footer__divider { border-top-color: var(--color-gray-200) !important; } html:not(.dark) .footer__copyright, html:not(.dark) .footer__credit { color: var(--color-gray-500) !important; } .main-layout { display: flex; flex-direction: column; min-height: 100vh; } .main-layout__content { flex: 1; padding: var(--spacing-2xl) var(--spacing-lg); max-width: 1200px; margin: 0 auto; width: 100%; } .main-layout__content--full-width { max-width: 100%; padding: var(--spacing-2xl); } @media (max-width: 768px) { .main-layout__content { padding: var(--spacing-lg) var(--spacing-md); } .main-layout__content--full-width { padding: var(--spacing-lg) var(--spacing-md); } } .error-boundary-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); } .error-boundary-content { background: white; border-radius: 1rem; padding: 3rem 2rem; max-width: 600px; width: 100%; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); text-align: center; } .error-boundary-icon { font-size: 4rem; margin-bottom: 1rem; display: block; } .error-boundary-title { font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0 0 1rem 0; } .error-boundary-message { font-size: 1rem; color: #6b7280; margin: 0 0 2rem 0; line-height: 1.6; } .error-boundary-details { background-color: #f3f4f6; border: 1px solid #d1d5db; border-radius: .5rem; padding: 1rem; margin: 1.5rem 0; text-align: left; cursor: pointer; } .error-boundary-details summary { font-weight: 600; color: #374151; margin-bottom: .5rem; user-select: none; } .error-boundary-details summary:hover { color: #111827; } .error-boundary-stack { background-color: #1f2937; color: #f3f4f6; padding: 1rem; border-radius: .375rem; font-size: .75rem; overflow-x: auto; margin: 0; font-family: "Courier New", monospace; line-height: 1.5; } .error-boundary-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .error-boundary-button { padding: .75rem 1.5rem; border-radius: .5rem; font-size: .875rem; font-weight: 600; cursor: pointer; transition: all .2s ease-in-out; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border: none; min-width: 120px; } .error-boundary-button--primary { background-color: #3b82f6; color: white; &:hover { background-color: #2563eb; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(59, 130, 246, .3); } &:active { transform: translateY(0); } } .error-boundary-button--secondary { background-color: #e5e7eb; color: #111827; &:hover { background-color: #d1d5db; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, .1); } &:active { transform: translateY(0); } } @media (max-width: 640px) { .error-boundary-container { padding: 1rem; } .error-boundary-content { padding: 2rem 1.5rem; } .error-boundary-icon { font-size: 3rem; } .error-boundary-title { font-size: 1.5rem; } .error-boundary-message { font-size: .875rem; } .error-boundary-actions { flex-direction: column; } .error-boundary-button { width: 100%; } } html.dark { .error-boundary-container { background: linear-gradient(135deg, #1f2937 0%, #111827 100%); } .error-boundary-content { background-color: #374151; } .error-boundary-title { color: #f3f4f6; } .error-boundary-message { color: #d1d5db; } .error-boundary-details { background-color: #4b5563; border-color: #6b7280; } .error-boundary-details summary { color: #e5e7eb; } .error-boundary-details summary:hover { color: #f3f4f6; } .error-boundary-button--primary { &:hover { box-shadow: 0 4px 12px rgba(59, 130, 246, .5); } } .error-boundary-button--secondary { background-color: #4b5563; color: #f3f4f6; &:hover { background-color: #6b7280; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); } } } .section-full { width: 100vw; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; padding: var(--spacing-2xl) 0; } .section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .home-hero-bg { position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); background-size: cover; background-position: center; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; } .home-hero-title { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); text-shadow: 0 2px 4px rgba(0,0,0,.2); color: white; } .home-hero-subtitle { font-size: var(--font-size-xl); margin-bottom: var(--spacing-xl); max-width: 800px; text-shadow: 0 1px 3px rgba(0, 0, 0, .87); color: white; } .home-hero-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.2); border: none; border-radius: 50%; width: 50px; height: 50px; color: white; cursor: pointer; font-size: var(--font-size-xl); display: flex; align-items: center; justify-content: center; transition: background .2s ease; } .home-hero-nav:hover { background: rgba(255,255,255,.3); } .home-hero-nav--prev { left: var(--spacing-lg); } .home-hero-nav--next { right: var(--spacing-lg); } .home-section__title { text-align: center; font-size: var(--font-size-3xl); margin-bottom: var(--spacing-lg); color: var(--color-gray-900); } .news-title { font-size: var(--font-size-2xl); text-transform: uppercase; letter-spacing: 2px; } .home-section__intro { text-align: center; max-width: 800px; margin: 0 auto var(--spacing-xl); color: var(--color-gray-600); font-size: var(--font-size-lg); } .domains-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); } .domain-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); text-align: center; height: 250px; width: 370px; padding: 3rem 3rem 3rem; text-align: left; } .domain-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; } .domain-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: var(--color-gray-900); } .domain-card p { color: var(--color-gray-600); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); line-height: 1.5; } .domain-card a { color: var(--color-primary); text-decoration: none; font-weight: 500; font-size: var(--font-size-sm); } .domain-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-self: flex-start; width: 40px; height: 40px; } .expertise-section { display: flex; align-items: center; justify-content: space-between; gap: 2rem; background: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); flex-wrap: wrap; } .expertise-image { flex: 1; display: flex; justify-content: center; align-items: center; } .expertise-image img { width: 100%; max-width: 480px; height: auto; border-radius: var(--radius-md); object-fit: cover; } .expertise-text { flex: 1; min-width: 280px; } .expertise-text h3 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-md); color: var(--color-gray-900); } .expertise-body { color: var(--color-gray-600); line-height: var(--line-height-relaxed); } .expertise-body ul { padding-left: 1.25rem; margin: var(--spacing-md) 0; } .read-more { color: var(--color-primary); text-decoration: none; font-weight: 500; } @media (max-width: 768px) { .expertise-section { flex-direction: column; text-align: center; } .expertise-image img { max-width: 320px; } } .expertise-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .expertise-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; } .expertise-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .expertise-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .expertise-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } .expertise-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .read-more { color: var(--color-primary); text-decoration: none; } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .news-image { position: relative; height: 200px; } .news-image img { width: 100%; height: 100%; object-fit: cover; } .news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0,0,0,.7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; } .news-content { padding: 50px 10px; } .news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } @media (max-width: 768px) { .home-hero-bg { height: 40vh; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .expertise-content { flex-direction: column; } .domains-grid, .news-grid { grid-template-columns: 1fr; } .home-hero-title { font-size: var(--font-size-3xl); } .home-hero-subtitle { font-size: var(--font-size-lg); } } .domain-card, .news-card { background: var(--color-white); border-radius: 1%; box-shadow: var(--shadow-sm); overflow: hidden; } .news-card .news-image { height: 200px; position: relative; } .news-card .news-image img { width: 100%; height: 100%; object-fit: cover; } .news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .news-pagination { display: flex; gap: 6px; justify-content: center; } .pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .pagination-dot:hover, .pagination-dot.active { background-color: var(--color-primary); } .news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .news-card:hover .news-image-container img { opacity: .7; } .news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .news-card:hover .news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .two-column-layout { display: flex; align-items: center; gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .two-column-layout .text-content { flex: 1; min-width: 300px; } .two-column-layout .image-content { flex: 1; display: flex; justify-content: center; } .two-column-layout img { max-width: 100%; height: auto; border-radius: var(--radius-lg); } @media (max-width: 768px) { .two-column-layout { flex-direction: column; } } .progress-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .progress-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .progress-circle { width: 120px; height: 120px; position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-sm); } .progress-circle::before { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 8px solid rgba(255, 255, 255, .2); z-index: 1; } .progress-circle::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 8px solid transparent; border-top-color: var(--progress-color); z-index: 2; transform: rotate(-90deg); animation: progressAnim 1.5s ease-out forwards; animation-delay: calc(var(--progress-value) * .01s); } @keyframes progressAnim { from { transform: rotate(-90deg) scale(.8); opacity: 0; } to { transform: rotate(calc(-90deg + (var(--progress-value) * 3.6deg))); opacity: 1; } } .progress-number { font-size: var(--font-size-2xl); font-weight: 700; color: white; z-index: 3; } .progress-label { font-size: var(--font-size-sm); color: white; text-transform: uppercase; letter-spacing: 1px; } .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .process-step { background: var(--color-gray-50); border-radius: var(--radius-lg); padding: var(--spacing-xl); text-align: center; transition: transform .2s ease; } .process-step:hover { transform: translateY(-5px); } .step-icon { margin-bottom: var(--spacing-md); color: var(--color-primary); font-size: var(--font-size-3xl); } .process-step h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .process-step p { color: var(--color-gray-600); font-size: var(--font-size-sm); line-height: 1.5; } .process-layout { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .process-left, .process-right { flex: 1; min-width: 250px; } .process-center { flex: 0 0 auto; display: flex; justify-content: center; align-items: center; } .process-center img { max-width: 400px; height: auto; border-radius: var(--radius-lg); } .process-step { margin-bottom: var(--spacing-xl); } .process-step h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .process-step p { color: var(--color-gray-600); font-size: var(--font-size-sm); line-height: 1.5; } @media (max-width: 768px) { .process-layout { flex-direction: column; text-align: center; } .process-left, .process-right { width: 100%; } .process-center { margin: var(--spacing-xl) 0; } } .contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .contact-card { text-align: center; padding: var(--spacing-xl); background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-md); } .contact-icon { color: var(--color-primary); font-size: var(--font-size-3xl); margin-bottom: var(--spacing-sm); } .contact-card p { color: var(--color-gray-700); font-size: var(--font-size-sm); line-height: 1.5; text-align: center; } .contact-form { max-width: 800px; margin: var(--spacing-xl) auto; padding: var(--spacing-xl); background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .form-row { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-md); } .form-input, .form-textarea { width: 100%; padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--color-gray-300); border-radius: 2px; ; font-size: var(--font-size-sm); transition: border-color .2s ease; background-color: #e1e1e1e7 } .form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(0, 123, 255, .1); } .form-textarea { min-height: 120px; resize: vertical; } .form-submit { display: block; margin: var(--spacing-xl) auto 0; width: fit-content; padding: var(--spacing-sm) var(--spacing-xl); } @media (max-width: 768px) { .form-row { flex-direction: column; } .contact-info-grid { grid-template-columns: 1fr; } } .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: none; border-radius: 2rem; cursor: pointer; font-weight: 500; transition: all .2s ease-in-out; font-family: inherit; background-color: #3b82f6; color: white; &:hover:not(:disabled) { background-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, .3); } &:active:not(:disabled) { transform: scale(.98); } &:disabled { opacity: .6; cursor: not-allowed; } &:focus { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(59, 130, 246, .1), 0 0 0 5px rgba(59, 130, 246, .5); } } .btn--sm { padding: .375rem .875rem; font-size: .875rem; } .btn--md { padding: .625rem 1.25rem; font-size: 1rem; } .btn--lg { padding: .875rem 1.75rem; font-size: 1.125rem; color: black; } .btn--primary { background-color: #ffffff; &:hover:not(:disabled) { background-color: #2563eb; box-shadow: 0 4px 12px rgba(37, 99, 235, .3); } } .btn--secondary { background-color: #6b7280; color: white; &:hover:not(:disabled) { background-color: #4b5563; box-shadow: 0 4px 12px rgba(75, 85, 99, .3); } } .btn--danger { background-color: #ef4444; &:hover:not(:disabled) { background-color: #dc2626; box-shadow: 0 4px 12px rgba(220, 38, 38, .3); } } .btn--success { background-color: #10b981; &:hover:not(:disabled) { background-color: #059669; box-shadow: 0 4px 12px rgba(5, 150, 105, .3); } } .btn--ghost { background-color: transparent; color: #3b82f6; border: 1px solid #3b82f6; &:hover:not(:disabled) { background-color: #eff6ff; } } .btn--full-width { width: 100%; } .btn--loading { opacity: .8; cursor: wait; } .btn__spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .services-hero { background: linear-gradient(135deg, #1a2a6c, #27498f, #4b0082); position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); background-size: cover; background-position: center; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .services-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url(/static/images/art/services-hero-bg.webp) no-repeat center center; background-size: cover; opacity: .9; z-index: -1; } .services-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); } .services-hero-content p { font-size: var(--font-size-xl); max-width: 600px; margin: 0 auto; } .services-what-we-do { background-color: #fafafa; padding: 4rem 0; text-align: center; } .services-what-we-do h2 { font-size: var(--font-size-lg); color: #888; margin-bottom: var(--spacing-sm); text-transform: uppercase; letter-spacing: 2px; } .services-intro { font-size: var(--font-size-2xl); font-weight: 600; max-width: 800px; margin: 0 auto; line-height: 1.6; color: #333; } .services-grid-section { padding: 4rem 0; background-color: #fafafa; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .service-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-lg); transition: transform .2s ease, box-shadow .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .1); border-radius: 50%; color: var(--color-primary); } .service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: var(--color-gray-900); } .service-card p { color: var(--color-gray-600); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); line-height: 1.5; } .read-more { color: var(--color-primary); text-decoration: none; font-weight: 500; font-size: var(--font-size-sm); align-self: flex-start; transition: color .2s ease; } .read-more:hover { color: var(--color-primary-dark); } @media (max-width: 768px) { .services-hero { padding: 4rem 0; } .services-hero-content h1 { font-size: var(--font-size-3xl); } .services-hero-content p { font-size: var(--font-size-lg); } .services-intro { font-size: var(--font-size-xl); } .services-grid { grid-template-columns: 1fr; } } .ai-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .ai-cameras-hero { background: url(/static/images/art/ai-camera-bgg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; opacity: .9; } .ai-cameras-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .ai-cameras-hero-content h1 { color: white; font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; } .ai-about-ai-cameras { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-about-ai-cameras .ai-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ai-about-ai-cameras .ai-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .ai-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .ai-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .ai-about-text p { margin-bottom: var(--spacing-lg); } .ai-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .ai-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .ai-image-card img { width: 100%; height: auto; display: block; } .ai-stats-badge { position: absolute; top: 200px; right: 60px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .ai-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .ai-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .ai-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .ai-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .ai-factor-card:hover { transform: translateY(-2px); } .ai-factor-number { width: 70px; height: 32px; border-radius: 50%; background: #cac5c5; color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .ai-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .ai-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .ai-focus-areas { padding: 4rem 0; background-color: #f5f5f5; } .ai-focus-areas .ai-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .ai-focus-areas .ai-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .ai-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .ai-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .ai-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .ai-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .ai-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ai-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .ai-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .ai-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .ai-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .ai-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .ai-focus-text { flex: 1; min-width: 300px; } .ai-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .ai-focus-text p { color: #666; line-height: 1.6; } .ai-our-services { padding: 4rem 0; background-color: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .ai-our-services .ai-section-subtitle { font-size: var(--font-size-xl); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); padding-left: 500px; } .ai-our-services .ai-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .ai-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .ai-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .ai-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .ai-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .ai-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .ai-news-updates { padding: 4rem 0; background-color: #fff; } .ai-news-updates .ai-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ai-news-updates .ai-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .ai-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .ai-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .ai-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .ai-news-card:hover { transform: translateY(-5px); } .ai-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .ai-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .ai-news-card:hover .ai-news-image-container img { opacity: .9; } .ai-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .ai-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .ai-news-card:hover .ai-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .ai-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .ai-news-content { padding: var(--spacing-lg) var(--spacing-md); } .ai-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .ai-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .ai-news-pagination { display: flex; gap: 6px; justify-content: center; } .ai-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .ai-pagination-dot:hover, .ai-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .ai-news-grid { grid-template-columns: 1fr; } .ai-news-card { max-width: 100%; } } .ai-solutions-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .ai-solutions-hero { background: url(/static/images/art/ai-solutions-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-solutions-hero::before { content: ""; position: absolute; inset: 0; } .ai-solutions-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .ai-solutions-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-solutions-about .ai-solutions-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ai-solutions-about .ai-solutions-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .ai-solutions-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .ai-solutions-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .ai-solutions-about-text p { margin-bottom: var(--spacing-lg); } .ai-solutions-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .ai-solutions-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .ai-solutions-image-card img { width: 100%; height: auto; display: block; } .ai-solutions-stats-badge { position: absolute; top: 200px; right: 60px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .ai-solutions-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .ai-solutions-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .ai-solutions-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .ai-solutions-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .ai-solutions-factor-card:hover { transform: translateY(-2px); } .ai-solutions-factor-number { width: 100px; height: 32px; border-radius: 50%; background: rgb(224, 220, 214); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .ai-solutions-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .ai-solutions-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .ai-solutions-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-solutions-focus-areas .ai-solutions-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .ai-solutions-focus-areas .ai-solutions-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .ai-solutions-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .ai-solutions-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .ai-solutions-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .ai-solutions-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .ai-solutions-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ai-solutions-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .ai-solutions-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .ai-solutions-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .ai-solutions-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .ai-solutions-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .ai-solutions-focus-text { flex: 1; min-width: 300px; } .ai-solutions-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .ai-solutions-focus-text p { color: #666; line-height: 1.6; } .ai-solutions-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-solutions-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .ai-solutions-our-services .ai-solutions-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ai-solutions-our-services .ai-solutions-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .ai-solutions-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .ai-solutions-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .ai-solutions-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .ai-solutions-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .ai-solutions-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .ai-solutions-news-updates { padding: 4rem 0; background-color: #fff; } .ai-solutions-news-updates .ai-solutions-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ai-solutions-news-updates .ai-solutions-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .ai-solutions-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .ai-solutions-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .ai-solutions-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .ai-solutions-news-card:hover { transform: translateY(-5px); } .ai-solutions-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .ai-solutions-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .ai-solutions-news-card:hover .ai-solutions-news-image-container img { opacity: .9; } .ai-solutions-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .ai-solutions-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .ai-solutions-news-card:hover .ai-solutions-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .ai-solutions-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .ai-solutions-news-content { padding: var(--spacing-lg) var(--spacing-md); } .ai-solutions-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .ai-solutions-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .ai-solutions-news-pagination { display: flex; gap: 6px; justify-content: center; } .ai-solutions-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .ai-solutions-pagination-dot:hover, .ai-solutions-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .ai-solutions-hero { height: 40vh; } .ai-solutions-about-content-wrapper { flex-direction: column; } .ai-solutions-focus-item { flex-direction: column; } .ai-solutions-focus-image { min-width: 100%; } .ai-solutions-focus-text { min-width: 100%; } .ai-solutions-services-grid, .ai-solutions-news-grid { grid-template-columns: 1fr; } } .research-dev-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .research-dev-hero { background: url(/static/images/art/rd-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; opacity: .9; } .research-dev-hero::before { content: ""; position: absolute; inset: 0; } .research-dev-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .research-dev-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .research-dev-about .research-dev-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .research-dev-about .research-dev-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .research-dev-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .research-dev-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .research-dev-about-text p { margin-bottom: var(--spacing-lg); } .research-dev-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .research-dev-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .research-dev-image-card img { width: 100%; height: auto; display: block; } .research-dev-stats-badge { position: absolute; top: 200px; right: 100px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .research-dev-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .research-dev-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .research-dev-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .research-dev-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .research-dev-factor-card:hover { transform: translateY(-2px); } .research-dev-factor-number { width: 100px; height: 32px; border-radius: 50%; background: rgb(205, 200, 200); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .research-dev-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .research-dev-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .research-dev-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .research-dev-focus-areas .research-dev-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .research-dev-focus-areas .research-dev-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .research-dev-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .research-dev-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .research-dev-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .research-dev-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .research-dev-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .research-dev-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .research-dev-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .research-dev-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .research-dev-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .research-dev-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .research-dev-focus-text { flex: 1; min-width: 300px; } .research-dev-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .research-dev-focus-text p { color: #666; line-height: 1.6; } .research-dev-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .research-dev-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .research-dev-our-services .research-dev-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .research-dev-our-services .research-dev-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .research-dev-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .research-dev-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .research-dev-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .research-dev-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .research-dev-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .research-dev-news-updates { padding: 4rem 0; background-color: #fff; } .research-dev-news-updates .research-dev-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .research-dev-news-updates .research-dev-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .research-dev-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .research-dev-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .research-dev-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .research-dev-news-card:hover { transform: translateY(-5px); } .research-dev-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .research-dev-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .research-dev-news-card:hover .research-dev-news-image-container img { opacity: .9; } .research-dev-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .research-dev-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .research-dev-news-card:hover .research-dev-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .research-dev-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .research-dev-news-content { padding: var(--spacing-lg) var(--spacing-md); } .research-dev-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .research-dev-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .research-dev-news-pagination { display: flex; gap: 6px; justify-content: center; } .research-dev-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .research-dev-pagination-dot:hover, .research-dev-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .research-dev-hero { height: 40vh; } .research-dev-about-content-wrapper { flex-direction: column; } .research-dev-focus-item { flex-direction: column; } .research-dev-focus-image { min-width: 100%; } .research-dev-focus-text { min-width: 100%; } .research-dev-services-grid, .research-dev-news-grid { grid-template-columns: 1fr; } } .product-dev-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .product-dev-hero { background: url(/static/images/art/pd-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .product-dev-hero::before { content: ""; position: absolute; inset: 0; } .product-dev-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .product-dev-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .product-dev-about .product-dev-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .product-dev-about .product-dev-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .product-dev-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .product-dev-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .product-dev-about-text p { margin-bottom: var(--spacing-lg); } .product-dev-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .product-dev-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .product-dev-image-card img { width: 100%; height: auto; display: block; } .product-dev-stats-badge { position: absolute; top: 220px; right: 70px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .product-dev-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .product-dev-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .product-dev-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .product-dev-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .product-dev-factor-card:hover { transform: translateY(-2px); } .product-dev-factor-number { width: 100px; height: 32px; border-radius: 50%; background: rgb(220, 213, 213); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .product-dev-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .product-dev-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .product-dev-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .product-dev-focus-areas .product-dev-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .product-dev-focus-areas .product-dev-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .product-dev-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .product-dev-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .product-dev-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .product-dev-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .product-dev-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .product-dev-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .product-dev-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .product-dev-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .product-dev-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .product-dev-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .product-dev-focus-text { flex: 1; min-width: 300px; } .product-dev-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .product-dev-focus-text p { color: #666; line-height: 1.6; } .product-dev-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .product-dev-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .product-dev-our-services .product-dev-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .product-dev-our-services .product-dev-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .product-dev-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .product-dev-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .product-dev-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .product-dev-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .product-dev-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .product-dev-news-updates { padding: 4rem 0; background-color: #fff; } .product-dev-news-updates .product-dev-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .product-dev-news-updates .product-dev-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .product-dev-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .product-dev-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .product-dev-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .product-dev-news-card:hover { transform: translateY(-5px); } .product-dev-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .product-dev-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .product-dev-news-card:hover .product-dev-news-image-container img { opacity: .9; } .product-dev-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .product-dev-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .product-dev-news-card:hover .product-dev-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .product-dev-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .product-dev-news-content { padding: var(--spacing-lg) var(--spacing-md); } .product-dev-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .product-dev-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .product-dev-news-pagination { display: flex; gap: 6px; justify-content: center; } .product-dev-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .product-dev-pagination-dot:hover, .product-dev-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .product-dev-hero { height: 40vh; } .product-dev-about-content-wrapper { flex-direction: column; } .product-dev-focus-item { flex-direction: column; } .product-dev-focus-image { min-width: 100%; } .product-dev-focus-text { min-width: 100%; } .product-dev-services-grid, .product-dev-news-grid { grid-template-columns: 1fr; } } .patents-ip-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .patents-ip-hero { background: url(/static/images/art/pip-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .patents-ip-hero::before { content: ""; position: absolute; inset: 0; } .patents-ip-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .patents-ip-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .patents-ip-about .patents-ip-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .patents-ip-about .patents-ip-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .patents-ip-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .patents-ip-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .patents-ip-about-text p { margin-bottom: var(--spacing-lg); } .patents-ip-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .patents-ip-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .patents-ip-image-card img { width: 100%; height: auto; display: block; } .patents-ip-stats-badge { position: absolute; top: 220px; right: 70px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .patents-ip-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .patents-ip-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .patents-ip-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .patents-ip-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .patents-ip-factor-card:hover { transform: translateY(-2px); } .patents-ip-factor-number { width: 150px; height: 32px; border-radius: 50%; background: rgb(222, 216, 216); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .patents-ip-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .patents-ip-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .patents-ip-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .patents-ip-focus-areas .patents-ip-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .patents-ip-focus-areas .patents-ip-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .patents-ip-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .patents-ip-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .patents-ip-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .patents-ip-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .patents-ip-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .patents-ip-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .patents-ip-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .patents-ip-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .patents-ip-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .patents-ip-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .patents-ip-focus-text { flex: 1; min-width: 300px; } .patents-ip-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .patents-ip-focus-text p { color: #666; line-height: 1.6; } .patents-ip-read-more-btn { background: var(--color-primary); color: white; border: none; padding: 8px 24px; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; margin-top: var(--spacing-md); transition: background .2s ease; } .patents-ip-read-more-btn:hover { background: var(--color-primary-dark); } .patents-ip-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .patents-ip-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .patents-ip-our-services .patents-ip-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .patents-ip-our-services .patents-ip-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .patents-ip-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .patents-ip-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .patents-ip-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .patents-ip-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .patents-ip-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: var(--spacing-sm); line-height: 1.5; } .patents-ip-service-link { color: var(--color-primary); text-decoration: none; font-weight: 500; font-size: var(--font-size-sm); } .patents-ip-service-link:hover { text-decoration: underline; } .patents-ip-customer-stories { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .patents-ip-customer-stories .patents-ip-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .patents-ip-customer-stories .patents-ip-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .patents-ip-stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .patents-ip-story-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); transition: transform .2s ease; } .patents-ip-story-card:hover { transform: translateY(-5px); } .patents-ip-story-card p { color: #666; line-height: 1.6; margin-bottom: var(--spacing-md); } .patents-ip-story-author { font-weight: 600; color: #333; font-size: var(--font-size-sm); } .patents-ip-stories-pagination { display: flex; gap: 6px; justify-content: center; margin-top: var(--spacing-lg); } .patents-ip-stories-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .patents-ip-stories-dot.active { background-color: var(--color-primary); } .patents-ip-book-appointment { padding: 4rem 0; background: #0F054C; color: white; text-align: center; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .patents-ip-book-appointment .patents-ip-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .patents-ip-book-appointment .patents-ip-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; } .patents-ip-book-btn { background: var(--color-primary); color: white; border: none; padding: 12px 32px; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; transition: background .2s ease; } .patents-ip-book-btn:hover { background: var(--color-primary-dark); } .patents-ip-news-updates { padding: 4rem 0; background-color: #fff; } .patents-ip-news-updates .patents-ip-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .patents-ip-news-updates .patents-ip-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .patents-ip-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .patents-ip-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .patents-ip-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .patents-ip-news-card:hover { transform: translateY(-5px); } .patents-ip-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .patents-ip-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .patents-ip-news-card:hover .patents-ip-news-image-container img { opacity: .9; } .patents-ip-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .patents-ip-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .patents-ip-news-card:hover .patents-ip-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .patents-ip-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .patents-ip-news-content { padding: var(--spacing-lg) var(--spacing-md); } .patents-ip-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .patents-ip-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .patents-ip-news-pagination { display: flex; gap: 6px; justify-content: center; } .patents-ip-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .patents-ip-pagination-dot:hover, .patents-ip-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .patents-ip-hero { height: 40vh; } .patents-ip-about-content-wrapper { flex-direction: column; } .patents-ip-focus-item { flex-direction: column; } .patents-ip-focus-image { min-width: 100%; } .patents-ip-focus-text { min-width: 100%; } .patents-ip-services-grid, .patents-ip-news-grid, .patents-ip-stories-grid { grid-template-columns: 1fr; } .patents-ip-book-appointment { padding: 2rem 0; } } .iot-solutions-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .iot-solutions-hero { background: url(/static/images/art/iot-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .iot-solutions-hero::before { content: ""; position: absolute; inset: 0; } .iot-solutions-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .iot-solutions-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .iot-solutions-about .iot-solutions-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .iot-solutions-about .iot-solutions-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .iot-solutions-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .iot-solutions-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .iot-solutions-about-text p { margin-bottom: var(--spacing-lg); } .iot-solutions-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .iot-solutions-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .iot-solutions-image-card img { width: 100%; height: auto; display: block; } .iot-solutions-stats-badge { position: absolute; top: 220px; right: 70px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .iot-solutions-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .iot-solutions-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .iot-solutions-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .iot-solutions-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .iot-solutions-factor-card:hover { transform: translateY(-2px); } .iot-solutions-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(218, 216, 216); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .iot-solutions-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .iot-solutions-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .iot-solutions-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .iot-solutions-focus-areas .iot-solutions-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .iot-solutions-focus-areas .iot-solutions-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .iot-solutions-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .iot-solutions-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .iot-solutions-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .iot-solutions-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .iot-solutions-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .iot-solutions-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .iot-solutions-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .iot-solutions-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .iot-solutions-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .iot-solutions-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .iot-solutions-focus-text { flex: 1; min-width: 300px; } .iot-solutions-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .iot-solutions-focus-text p { color: #666; line-height: 1.6; } .iot-solutions-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .iot-solutions-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .iot-solutions-our-services .iot-solutions-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .iot-solutions-our-services .iot-solutions-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .iot-solutions-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .iot-solutions-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .iot-solutions-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .iot-solutions-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .iot-solutions-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .iot-solutions-news-updates { padding: 4rem 0; background-color: #fff; } .iot-solutions-news-updates .iot-solutions-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .iot-solutions-news-updates .iot-solutions-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .iot-solutions-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .iot-solutions-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .iot-solutions-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .iot-solutions-news-card:hover { transform: translateY(-5px); } .iot-solutions-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .iot-solutions-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .iot-solutions-news-card:hover .iot-solutions-news-image-container img { opacity: .9; } .iot-solutions-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .iot-solutions-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .iot-solutions-news-card:hover .iot-solutions-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .iot-solutions-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .iot-solutions-news-content { padding: var(--spacing-lg) var(--spacing-md); } .iot-solutions-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .iot-solutions-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .iot-solutions-news-pagination { display: flex; gap: 6px; justify-content: center; } .iot-solutions-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .iot-solutions-pagination-dot:hover, .iot-solutions-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .iot-solutions-hero { height: 40vh; } .iot-solutions-about-content-wrapper { flex-direction: column; } .iot-solutions-focus-item { flex-direction: column; } .iot-solutions-focus-image { min-width: 100%; } .iot-solutions-focus-text { min-width: 100%; } .iot-solutions-services-grid, .iot-solutions-news-grid { grid-template-columns: 1fr; } } .digital-trans-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .digital-trans-hero { background: url(/static/images/art/dt-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .digital-trans-hero::before { content: ""; position: absolute; inset: 0; } .digital-trans-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .digital-trans-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .digital-trans-about .digital-trans-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .digital-trans-about .digital-trans-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .digital-trans-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .digital-trans-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .digital-trans-about-text p { margin-bottom: var(--spacing-lg); } .digital-trans-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .digital-trans-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .digital-trans-image-card img { width: 100%; height: auto; display: block; } .digital-trans-stats-badge { position: absolute; top: 240px; right: 70px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .digital-trans-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .digital-trans-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .digital-trans-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .digital-trans-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .digital-trans-factor-card:hover { transform: translateY(-2px); } .digital-trans-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(228, 225, 225); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .digital-trans-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .digital-trans-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .digital-trans-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .digital-trans-focus-areas .digital-trans-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .digital-trans-focus-areas .digital-trans-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .digital-trans-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .digital-trans-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .digital-trans-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .digital-trans-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .digital-trans-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .digital-trans-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .digital-trans-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .digital-trans-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .digital-trans-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .digital-trans-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .digital-trans-focus-text { flex: 1; min-width: 300px; } .digital-trans-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .digital-trans-focus-text p { color: #666; line-height: 1.6; } .digital-trans-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .digital-trans-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .digital-trans-our-services .digital-trans-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .digital-trans-our-services .digital-trans-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .digital-trans-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .digital-trans-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .digital-trans-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .digital-trans-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .digital-trans-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .digital-trans-news-updates { padding: 4rem 0; background-color: #fff; } .digital-trans-news-updates .digital-trans-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .digital-trans-news-updates .digital-trans-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .digital-trans-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .digital-trans-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .digital-trans-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .digital-trans-news-card:hover { transform: translateY(-5px); } .digital-trans-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .digital-trans-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .digital-trans-news-card:hover .digital-trans-news-image-container img { opacity: .9; } .digital-trans-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .digital-trans-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .digital-trans-news-card:hover .digital-trans-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .digital-trans-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .digital-trans-news-content { padding: var(--spacing-lg) var(--spacing-md); } .digital-trans-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .digital-trans-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .digital-trans-news-pagination { display: flex; gap: 6px; justify-content: center; } .digital-trans-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .digital-trans-pagination-dot:hover, .digital-trans-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .digital-trans-hero { height: 40vh; } .digital-trans-about-content-wrapper { flex-direction: column; } .digital-trans-focus-item { flex-direction: column; } .digital-trans-focus-image { min-width: 100%; } .digital-trans-focus-text { min-width: 100%; } .digital-trans-services-grid, .digital-trans-news-grid { grid-template-columns: 1fr; } } .ai-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .ai-hero { background: url(/static/images/art/ai-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-hero::before { content: ""; position: absolute; inset: 0; } .ai-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .ai-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-about .ai-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ai-about .ai-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .ai-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .ai-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .ai-about-text p { margin-bottom: var(--spacing-lg); } .ai-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .ai-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .ai-image-card img { width: 100%; height: auto; display: block; } .ai-stats-badge { position: absolute; top: 200px; right: 80px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .ai-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .ai-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .ai-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .ai-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .ai-factor-card:hover { transform: translateY(-2px); } .ai-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(236, 233, 233); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .ai-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .ai-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .ai-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-focus-areas .ai-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .ai-focus-areas .ai-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .ai-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .ai-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .ai-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .ai-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .ai-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ai-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .ai-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .ai-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .ai-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .ai-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .ai-focus-text { flex: 1; min-width: 300px; } .ai-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .ai-focus-text p { color: #666; line-height: 1.6; } .ai-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ai-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .ai-our-services .ai-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ai-our-services .ai-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .ai-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .ai-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .ai-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .ai-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .ai-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .ai-news-updates { padding: 4rem 0; background-color: #fff; } .ai-news-updates .ai-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ai-news-updates .ai-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .ai-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .ai-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .ai-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .ai-news-card:hover { transform: translateY(-5px); } .ai-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .ai-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .ai-news-card:hover .ai-news-image-container img { opacity: .9; } .ai-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .ai-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .ai-news-card:hover .ai-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .ai-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .ai-news-content { padding: var(--spacing-lg) var(--spacing-md); } .ai-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .ai-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .ai-news-pagination { display: flex; gap: 6px; justify-content: center; } .ai-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .ai-pagination-dot:hover, .ai-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .ai-hero { height: 40vh; } .ai-about-content-wrapper { flex-direction: column; } .ai-focus-item { flex-direction: column; } .ai-focus-image { min-width: 100%; } .ai-focus-text { min-width: 100%; } .ai-services-grid, .ai-news-grid { grid-template-columns: 1fr; } } .sr-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .sr-hero { background: url(/static/images/art/smart-road-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .sr-hero::before { content: ""; position: absolute; inset: 0; } .sr-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .sr-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .sr-about .sr-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .sr-about .sr-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .sr-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .sr-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .sr-about-text p { margin-bottom: var(--spacing-lg); } .sr-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .sr-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .sr-image-card img { width: 100%; height: auto; display: block; } .sr-stats-badge { position: absolute; top: 200px; right: 80px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .sr-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .sr-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .sr-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .sr-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .sr-factor-card:hover { transform: translateY(-2px); } .sr-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(236, 233, 233); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .sr-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .sr-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .sr-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .sr-focus-areas .sr-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .sr-focus-areas .sr-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .sr-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .sr-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .sr-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .sr-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .sr-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sr-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .sr-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .sr-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .sr-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .sr-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .sr-focus-text { flex: 1; min-width: 300px; } .sr-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .sr-focus-text p { color: #666; line-height: 1.6; } .sr-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .sr-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .sr-our-services .sr-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .sr-our-services .sr-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .sr-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .sr-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .sr-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .sr-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .sr-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .sr-news-updates { padding: 4rem 0; background-color: #fff; } .sr-news-updates .sr-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .sr-news-updates .sr-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .sr-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .sr-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .sr-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .sr-news-card:hover { transform: translateY(-5px); } .sr-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .sr-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .sr-news-card:hover .sr-news-image-container img { opacity: .9; } .sr-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .sr-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .sr-news-card:hover .sr-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .sr-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .sr-news-content { padding: var(--spacing-lg) var(--spacing-md); } .sr-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .sr-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .sr-news-pagination { display: flex; gap: 6px; justify-content: center; } .sr-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .sr-pagination-dot:hover, .sr-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .sr-hero { height: 40vh; } .sr-about-content-wrapper { flex-direction: column; } .sr-focus-item { flex-direction: column; } .sr-focus-image { min-width: 100%; } .sr-focus-text { min-width: 100%; } .sr-services-grid, .sr-news-grid { grid-template-columns: 1fr; } } .ag-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .ag-hero { background: url(/static/images/art/2928.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ag-hero::before { content: ""; position: absolute; inset: 0; } .ag-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .ag-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ag-about .ag-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ag-about .ag-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .ag-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .ag-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .ag-about-text p { margin-bottom: var(--spacing-lg); } .ag-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .ag-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .ag-image-card img { width: 100%; height: auto; display: block; } .ag-stats-badge { position: absolute; top: 220px; right: 80px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .ag-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .ag-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .ag-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .ag-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .ag-factor-card:hover { transform: translateY(-2px); } .ag-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(236, 233, 233); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .ag-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .ag-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .ag-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ag-focus-areas .ag-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .ag-focus-areas .ag-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .ag-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .ag-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .ag-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .ag-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .ag-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ag-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .ag-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .ag-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .ag-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .ag-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .ag-focus-text { flex: 1; min-width: 300px; } .ag-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .ag-focus-text p { color: #666; line-height: 1.6; } .ag-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .ag-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .ag-our-services .ag-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ag-our-services .ag-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .ag-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .ag-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .ag-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .ag-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .ag-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .ag-case-studies { padding: 4rem 0; background-color: #fff; } .ag-case-studies .ag-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .ag-case-studies .ag-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .ag-case-studies-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .ag-case-studies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .ag-case-study-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .ag-case-study-card:hover { transform: translateY(-5px); } .ag-case-study-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .ag-case-study-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .ag-case-study-card:hover .ag-case-study-image-container img { opacity: .9; } .ag-case-study-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .ag-case-study-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .ag-case-study-card:hover .ag-case-study-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .ag-case-study-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .ag-case-study-content { padding: var(--spacing-lg) var(--spacing-md); } .ag-case-study-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .ag-case-study-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .ag-case-studies-pagination { display: flex; gap: 6px; justify-content: center; } .ag-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .ag-pagination-dot:hover, .ag-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .ag-hero { height: 40vh; } .ag-about-content-wrapper { flex-direction: column; } .ag-focus-item { flex-direction: column; } .ag-focus-image { min-width: 100%; } .ag-focus-text { min-width: 100%; } .ag-services-grid, .ag-case-studies-grid { grid-template-columns: 1fr; } } .hs-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .hs-hero { background: url(/static/images/art/health-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .hs-hero::before { content: ""; position: absolute; inset: 0; } .hs-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .hs-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .hs-about .hs-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .hs-about .hs-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .hs-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .hs-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .hs-about-text p { margin-bottom: var(--spacing-lg); } .hs-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .hs-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .hs-image-card img { width: 100%; height: auto; display: block; } .hs-stats-badge { position: absolute; top: 200px; right: 80px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .hs-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .hs-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .hs-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .hs-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .hs-factor-card:hover { transform: translateY(-2px); } .hs-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(236, 233, 233); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .hs-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .hs-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .hs-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .hs-focus-areas .hs-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .hs-focus-areas .hs-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .hs-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .hs-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .hs-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .hs-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .hs-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hs-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .hs-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .hs-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .hs-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .hs-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .hs-focus-text { flex: 1; min-width: 300px; } .hs-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .hs-focus-text p { color: #666; line-height: 1.6; } .hs-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .hs-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .hs-our-services .hs-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .hs-our-services .hs-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .hs-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .hs-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .hs-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .hs-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .hs-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .hs-case-studies { padding: 4rem 0; background-color: #fff; } .hs-case-studies .hs-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .hs-case-studies .hs-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .hs-case-studies-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .hs-case-studies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .hs-case-study-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .hs-case-study-card:hover { transform: translateY(-5px); } .hs-case-study-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .hs-case-study-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .hs-case-study-card:hover .hs-case-study-image-container img { opacity: .9; } .hs-case-study-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .hs-case-study-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .hs-case-study-card:hover .hs-case-study-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .hs-case-study-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .hs-case-study-content { padding: var(--spacing-lg) var(--spacing-md); } .hs-case-study-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .hs-case-study-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .hs-case-studies-pagination { display: flex; gap: 6px; justify-content: center; } .hs-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .hs-pagination-dot:hover, .hs-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .hs-hero { height: 40vh; } .hs-about-content-wrapper { flex-direction: column; } .hs-focus-item { flex-direction: column; } .hs-focus-image { min-width: 100%; } .hs-focus-text { min-width: 100%; } .hs-services-grid, .hs-case-studies-grid { grid-template-columns: 1fr; } } .dt-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .dt-hero { background: url(/static/images/art/dreamheader.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .dt-hero::before { content: ""; position: absolute; inset: 0; } .dt-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .dt-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .dt-about .dt-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .dt-about .dt-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .dt-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .dt-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .dt-about-text p { margin-bottom: var(--spacing-lg); } .dt-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .dt-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .dt-image-card img { width: 100%; height: auto; display: block; } .dt-stats-badge { position: absolute; top: 220px; right: 80px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .dt-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .dt-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .dt-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .dt-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .dt-factor-card:hover { transform: translateY(-2px); } .dt-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(236, 233, 233); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .dt-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .dt-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .dt-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .dt-focus-areas .dt-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .dt-focus-areas .dt-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .dt-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .dt-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .dt-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .dt-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .dt-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .dt-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .dt-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .dt-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .dt-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .dt-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .dt-focus-text { flex: 1; min-width: 300px; } .dt-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .dt-focus-text p { color: #666; line-height: 1.6; } .dt-read-more-btn { background: var(--color-primary); color: white; border: none; padding: 8px 24px; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; transition: background-color .2s ease; } .dt-read-more-btn:hover { background: var(--color-primary-dark); } .dt-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .dt-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .dt-our-services .dt-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .dt-our-services .dt-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .dt-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .dt-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .dt-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .dt-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .dt-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); line-height: 1.5; } .dt-service-link { color: var(--color-primary); text-decoration: none; font-size: var(--font-size-sm); transition: color .2s ease; } .dt-service-link:hover { color: var(--color-primary-dark); text-decoration: underline; } .dt-customer-stories { padding: 4rem 0; background-color: #fff; } .dt-customer-stories .dt-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .dt-customer-stories .dt-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .dt-stories-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .dt-stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .dt-story-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); transition: transform .2s ease; } .dt-story-card:hover { transform: translateY(-5px); } .dt-story-content { padding: var(--spacing-lg) 0; } .dt-story-quote { font-size: var(--font-size-lg); font-style: italic; color: #333; margin-bottom: var(--spacing-md); line-height: 1.6; } .dt-story-author { font-size: var(--font-size-sm); color: #666; font-weight: 600; } .dt-stories-pagination { display: flex; gap: 6px; justify-content: center; } .dt-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .dt-pagination-dot:hover, .dt-pagination-dot.active { background-color: var(--color-primary); } .dt-book-appointment { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .dt-book-appointment::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .dt-book-appointment .dt-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .dt-book-appointment .dt-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .dt-appointment-cta { display: flex; justify-content: center; margin-top: var(--spacing-xl); } .dt-appointment-btn { background: var(--color-primary); color: white; border: none; padding: 12px 32px; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; transition: background-color .2s ease; font-size: var(--font-size-lg); } .dt-appointment-btn:hover { background: var(--color-primary-dark); } .dt-news-updates { padding: 4rem 0; background-color: #fff; } .dt-news-updates .dt-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .dt-news-updates .dt-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .dt-news-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .dt-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .dt-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .dt-news-card:hover { transform: translateY(-5px); } .dt-news-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .dt-news-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .dt-news-card:hover .dt-news-image-container img { opacity: .9; } .dt-news-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .dt-news-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .dt-news-card:hover .dt-news-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .dt-news-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .dt-news-content { padding: var(--spacing-lg) var(--spacing-md); } .dt-news-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .dt-news-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .dt-news-pagination { display: flex; gap: 6px; justify-content: center; } .dt-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .dt-pagination-dot:hover, .dt-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .dt-hero { height: 40vh; } .dt-about-content-wrapper { flex-direction: column; } .dt-focus-item { flex-direction: column; } .dt-focus-image { min-width: 100%; } .dt-focus-text { min-width: 100%; } .dt-services-grid, .dt-stories-grid, .dt-news-grid { grid-template-columns: 1fr; } } .mc-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .mc-hero { background: url("/static/images/art/mediaheader%20(1).webp") no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .mc-hero::before { content: ""; position: absolute; inset: 0; } .mc-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .mc-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .mc-about .mc-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .mc-about .mc-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .mc-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .mc-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .mc-about-text p { margin-bottom: var(--spacing-lg); } .mc-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .mc-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .mc-image-card img { width: 100%; height: auto; display: block; } .mc-stats-badge { position: absolute; top: 220px; right: 80px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .mc-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .mc-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .mc-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .mc-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .mc-factor-card:hover { transform: translateY(-2px); } .mc-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(236, 233, 233); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .mc-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .mc-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .mc-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .mc-focus-areas .mc-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .mc-focus-areas .mc-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .mc-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .mc-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .mc-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .mc-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .mc-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mc-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .mc-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .mc-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .mc-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .mc-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .mc-focus-text { flex: 1; min-width: 300px; } .mc-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .mc-focus-text p { color: #666; line-height: 1.6; } .mc-read-more-btn { background: var(--color-primary); color: white; border: none; padding: 8px 24px; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; transition: background-color .2s ease; } .mc-read-more-btn:hover { background: var(--color-primary-dark); } .mc-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .mc-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .mc-our-services .mc-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .mc-our-services .mc-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .mc-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .mc-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .mc-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .mc-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .mc-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: var(--spacing-md); line-height: 1.5; } .mc-service-link { color: var(--color-primary); text-decoration: none; font-size: var(--font-size-sm); transition: color .2s ease; } .mc-service-link:hover { color: var(--color-primary-dark); text-decoration: underline; } .mc-customer-stories { padding: 4rem 0; background-color: #fff; } .mc-customer-stories .mc-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .mc-customer-stories .mc-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .mc-stories-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .mc-stories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .mc-story-card { background: var(--color-white); border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); transition: transform .2s ease; } .mc-story-card:hover { transform: translateY(-5px); } .mc-story-content { padding: var(--spacing-lg) 0; } .mc-story-quote { font-size: var(--font-size-lg); font-style: italic; color: #333; margin-bottom: var(--spacing-md); line-height: 1.6; } .mc-story-author { font-size: var(--font-size-sm); color: #666; font-weight: 600; } .mc-stories-pagination { display: flex; gap: 6px; justify-content: center; } .mc-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .mc-pagination-dot:hover, .mc-pagination-dot.active { background-color: var(--color-primary); } .mc-for-subscription { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .mc-for-subscription::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .mc-for-subscription .mc-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .mc-for-subscription .mc-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .mc-subscription-cta { display: flex; justify-content: center; margin-top: var(--spacing-xl); } .mc-subscription-btn { background: var(--color-primary); color: white; border: none; padding: 12px 32px; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; transition: background-color .2s ease; font-size: var(--font-size-lg); } .mc-subscription-btn:hover { background: var(--color-primary-dark); } .mc-news-updates { padding: 4rem 0; background-color: #fff; } .mc-news-updates .mc-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .mc-news-updates .mc-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .mc-news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .mc-news-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .mc-news-card:hover { transform: translateY(-5px); } .mc-news-card img { width: 100%; height: 200px; object-fit: cover; display: block; } .mc-news-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-md) 0; color: var(--color-gray-900); padding: 0 var(--spacing-md); } @media (max-width: 768px) { .mc-hero { height: 40vh; } .mc-about-content-wrapper { flex-direction: column; } .mc-focus-item { flex-direction: column; } .mc-focus-image { min-width: 100%; } .mc-focus-text { min-width: 100%; } .mc-services-grid, .mc-stories-grid, .mc-news-grid { grid-template-columns: 1fr; } } .df-section-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; } .df-hero { background: url(/static/images/art/defence-bg.webp) no-repeat center center; background-size: cover; position: relative; width: 100vw; height: 60vh; margin-top: calc(-1 * var(--spacing-2xl)); margin-bottom: var(--spacing-2xl); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: white; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; opacity: .8; } .df-hero::before { content: ""; position: absolute; inset: 0; } .df-hero-content h1 { font-size: var(--font-size-4xl); font-weight: 700; margin-bottom: var(--spacing-md); z-index: 2; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); color: white; } .df-about { padding: 4rem 0; background-color: #fff; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .df-about .df-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .df-about .df-section-title { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-xl); color: #333; } .df-about-content-wrapper { display: flex; gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); align-items: flex-start; } .df-about-text { flex: 1; max-width: 600px; color: #666; line-height: 1.6; } .df-about-text p { margin-bottom: var(--spacing-lg); } .df-about-images { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-lg); } .df-image-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .df-image-card img { width: 100%; height: auto; display: block; } .df-stats-badge { position: absolute; top: 200px; right: 80px; background: white; padding: 16px; border-radius: var(--radius-md); text-align: center; box-shadow: var(--shadow-md); } .df-stat-number { font-size: var(--font-size-2xl); font-weight: 700; color: #333; display: block; } .df-stat-label { font-size: var(--font-size-sm); color: #666; display: block; } .df-factors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .df-factor-card { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-lg); border-radius: var(--radius-lg); background: var(--color-gray-50); transition: transform .2s ease; } .df-factor-card:hover { transform: translateY(-2px); } .df-factor-number { width: 90px; height: 32px; border-radius: 50%; background: rgb(236, 233, 233); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--font-size-sm); } .df-factor-content h3 { font-size: var(--font-size-lg); margin: 0 0 var(--spacing-xs) 0; color: #333; } .df-factor-content p { color: #666; font-size: var(--font-size-sm); line-height: 1.5; } .df-focus-areas { padding: 4rem 0; background-color: #f5f5f5; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .df-focus-areas .df-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-lg); color: #333; text-align: center; } .df-focus-areas .df-section-intro { font-size: var(--font-size-lg); max-width: 800px; margin: 0 auto var(--spacing-xl); color: #666; text-align: center; } .df-focus-tabs { display: flex; justify-content: center; gap: var(--spacing-md); margin: var(--spacing-xl) 0; flex-wrap: wrap; } .df-focus-tab { background: var(--color-white); border: 1px solid var(--color-gray-300); border-radius: var(--radius-full); padding: var(--spacing-sm) var(--spacing-md); font-weight: 500; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: all .2s ease; color: var(--color-gray-700); min-width: auto; white-space: nowrap; } .df-focus-tab:hover { background: var(--color-gray-100); border-color: var(--color-gray-400); } .df-focus-tab.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } .df-focus-tab-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .df-focus-tab-label { font-size: var(--font-size-sm); white-space: nowrap; } .df-focus-content { background: white; border-radius: var(--radius-lg); padding: var(--spacing-xl); box-shadow: var(--shadow-sm); } .df-focus-item { display: flex; align-items: center; gap: var(--spacing-xl); flex-wrap: wrap; } .df-focus-image { flex: 1; min-width: 300px; display: flex; justify-content: center; } .df-focus-image img { max-width: 100%; height: auto; border-radius: var(--radius-md); } .df-focus-text { flex: 1; min-width: 300px; } .df-focus-text h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); color: #333; } .df-focus-text p { color: #666; line-height: 1.6; } .df-our-services { padding: 4rem 0; background: #0F054C; color: white; position: relative; overflow: hidden; margin-left: calc(-50vw + 50%) ; margin-right: calc(-50vw + 50%) ; } .df-our-services::before { content: ""; position: absolute; bottom: -100px; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, transparent, #1a2a6c); clip-path: ellipse(100% 50% at 50% 100%); z-index: -1; } .df-our-services .df-section-subtitle { font-size: var(--font-size-sm); color: rgba(255, 255, 255, .8); text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .df-our-services .df-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: white; text-align: center; } .df-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .df-service-card { border-radius: var(--radius-lg); padding: var(--spacing-xl); backdrop-filter: blur(10px); transition: transform .2s ease; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .df-service-icon { margin-bottom: var(--spacing-md); display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; background: rgba(255, 255, 255, .2); border-radius: 50%; color: white; } .df-service-card h3 { font-size: var(--font-size-xl); margin: var(--spacing-sm) 0; color: white; } .df-service-card p { color: rgba(255, 255, 255, .8); font-size: var(--font-size-sm); margin-bottom: 0; line-height: 1.5; } .df-case-studies { padding: 4rem 0; background-color: #fff; } .df-case-studies .df-section-subtitle { font-size: var(--font-size-sm); color: #888; text-transform: uppercase; letter-spacing: 2px; margin-bottom: var(--spacing-xs); } .df-case-studies .df-section-title { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-xl); color: #333; text-align: center; } .df-case-studies-carousel { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-lg); } .df-case-studies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-xl); width: 100%; margin-top: var(--spacing-xl); } .df-case-study-card { background: var(--color-white); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .2s ease; } .df-case-study-card:hover { transform: translateY(-5px); } .df-case-study-image-container { position: relative; display: block; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; } .df-case-study-image-container img { width: 100%; height: 200px; object-fit: cover; display: block; transition: opacity .3s ease; } .df-case-study-card:hover .df-case-study-image-container img { opacity: .9; } .df-case-study-category { position: absolute; top: var(--spacing-sm); left: var(--spacing-sm); background: rgba(0, 0, 0, .7); color: white; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); font-size: var(--font-size-xs); text-transform: uppercase; z-index: 2; } .df-case-study-read-more { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(255, 255, 255, .95); color: var(--color-primary); text-decoration: none; font-weight: 600; padding: 8px 24px; border-radius: var(--radius-full); opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 3; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); } .df-case-study-card:hover .df-case-study-read-more { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); } .df-case-study-read-more:hover { background: white; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); } .df-case-study-content { padding: var(--spacing-lg) var(--spacing-md); } .df-case-study-content h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-sm); color: var(--color-gray-900); } .df-case-study-meta { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-gray-500); font-size: var(--font-size-sm); } .df-case-studies-pagination { display: flex; gap: 6px; justify-content: center; } .df-pagination-dot { width: 6px; height: 6px; border-radius: 50%; background-color: var(--color-gray-300); border: none; cursor: pointer; padding: 0; margin: 0; transition: background-color .2s ease; } .df-pagination-dot:hover, .df-pagination-dot.active { background-color: var(--color-primary); } @media (max-width: 768px) { .df-hero { height: 40vh; } .df-about-content-wrapper { flex-direction: column; } .df-focus-item { flex-direction: column; } .df-focus-image { min-width: 100%; } .df-focus-text { min-width: 100%; } .df-services-grid, .df-case-studies-grid { grid-template-columns: 1fr; } } @font-face { font-family: "Inter"; src: url(/static/fonts/inter/Inter-Light.woff2) format("woff2"); font-weight: 300; font-display: swap; } @font-face { font-family: "Inter"; src: url(/static/fonts/inter/Inter-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Inter"; src: url(/static/fonts/inter/Inter-Medium.woff2) format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "Inter"; src: url(/static/fonts/inter/Inter-SemiBold.woff2) format("woff2"); font-weight: 600; font-display: swap; } @font-face { font-family: "Inter"; src: url(/static/fonts/inter/Inter-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Jost"; src: url(/static/fonts/jost/Jost-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Jost"; src: url(/static/fonts/jost/Jost-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "FiraCode"; src: url(/static/fonts/mono/FiraCode-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "FiraCode"; src: url(/static/fonts/mono/FiraCode-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; } :root { --color-primary: #3b82f6; --color-primary-dark: #2563eb; --color-primary-light: #dbeafe; --color-secondary: #6b7280; --color-secondary-dark: #4b5563; --color-danger: #ef4444; --color-danger-dark: #dc2626; --color-success: #10b981; --color-success-dark: #059669; --color-warning: #f59e0b; --color-warning-dark: #d97706; --color-info: #06b6d4; --color-info-dark: #0891b2; --color-white: #ffffff; --color-gray-50: #f9fafb; --color-gray-100: #f3f4f6; --color-gray-200: #e5e7eb; --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-gray-500: #6b7280; --color-gray-600: #4b5563; --color-gray-700: #374151; --color-gray-800: #1f2937; --color-gray-900: #111827; --color-black: #000000; --spacing-xs: .25rem; --spacing-sm: .5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --radius-sm: .25rem; --radius-md: .5rem; --radius-lg: .75rem; --radius-full: 9999px; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-heading: "Jost", var(--font-sans); --font-mono: "FiraCode", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; --letter-spacing-tight: -.02em; --letter-spacing-normal: 0; --letter-spacing-wide: .02em; --transition-fast: .15s ease-in-out; --transition-normal: .3s ease-in-out; --transition-slow: .5s ease-in-out; --z-dropdown: 100; --z-modal: 1000; --z-tooltip: 1100; --z-notification: 1200; } html.dark { --color-gray-50: #111827; --color-gray-100: #1f2937; --color-gray-200: #374151; --color-gray-300: #4b5563; --color-gray-400: #6b7280; --color-gray-500: #9ca3af; --color-gray-600: #d1d5db; --color-gray-700: #e5e7eb; --color-gray-800: #f3f4f6; --color-gray-900: #f9fafb; --color-white: #0f172a; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow-x: hidden; } #root { width: 100%; height: 100%; } html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background-color: var(--color-gray-50); color: var(--color-gray-900); font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-normal); font-weight: 400; transition: background-color var(--transition-normal), color var(--transition-normal); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 1000; line-height: var(--line-height-tight); color: var(--color-gray-900); } h1 { font-size: var(--font-size-4xl); } h2 { font-size: var(--font-size-3xl); } h3 { font-size: var(--font-size-2xl); } h4 { font-size: var(--font-size-xl); } h5 { font-size: var(--font-size-lg); } h6 { font-size: var(--font-size-base); } p { color: var(--color-gray-600); line-height: var(--line-height-relaxed); } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-dark); } code, pre, kbd, samp { font-family: var(--font-mono); font-size: var(--font-size-sm); } code { background-color: var(--color-gray-100); color: var(--color-primary); padding: .25rem .5rem; border-radius: var(--radius-md); } pre { background-color: var(--color-gray-100); padding: var(--spacing-md); border-radius: var(--radius-lg); overflow-x: auto; } pre code { background-color: transparent; color: inherit; padding: 0; } ul, ol { margin-left: var(--spacing-md); } li { margin-bottom: var(--spacing-sm); } img { max-width: 100%; height: auto; display: block; } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--spacing-md); text-align: left; border-bottom: 1px solid var(--color-gray-200); } th { background-color: var(--color-gray-100); font-weight: 600; color: var(--color-gray-900); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-gray-100); } ::-webkit-scrollbar-thumb { background: var(--color-gray-300); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); } ::selection { background-color: var(--color-primary); color: white; } *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } button:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px var(--color-gray-100), 0 0 0 5px var(--color-primary); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @media print { body { background-color: white; } a[href]::after { content: " (" attr(href) ")"; } img, a, button { page-break-inside: avoid; } } @media (max-width: 768px) { h1 { font-size: var(--font-size-3xl); } h2 { font-size: var(--font-size-2xl); } h3 { font-size: var(--font-size-xl); } body { font-size: var(--font-size-sm); } } .page { min-height: 100vh; padding: 2rem; background-color: #f9fafb; } .page--auth { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; margin: 0; padding: 0; } .page--dashboard { max-width: 1200px; margin: 0 auto; } .page-header { margin-bottom: 2rem; } .page-header h1 { font-size: 2rem; font-weight: 700; color: #111827; margin: 0 0 .5rem 0; } .page-header p { font-size: 1rem; color: #6b7280; margin: 0; } .auth-container { width: 100%; padding: 2rem; display: flex; justify-content: center; align-items: center; } .auth-box { background: white; border-radius: 1rem; padding: 2.5rem; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); width: 100%; max-width: 400px; } .auth-title { font-size: 1.875rem; font-weight: 700; color: #111827; margin: 0 0 .5rem 0; text-align: center; } .auth-subtitle { font-size: .875rem; color: #6b7280; text-align: center; margin: 0 0 2rem 0; } .form { display: flex; flex-direction: column; gap: 1.5rem; } .form-group { display: flex; flex-direction: column; gap: .5rem; } .form-label { font-size: .875rem; font-weight: 500; color: #374151; } .form-input { padding: .75rem 1rem; border: 1px solid #d1d5db; border-radius: .5rem; font-size: .875rem; transition: all .2s ease-in-out; font-family: inherit; &:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .1); } &:disabled { background-color: #f3f4f6; color: #9ca3af; cursor: not-allowed; } &.error { border-color: #ef4444; &:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .1); } } } .form-error { font-size: .75rem; color: #ef4444; margin-top: -.25rem; } .auth-links { display: flex; justify-content: space-between; font-size: .875rem; margin-top: 1rem; } .auth-link { color: #3b82f6; text-decoration: none; transition: color .2s ease-in-out; &:hover { color: #2563eb; text-decoration: underline; } } .dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .dashboard-card { background: white; border-radius: .75rem; padding: 1.5rem; border: 1px solid #e5e7eb; transition: all .2s ease-in-out; &:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .08); border-color: #d1d5db; } h3 { margin: 0 0 1rem 0; font-size: .875rem; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; } } .dashboard-stat { margin: 0; font-size: 2rem; font-weight: 700; color: #111827; } .loading-spinner { display: flex; align-items: center; justify-content: center; min-height: 200px; color: #6b7280; } .error-message { background-color: #fee2e2; border: 1px solid #fecaca; color: #991b1b; padding: 1rem; border-radius: .5rem; margin-top: 2rem; p { margin: 0 0 1rem 0; } button { padding: .5rem 1rem; background-color: #991b1b; color: white; border: none; border-radius: .375rem; cursor: pointer; font-size: .875rem; &:hover { background-color: #7f1d1d; } } } @media (max-width: 768px) { .page { padding: 1rem; } .auth-container { padding: 1rem; } .auth-box { padding: 1.5rem; } .page-header h1 { font-size: 1.5rem; } .dashboard-grid { grid-template-columns: 1fr; } })}