@font-face {
    font-family: gotham-book;
    src: url(../fonts/gotham-book.TTF) format("truetype")
}

body,
html {
    padding: 0;
    margin: 0;
    position: relative;
    overflow-y: visible
}

html h1,
html h2,
html h3,
html h4 {
    color: #fff;
    font-family: Montserrat, sans-serif;
    line-height: 1.5;
    font-weight: 700
}

html a,
html button,
html label,
html li,
html p,
html .plans table,
html .plans td {
    color: #585555;
    font-family: gotham-book, sans-serif;
    font-size: 20px
}

html small {
    color: #585555;
    font-family: gotham-book, sans-serif
}

html li {
    height: 50px
}

html .main-title,
html .plans th {
    font-size: 35px;
    margin: 50px 0;
    text-transform: uppercase;
    font-weight: 400;
    color: #424242
}

html #contact form {
    background-color: #f7f7f7;
    padding: 2rem
}

html .form-group {
    margin-bottom: 2rem
}

.header:not(.inner-header) {
    position: absolute;
    z-index: 20;
    width: 100%
}

.header .header-cols {
    position: relative;
}

.header .header-cols .menu-button {
    color: #fff;
    font-size: 36px;
    cursor: pointer;
    line-height: 1
}

.header .header-cols .nav-pills .nav-link {
    color: #fff
}

.header .header-cols .nav-pills .nav-link:hover {
    color: #fff
}

.header .header-cols .nav-pills .nav-item:not(.last-item) .nav-link:hover::after {
    content: "";
    display: block;
    border-bottom: 2px solid;
}

.position-fixed, .inner-header {
    background: #79ade8;
    box-shadow: 0 6px 10px -2px rgba(0, 0, 0, .75);
    z-index: 20
}

.main .home {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: soft-light;
    background-color: #003d52;
    background-image: url(../img/bg.jpg);
    color: #fff;
    height: 694px;
    padding-top: 210px
}

.main .home .main-headline {
    font-size: 5em
}

.main .features {
    padding-bottom: 200px;
    padding-top: 100px
}

.main .features .icon-container {
    border: 1px dashed #d3d3d3;
    border-radius: 50%;
    font-size: 50px;
    height: 88px;
    line-height: 83px;
    margin: 20px auto;
    width: 88px
}

