@font-face {

    font-family: 'Kyber';

    src: url('Kyber-Regular.ttf') format('truetype');

}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: 'Arial', sans-serif;

    background-color: #f5f5f5;

    color: #333;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

}



/* Header Styles */

header {

    background-color: #e8e8e8;

    padding: 15px 0;

    border-bottom: 1px solid #d0d0d0;

}



.header-container {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;

}



.logo {

    display: flex;

    align-items: center;

}



.logo a {
    text-decoration: none;
    display: block;
}

.logo img {

    height: 40px;

    width: auto;

}



nav ul {

    list-style: none;

    display: flex;

    align-items: center;

    gap: 25px;

}



nav a {

    text-decoration: none;

    color: #333;

    font-size: 14px;

    transition: color 0.3s ease;

}



nav a:hover {

    color: #666;

}



nav a.active {

    color: #333;

    font-weight: bold;

    border-bottom: 2px solid #333;

    padding-bottom: 2px;

}



.sign-in {

    background-color: #666;

    padding: 8px 16px;

    border-radius: 4px;

}



.sign-in a {

    color: white !important;

}



.sign-in a:hover {

    color: #f0f0f0 !important;

}



/* Main Content Styles */

main {

    flex: 1;

    padding: 40px 20px;

}



/* Home Page Styles */

.home-content {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 60vh;

    text-align: center;

}



.logo-section {

    max-width: 800px;

}



.main-logo {

    max-width: 300px;

    height: auto;

    margin-bottom: 30px;

}



.tagline {

    font-size: 48px;

    font-weight: bold;

    color: #333;

    margin-bottom: 20px;

    line-height: 1.2;

}



.description {

    font-size: 20px;

    color: #666;

    line-height: 1.6;

    max-width: 600px;

    margin: 0 auto;

}



/* Sign-in Page Styles */

.signin-content {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 70vh;

    padding: 40px 20px;

}



.signin-box {

    background-color: #d0d0d0;

    padding: 40px;

    border-radius: 8px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    width: 100%;

    max-width: 400px;

    text-align: center;

}



.signin-logo {

    margin-bottom: 30px;

}



.signin-logo img {

    max-width: 200px;

    height: auto;

    margin-bottom: 15px;

}



.signin-logo .tagline {

    font-size: 14px;

    font-weight: bold;

    color: #333;

    margin-top: 10px;

    letter-spacing: 0.5px;

}



.signin-form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}



.signin-form .form-group {

    text-align: left;

}



.signin-form label {

    display: block;

    margin-bottom: 8px;

    font-weight: 500;

    color: #333;

    font-size: 14px;

}



.signin-form input {

    width: 100%;

    padding: 12px;

    border: 1px solid #ccc;

    border-radius: 4px;

    font-size: 16px;

    background-color: #f5f5f5;

    transition: border-color 0.3s ease;

}



.signin-form input:focus {

    outline: none;

    border-color: #666;

    background-color: #fff;

}



.signin-btn {

    background-color: #666;

    color: white;

    border: none;

    padding: 14px 20px;

    border-radius: 4px;

    font-size: 16px;

    font-weight: 500;

    cursor: pointer;

    transition: background-color 0.3s ease;

    margin-top: 10px;

}



.signin-btn:hover {

    background-color: #555;

}



.companies-container {

    max-width: 1200px;

    margin: 0 auto;

}



.company {

    display: flex;

    align-items: center;

    padding: 20px 0;

    border-bottom: 1px solid #e0e0e0;

    gap: 20px;

}



.company:last-child {

    border-bottom: none;

}



.company-logo {

    width: 60px;

    height: 60px;

    background-color: #ff8c42;

    border-radius: 50%;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-weight: bold;

    font-size: 12px;

    text-align: center;

    line-height: 1.2;

    overflow: hidden;

}



.company-logo::after {

    content: "Company Logo";

}



.company-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 50%;

    background-color: white;

    padding: 5px;

}



.company-logo:has(img)::after {

    display: none;

}



.company-info {

    flex: 1;

}



.company-info h3 {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 5px;

    color: #333;

}



.company-info p {

    font-size: 14px;

    color: #666;

    line-height: 1.4;

}



/* Footer Styles */

footer {

    background-color: #d0d0d0;

    padding: 20px 0;

    border-top: 1px solid #c0c0c0;

    margin-top: auto;

}



