/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-dark-blue);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.bg-image {
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow: hidden;
    z-index: 0;
  
    img {
      object-fit: cover;
      object-position: center center;
      width:100%;
      height:100%;
    }
}


a {
    color: var(--color-dark-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-dark-blue);
    text-decoration-thickness: 2px;
}

a:focus-visible {
    outline: 2px solid var(--color-dark-blue);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
    color: var(--color-dark-blue);
}

h1 { font-size: var(--font-size-3xl); margin-bottom: var(--space-4); }
h2 { font-size: var(--font-size-2xl); margin-bottom: var(--space-3); }
h3 { font-size: var(--font-size-xl); margin-bottom: var(--space-2); }

p {
    margin-bottom: var(--space-4);
}

p:last-child {
    margin-bottom: 0;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Site main */
.site-main {
    background: #fff;
    padding: 50px 0;
}

/* Site header */
.site-header {
    background-color: var(--color-bg-dark);
    padding: var(--space-4) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* Site branding */
.site-branding__link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-branding__logo {
    height: 40px;
    width: auto;
}

/* Site footer */
.site-footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-8) 0;
}

.site-footer__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

.site-footer__copy {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.site-footer a {
    color: var(--color-text-inverse);
}

.footer-menu {
    list-style: none;
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    justify-content: center;
}

.footer-menu a {
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.footer-menu a:hover {
    text-decoration: underline;
}

/* Accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--color-bg);
    clip: auto !important;
    clip-path: none;
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-base);
    height: auto;
    left: 5px;
    line-height: normal;
    padding: var(--space-4);
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 200;
}

.skip-link:focus {
    background-color: var(--color-bg);
    clip: auto !important;
    clip-path: none;
    color: var(--color-text);
    display: block;
    font-size: var(--font-size-base);
    font-weight: 700;
    height: auto;
    left: var(--space-2);
    line-height: normal;
    padding: var(--space-4);
    text-decoration: none;
    top: var(--space-2);
    width: auto;
    z-index: 200;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

/* Navigation */
.primary-navigation {
    display: flex;
    align-items: center;
}

.primary-menu {
    list-style: none;
    display: flex;
    gap: var(--space-6);
}

.primary-menu a {
    color: var(--color-text-inverse);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: var(--space-2) 0;
    transition: opacity var(--transition-fast);
}

.primary-menu a:hover,
.primary-menu a:focus {
    opacity: 0.85;
    text-decoration: underline;
}

.primary-menu .current-menu-item a,
.primary-menu .current_page_item a {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Header login link */
.header-login {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-inverse);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding: var(--space-2) var(--space-4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    margin-left: var(--space-4);
    white-space: nowrap;
}

.header-login:hover,
.header-login:focus {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--color-text-inverse);
}

.header-login__icon {
    flex-shrink: 0;
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    flex-direction: column;
    gap: 5px;
}

.menu-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-text-inverse);
    transition: transform var(--transition-base), opacity var(--transition-base);
}

@media (max-width: 639px) {
    .menu-toggle {
        display: flex;
    }

    .primary-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-bg-dark);
        flex-direction: column;
        padding: var(--space-4) var(--container-padding);
        gap: 0;
        box-shadow: var(--shadow-lg);
    }

    .primary-menu.is-open {
        display: flex;
    }

    .primary-menu li {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .primary-menu a {
        display: block;
        padding: var(--space-3) 0;
    }

    .site-header {
        position: relative;
    }

    .primary-navigation {
        position: static;
    }

    .header-login {
        margin-left: auto;
    }

    .header-login__text {
        display: none;
    }
}

.page-template-default .page-header {
    text-align: center;
}

/* Page header */
.page-header,
.entry-header,
.archive-header {
    margin-bottom: var(--space-8);
}

/* Error 404 */
.error-404 {
    text-align: center;
    padding: var(--space-16) 0;
}

/* Hero */
.hero {
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-16) 0;
}

.hero__inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero__content {
    max-width: 700px;
    text-align: center;
}

.hero__content img {
    max-width: 300px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
}

.hero__title {
    font-size: var(--font-size-3xl);
    color: var(--color-text-inverse);
    margin-bottom: var(--space-4);
    line-height: 1.15;
}

.hero__subtitle {
    font-size: var(--font-size-lg);
    opacity: 0.85;
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.btn--lg {
    padding: var(--space-3) var(--space-8);
    font-size: var(--font-size-base);
}

.btn--light {
    background-color: var(--color-light-blue) !important;
    color: var(--color-dark-blue) !important;
    border-color: var(--color-light-blue) !important;
}

.btn--outline-white {
    background-color: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
}

.btn--inverse {
    color: var(--color-text-inverse);
    border-color: var(--color-text-inverse);
}

.btn--inverse:hover {
    background-color: var(--color-text-inverse);
    color: var(--color-dark-blue);
}

@media (min-width: 640px) {
    :root {
        --container-padding: var(--space-6);
    }

    h1 { font-size: var(--font-size-4xl); }

    .hero {
        padding: var(--space-16) 0 calc(var(--space-16) + var(--space-8));
    }

    .hero__title {
        font-size: var(--font-size-4xl);
    }
}

.home .site-main {
    padding: 0;
}

#about-us {
    background: #fff;
    color: #333;
    padding: 100px 0;
}

#about-us::before {
    display: none;
}

#about-us h2 {
    color: var(--color-dark-blue);
}

#about-us .bg-image {
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 0;
}

#about-us a {
    color: #0492FF;
    font-weight:bold;
}

#about-us h3 {
    color: #666;
}

#about-us .bg-image:before {
    content:'';
    display: block;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 27.91%);
}

@media(max-width:639px){
    #about-us {
        padding-top:0;
    }
    #about-us .bg-image {
        display:block;
        position:relative;
        width:100%;
        height:300px;
    }

    #about-us .bg-image:before { 
        background: linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 27.91%);
    }
}

#about-us .bg-image img {
    object-fit: cover;
    object-position: center top;
    width: 100%;
    height: 100%;
}

#get-started {
    background-color: var(--color-bg-dark);
    color:#fff;
}

#get-started h2 {
    color: #fff;
}

#get-started .container .ete-section__inner {
    justify-content: center;
}