.main .features .icon-container i {
    color: #97f3fc;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    background: -webkit-linear-gradient(left, #97f3fc, #9eccfc);
    background: -webkit-gradient(linear, left top, right top, from(#97f3fc), to(#9eccfc));
    background: -o-linear-gradient(left, #97f3fc, #9eccfc);
    background: linear-gradient(left, #97f3fc, #9eccfc);
    font-size: 50px
}

.main .features .angles {
    position: absolute;
    right: 0;
    top: 13%;
    font-size: 47px;
    color: #d3d3d3
}

.main .about,
.main .contact {
    background: #d1e7fe;
    padding-bottom: 200px;
    padding-top: 100px
}

.main .about .col-lg-6,
.main .contact .col-lg-6 {
    margin: 20px 0
}

.main .about .col-lg-6 .icon-container,
.main .contact .col-lg-6 .icon-container {
    max-width: 100px;
    display: inline-block;
    height: 100px;
    transition: transform 250ms ease;
    margin-bottom: 30px
}

.main .about .col-lg-6 .icon-container img,
.main .contact .col-lg-6 .icon-container img {
    width: 100%
}

.main .plans {
    padding-bottom: 200px;
    padding-top: 100px
}

.main .plans th {
    font-size: 20px;
    font-weight: 700
}

.main .plans tr {
    border-bottom: 2px solid #fff
}

.main .plans tr .feats {
    width: 33.3333%;
    background: #e3ecf6
}

.main .plans tr .basic {
    width: 33.3333%;
    background: #a3caf5
}

.main .plans tr .basic .fa-times-circle {
    color: #a8a6a6
}

.main .plans tr .pro {
    width: 33.3333%;
    background: #79ade8
}

.main .contact .row {
    margin-top: 60px
}

.main .contact .row .col-lg-8 {
    margin-bottom: 35px
}

.main .contact .row .col-lg-8 button {
    color: #585555;
    background: #a3caf5;
    font-weight: 700;
    text-transform: uppercase
}

.main .contact .row .col-lg-8 button:hover {
    background: #79ade8
}

.main .contact .row .col-lg-4 a:hover {
    color: #585555;
    text-decoration: none
}

.main .contact .row .col-lg-4 .share-container {
    margin-top: 50px;
    margin-bottom: 50px
}

#backtotop {
    position: fixed;
    right: 0;
    display: none;
    bottom: 20px;
    margin: 0 20px 0 0;
    z-index: 9999999;
    width: 50px;
    height: 50px
}

#backtotop a {
    color: #fff;
    font-size: 50px;
    line-height: normal;
    background-color: rgba(0, 0, 0, .5);
    height: inherit;
    width: inherit;
    display: inline-block
}

#backtotop a:hover {
    background-color: #79ade8;
    box-shadow: 0 0 17px 0 rgba(0, 0, 0, .75)
}

@media (max-width:568px) {
    .main .plans th {
        font-size: 18px
    }
    .main .plans .feats {
        font-size: 11px
    }
}

@media (max-width:767px) {
    .features .step-2 {
        margin-top: 50px;
        margin-bottom: 50px
    }
    .features .fa-angle-right {
        display: none
    }
    .features .fa-angle-down {
        display: block
    }
    .features .angles {
        left: 0;
        top: 100% !important
    }
}

@media (max-width:768px) {
    .main-headline {
        font-size: 2.5em !important
    }
    .main .home {
        height: 378px;
        padding-top: 115px
    }
    .features {
        padding-bottom: 0 !important
    }
    .about,
    .main .contact {
        padding-bottom: 0 !important
    }
    .about .col-lg-6,
    .main .contact .col-lg-6 {
        margin-bottom: 30px
    }
}

@media (min-width:768px) {
    .fa-angle-right {
        display: block
    }
    .fa-angle-down {
        display: none
    }
}

@media (max-width:992px) {
    .closed {
        display: none
    }
}

@media (min-width:992px) {
    .closed {
        display: flex !important
    }
    .menu-button {
        display: none
    }
    .nav-pills {
        height: 100%
    }
}

.form-query {
    margin: 0 auto;
}

.form-query button {
    background-color: #79ade8;
}

.header-query {
    background: #79ade8;
    box-shadow: 0 6px 10px -2px rgba(0, 0, 0, .75);
}
.nav-item.last-item {
    border: 1px solid #ffffff;
    border-radius: 0.25rem;
}
.header .logo a {
    max-width: 160px;
}
.modal small {
    max-width: 160px;
}
.modal .modal-footer {
    background: #79ade8;
}
.modal .btn {
    width: 100%;
}
.modal .modal-title {
    width: 100%;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
}
.modal input, .modal label, .modal .btn {
    font-family: 'gotham-book', sans-serif;
    
}
.app-feature-inner .col-md-4 {
    position: relative;
}
.main-container table td {
    color: #585555;
    font-family: gotham-book, sans-serif;
}
.main-container table th {
    color: #585555;
    font-family: Montserrat, sans-serif;
}

/* ═══════════ MOBILE MENU FIX ═══════════ */
@media (max-width:992px) {
    .header .row {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }
    .header .logo {
        flex: 1 1 auto;
        max-width: 160px;
    }
    .header .header-cols.col-lg-9 {
        flex: 0 0 auto;
        width: auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .header .header-cols .menu-button {
        position: relative;
        z-index: 22;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 32px;
    }
    .header-cols .nav-pills {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: 270px;
        background: linear-gradient(180deg, #5b94d4 0%, #79ade8 40%, #a3caf5 100%);
        z-index: 21;
        flex-direction: column;
        padding: 80px 16px 30px;
        overflow-y: auto;
        box-shadow: -6px 0 25px rgba(0,0,0,.25);
        border-radius: 20px 0 0 20px;
    }
    .header-cols .nav-pills li,
    .header-cols .nav-pills button.nav-item {
        height: auto;
        width: 100%;
        padding: 0;
        border: none;
    }
    .header-cols .nav-pills .nav-link {
        text-align: left;
        padding: 12px 18px;
        font-size: 17px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        color: #fff;
        border-radius: 10px;
        transition: background .2s ease;
    }
    .header-cols .nav-pills .nav-link:hover,
    .header-cols .nav-pills .nav-link:focus {
        background: rgba(255,255,255,.2);
    }
    .header-cols .nav-pills .nav-item:not(.last-item) .nav-link:hover::after {
        display: none;
    }
    .header-cols .nav-pills .nav-item.last-item {
        margin: 6px 0;
        width: 100%;
        border: 2px solid rgba(255,255,255,.6);
        border-radius: 10px;
        background: transparent;
        transition: background .2s ease, border-color .2s ease;
    }
    .header-cols .nav-pills .nav-item.last-item:hover {
        background: rgba(255,255,255,.15);
        border-color: #fff;
    }
    .header-cols .nav-pills .nav-item.last-item .nav-link {
        text-align: center;
        font-size: 15px;
        padding: 10px 18px;
    }
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.35);
        z-index: 18;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
    .menu-overlay.active {
        display: block;
    }
}

/* ═══════════ DARK MODE (AUTO) ═══════════ */
@media (prefers-color-scheme: dark) {
    body, html {
        background-color: #1a1a2e;
        color: #e0e0e0;
    }

    html h1, html h2, html h3, html h4 {
        color: #fff;
    }

    html a, html button, html label, html li, html p,
    html .plans table, html .plans td {
        color: #d0d0d0;
    }

    html small {
        color: #b0b0b0;
    }

    html .main-title, html .plans th {
        color: #e0e0e0;
    }

    /* Header */
    .position-fixed, .inner-header {
        background: #16213e;
        box-shadow: 0 6px 10px -2px rgba(0,0,0,.5);
    }

    /* Hero */
    .main .home {
        background-color: #0a1628;
        background-blend-mode: multiply;
    }

    /* Features */
    .main .features {
        background: #1a1a2e;
    }
    .main .features .icon-container {
        border-color: #444;
    }
    .main .features .angles {
        color: #555;
    }

    /* About & Contact */
    .main .about, .main .contact {
        background: #16213e;
    }

    /* Plans */
    .main .plans {
        background: #1a1a2e;
    }
    .main .plans tr {
        border-bottom: 2px solid #2a2a3e;
    }
    .main .plans tr .feats {
        background: #1e2a42;
        color: #d0d0d0;
    }
    .main .plans tr .basic {
        background: #243554;
        color: #d0d0d0;
    }
    .main .plans tr .basic .fa-times-circle {
        color: #666;
    }
    .main .plans tr .pro {
        background: #2d4a6e;
        color: #d0d0d0;
    }

    /* Contact form */
    html #contact form {
        background-color: #1e2a42;
    }
    html #contact form .form-control {
        background-color: #2a3550;
        border-color: #3a4a60;
        color: #e0e0e0;
    }
    html #contact form .form-control::placeholder {
        color: #888;
    }
    html #contact form label {
        color: #b0b0b0;
    }
    .main .contact .row .col-lg-8 button {
        color: #fff;
        background: #2d4a6e;
    }
    .main .contact .row .col-lg-8 button:hover {
        background: #3a5a80;
    }
    .main .contact .row .col-lg-4 a {
        color: #79ade8;
    }
    .main .contact .row .col-lg-4 a:hover {
        color: #a3caf5;
    }

    /* Back to top */
    #backtotop a {
        background-color: rgba(255,255,255,.15);
    }
    #backtotop a:hover {
        background-color: #3a5a80;
    }

    /* Mobile menu */
    @media (max-width:992px) {
        .header-cols .nav-pills {
            background: linear-gradient(180deg, #16213e 0%, #1a2a4a 40%, #1e3355 100%);
            box-shadow: -6px 0 25px rgba(0,0,0,.5);
        }
        .header-cols .nav-pills .nav-link:hover,
        .header-cols .nav-pills .nav-link:focus {
            background: rgba(255,255,255,.08);
        }
        .header-cols .nav-pills .nav-item.last-item {
            border-color: rgba(121,173,232,.4);
        }
        .header-cols .nav-pills .nav-item.last-item:hover {
            background: rgba(121,173,232,.12);
            border-color: #79ade8;
        }
        .menu-overlay.active {
            background: rgba(0,0,0,.55);
        }
    }

    /* Modals */
    .modal-content {
        background-color: #1e2a42;
        border-color: #2a3a52;
    }
    .modal-header {
        border-bottom-color: #2a3a52;
    }
    .modal-footer {
        background: #16213e !important;
        border-top-color: #2a3a52;
    }
    .modal .modal-title {
        color: #e0e0e0;
    }
    .modal .btn-close {
        filter: invert(1) grayscale(100%) brightness(200%);
    }
    .modal .form-control {
        background-color: #2a3550;
        border-color: #3a4a60;
        color: #e0e0e0;
    }
    .modal .form-floating label {
        color: #999;
    }
    .modal .btn-primary {
        background-color: #3a5a80;
        border-color: #3a5a80;
    }
    .modal .btn-primary:hover {
        background-color: #4a6a90;
        border-color: #4a6a90;
    }
    .switch-link { color: #b0b0b0; }
    .switch-link a { color: #79ade8; }

    .auth-msg.error { background: #3a1515; color: #f88; border-color: #5a2020; }
    .auth-msg.ok { background: #153a15; color: #8f8; border-color: #205a20; }

    .pw-toggle { color: #999; }
    .pw-toggle:hover { color: #ddd; background: #2a3550; }

    /* Table in dark mode */
    .table { color: #d0d0d0; }

    /* Form query */
    .header-query {
        background: #16213e;
    }

    .form-query button {
        background-color: #3a5a80;
    }
}