.footer-container {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 20px;

}



.language-selector {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

    color: #333;

}



.globe-icon {

    font-size: 16px;

}



.footer-links {

    display: flex;

    align-items: center;

    gap: 20px;

    font-size: 14px;

}



.footer-links a {

    color: #333;

    text-decoration: none;

    transition: color 0.3s ease;

}



.footer-links a:hover {

    color: #666;

}



.copyright {

    color: #333;

    font-size: 14px;

}



/* Responsive Design */

@media (max-width: 768px) {

    .header-container {

        flex-direction: column;

        gap: 15px;

        padding: 15px;

    }

    

    nav ul {

        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;

    }

    

    .company {

        flex-direction: column;

        text-align: center;

        gap: 15px;

    }

    

    .footer-container {

        flex-direction: column;

        gap: 15px;

        text-align: center;

    }

    

    .footer-links {

        flex-wrap: wrap;

        justify-content: center;

        gap: 15px;

    }

}



/* About Page Styles */

.about-content {

    max-width: 1200px;

    margin: 0 auto;

    display: flex;

    gap: 40px;

    padding: 40px 20px;

}



.location-section {

    flex: 1;

    text-align: center;

}



.skyline-image {

    width: 100%;

    max-width: 400px;

    height: auto;

    border-radius: 8px;

    margin-bottom: 20px;

}



.location-text {

    font-size: 16px;

    color: #666;

    font-weight: 500;

}



.about-description {

    flex: 1;

}



.about-description h2 {

    font-size: 28px;

    margin-bottom: 20px;

    color: #333;

}



.about-description p {

    font-size: 16px;

    line-height: 1.6;

    margin-bottom: 15px;

    color: #555;

}



/* Contact Page Styles */

.contact-content {

    max-width: 1200px;

    margin: 0 auto;

    padding: 40px 20px;

}



.contact-content h2 {

    font-size: 32px;

    margin-bottom: 30px;

    text-align: center;

    color: #333;

}



.contact-info {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 30px;

    margin-bottom: 40px;

}



.contact-item h3 {

    font-size: 20px;

    margin-bottom: 10px;

    color: #333;

}



.contact-item p {

    font-size: 16px;

    line-height: 1.6;

    color: #555;

}



.contact-form {

    max-width: 600px;

    margin: 0 auto;

}



.contact-form h3 {

    font-size: 24px;

    margin-bottom: 20px;

    text-align: center;

    color: #333;

}



.form-group {

    margin-bottom: 20px;

}



.form-group label {

    display: block;

    margin-bottom: 5px;

    font-weight: 500;

    color: #333;

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 12px;

    border: 1px solid #ddd;

    border-radius: 4px;

    font-size: 16px;

}



.submit-btn {

    background-color: #666;

    color: white;

    padding: 12px 30px;

    border: none;

    border-radius: 4px;

    font-size: 16px;

    cursor: pointer;

    transition: background-color 0.3s ease;

}



.submit-btn:hover {

    background-color: #555;

}



/* Mission Page Styles */

.mission-content {

    max-width: 800px;

    margin: 0 auto;

    text-align: center;

    padding: 60px 20px;

}



.mission-content h2 {

    font-size: 36px;

    margin-bottom: 30px;

    color: #333;

}



.mission-content p {

    font-size: 18px;

    line-height: 1.8;

    color: #555;

    margin-bottom: 40px;

}



.handshake-icon {

    margin-top: 20px;

}



/* Partnerships Page Styles */

.partnerships-content {

    max-width: 1000px;

    margin: 0 auto;

    padding: 40px 20px;

}



.partnerships-content h2 {

    font-size: 32px;

    margin-bottom: 20px;

    text-align: center;

    color: #333;

}



.partnership-intro {

    text-align: center;

    margin-bottom: 40px;

}



.partnership-intro p {

    font-size: 18px;

    line-height: 1.6;

    color: #555;

}



.partnership-types {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 30px;

    margin-bottom: 40px;

}



.partnership-category h3 {

    font-size: 20px;

    margin-bottom: 15px;

    color: #333;

}



.partnership-category p {

    font-size: 16px;

    line-height: 1.6;

    color: #555;

}



.partnership-process {

    margin-bottom: 40px;

}



.partnership-process h3 {

    font-size: 24px;

    margin-bottom: 20px;

    color: #333;

}



.partnership-process ol {

    list-style: none;

    counter-reset: step-counter;

}



.partnership-process li {

    counter-increment: step-counter;

    margin-bottom: 15px;

    padding-left: 40px;

    position: relative;

    font-size: 16px;

    line-height: 1.6;

    color: #555;

}



.partnership-process li::before {

    content: counter(step-counter);

    position: absolute;

    left: 0;

    top: 0;

    background-color: #666;

    color: white;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

}



.cta-section {

    text-align: center;

    padding: 40px 20px;

    background-color: #f0f0f0;

    border-radius: 8px;

}



.cta-section h3 {

    font-size: 28px;

    margin-bottom: 15px;

    color: #333;

}



.cta-section p {

    font-size: 16px;

    margin-bottom: 25px;

    color: #555;

}



.cta-button {

    display: inline-block;

    background-color: #666;

    color: white;

    padding: 12px 30px;

    text-decoration: none;

    border-radius: 4px;

    font-size: 16px;

    transition: background-color 0.3s ease;

}



.cta-button:hover {

    background-color: #555;

}



@media (max-width: 768px) {

    .home-content {

        min-height: 50vh;

        padding: 20px;

    }

    

    .main-logo {

        max-width: 250px;

        margin-bottom: 20px;

    }

    

    .tagline {

        font-size: 36px;

        margin-bottom: 15px;

    }

    

    .description {

        font-size: 18px;

    }

    

    .signin-content {

        min-height: 60vh;

        padding: 20px;

    }

    

    .signin-box {

        padding: 30px 20px;

        max-width: 350px;

    }

    

    .signin-logo img {

        max-width: 180px;

    }

}



@media (max-width: 480px) {

    .company-logo {

        width: 50px;

        height: 50px;

    }

    

    .company-info h3 {

        font-size: 16px;

    }

    

    .company-info p {

        font-size: 13px;

    }

    

    nav ul {

        gap: 10px;

    }

    

    nav a {

        font-size: 13px;

    }

    

    .about-content {

        flex-direction: column;

        gap: 30px;

    }

    

    .mission-content {

        padding: 40px 20px;

    }

    

    .mission-content h2 {

        font-size: 28px;

    }

    

    .partnership-types {

        grid-template-columns: 1fr;

    }

    

    .main-logo {

        max-width: 200px;

        margin-bottom: 15px;

    }

    

    .tagline {

        font-size: 28px;

        margin-bottom: 10px;

    }

    

    .description {

        font-size: 16px;

    }

    

    .signin-content {

        min-height: 50vh;

        padding: 15px;

    }

    

    .signin-box {

        padding: 25px 15px;

        max-width: 300px;

    }

    

    .signin-logo img {

        max-width: 150px;

        margin-bottom: 10px;

    }

    

    .signin-logo .tagline {

        font-size: 12px;

    }

}



/* Accessibility Widget Styles */

.a11y-widget {

    position: relative;

    display: inline-flex;

    align-items: center;

    margin-left: 20px;

}



.a11y-button {

    background: none;

    border: none;

    color: #333;

    font-size: 14px;

    font-weight: normal;

    cursor: pointer;

    padding: 0;

    text-decoration: none;

    transition: color 0.3s ease;

}



.a11y-button:hover {

    color: #666;

}



.a11y-menu {

    position: absolute;

    bottom: 50px;

    right: 0;

    background-color: white;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 15px;

    min-width: 200px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.15);

    display: none;

}



.a11y-menu.active {

    display: block;

}



.a11y-menu-title {

    font-size: 14px;

    font-weight: 600;

    color: #333;

    margin-bottom: 10px;

    padding-bottom: 8px;

    border-bottom: 1px solid #e0e0e0;

}



.a11y-option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 0;

    cursor: pointer;

    transition: background-color 0.2s;

}



.a11y-option:hover {

    background-color: #f5f5f5;

}



.a11y-option-label {

    font-size: 13px;

    color: #333;

}



.a11y-toggle {

    width: 40px;

    height: 20px;

    background-color: #ddd;

    border-radius: 10px;

    position: relative;

    cursor: pointer;

    transition: background-color 0.2s;

}



.a11y-toggle.active {

    background-color: #4CAF50;

}



.a11y-toggle::after {

    content: '';

    position: absolute;

    width: 16px;

    height: 16px;

    background-color: white;

    border-radius: 50%;

    top: 2px;

    left: 2px;

    transition: transform 0.2s;

}



.a11y-toggle.active::after {

    transform: translateX(20px);

}



.a11y-text-size {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 10px;

}



.a11y-text-size button {

    width: 30px;

    height: 30px;

    border: 1px solid #e0e0e0;

    background-color: white;

    border-radius: 4px;

    cursor: pointer;

    font-size: 14px;

    font-weight: bold;

}



.a11y-text-size button:hover {

    background-color: #f5f5f5;

}



body.high-contrast {

    filter: contrast(1.2);

}



body.large-text {

    font-size: 120%;

}



body.aci-font {

    font-family: 'Kyber', 'Arial', sans-serif;

}



/* Language Selector Widget Styles */

.lang-widget {

    position: relative;

    display: inline-flex;

    align-items: center;

    margin-left: 20px;

}



.lang-button {

    background: none;

    border: none;

    color: #333;

    font-size: 14px;

    font-weight: normal;

    cursor: pointer;

    padding: 0;

    text-decoration: none;

    transition: color 0.3s ease;

}



.lang-button:hover {

    color: #666;

}



.lang-menu {

    position: absolute;

    bottom: 50px;

    right: 0;

    background-color: white;

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    padding: 15px;

    min-width: 200px;

    box-shadow: 0 4px 20px rgba(0,0,0,0.15);

    display: none;

}



.lang-menu.active {

    display: block;

}



.lang-menu-title {

    font-size: 14px;

    font-weight: 600;

    color: #333;

    margin-bottom: 10px;

    padding-bottom: 8px;

    border-bottom: 1px solid #e0e0e0;

}



.lang-option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 8px 0;

    cursor: pointer;

    transition: background-color 0.2s;

}



.lang-option:hover {

    background-color: #f5f5f5;

}



.lang-option-label {

    font-size: 13px;

    color: #333;

}



.lang-option.active {

    font-weight: 600;

    color: #333;

}



/* Glitch Text Effect */

.glitch-text {

    position: relative;

    display: inline-block;

    animation: glitch-skew 1s infinite linear alternate-reverse;

}



.glitch-text::before,

.glitch-text::after {

    content: '■■■■■■■';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0.8;

}



.glitch-text::before {

    color: #ff00ff;

    animation: glitch-1 0.3s infinite;

    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);

    text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff;

}



.glitch-text::after {

    color: #00ffff;

    animation: glitch-2 0.3s infinite;

    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);

    text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff;

}



@keyframes glitch-1 {

    0%, 100% {

        transform: translate(0) skew(0deg);

    }

    20% {

        transform: translate(-3px, 3px) skew(10deg);

    }

    40% {

        transform: translate(-3px, -3px) skew(-10deg);

    }

    60% {

        transform: translate(3px, 3px) skew(5deg);

    }

    80% {

        transform: translate(3px, -3px) skew(-5deg);

    }

}



@keyframes glitch-2 {

    0%, 100% {

        transform: translate(0) skew(0deg);

    }

    20% {

        transform: translate(3px, -3px) skew(-10deg);

    }

    40% {

        transform: translate(3px, 3px) skew(10deg);

    }

    60% {

        transform: translate(-3px, -3px) skew(-5deg);

    }

    80% {

        transform: translate(-3px, 3px) skew(5deg);

    }

}



@keyframes glitch-skew {

    0%, 100% {

        transform: skew(0deg);

    }

    25% {

        transform: skew(2deg);

    }

    50% {

        transform: skew(-2deg);

    }

    75% {

        transform: skew(1deg);

    }

}



/* Contact Page Styles */

.main-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background-color: #ffffff;

}



.logo-container {

    margin-bottom: 30px;

}



.logo-container img {

    max-width: 200px;

    height: auto;

    display: block;

}



.location-text {

    font-size: 24px;

    font-weight: 700;

    color: #333;

    text-align: center;

}



.subtext {

    font-size: 16px;

    font-weight: 400;

    color: #666;

    text-align: center;

    margin-top: 10px;

    max-width: 600px;

    line-height: 1.5;

}