@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/** YUI 3.18.1 **/
html {
    color: #000;
    background: #fff;
    height: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,
img {
    border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

caption,
th {
    text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,
q:after {
    content: "";
}

abbr,
acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: text-top;
}

sub {
    vertical-align: text-bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    *font-size: 100%;
}

legend {
    color: #000;
}

a {
    text-decoration: none;
}

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

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

.kvkk-info-box {
    display: none;
    position: fixed;
    bottom: 30px;
    left: 80px;
    background: #38b6ff;
    padding: 20px 60px 20px 20px;
    color: #ffffff;
    font-size: 14px;
    width: 100%;
    max-width: 600px;
    z-index: 99;
}

    .kvkk-info-box a {
        color: #0f52c0;
    }

    .kvkk-info-box.show {
        display: block;
    }

    .kvkk-info-box .close {
        position: absolute;
        color: #ffffff;
        /*border: 4px solid #ffffff;*/
        right: 0px;
        top: 10px;
    }

        .kvkk-info-box .close:before,
        .kvkk-info-box .close:after {
            background: #ffffff;
        }

    .kvkk-info-box .circle-close[data-animation="showShadow"]:not(.showShadow):hover {
        box-shadow: 0px 0px 0px 6px #ffffff inset;
    }

.page-header-empty {
    width: 100%;
    height: 150px;
    background: #23262D;
    background: linear-gradient(180deg, rgba(35, 38, 45, 1) 20%, rgba(35, 38, 45, 0) 95%);
}

.page-404-action {
    padding: 20px 0 50px 0;
    text-align: center;
}

.page-404-content {
    padding-top: 50px;
    text-align: center;
}

    .page-404-content img {
        width: 100%;
        max-width: 800px;
    }

.page-404-action a {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    line-height: 45px;
    color: #ffffff;
    border: solid 1px #0f52c0;
    display: inline-block;
    background-color: #0f52c0;
    height: 45px;
    padding: 0 50px;
    border-radius: 25px;
    margin-top: 50px;
    transition: all 0.3s ease-in-out;
}

    .page-404-action a.sending {
        opacity: .6;
        pointer-events: none;
        color: #000;
    }

    .page-404-action a .load {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        background: inherit;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: inherit
    }

        .page-404-action a .load::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            border: 3px solid #fff;
            width: 30px;
            height: 30px;
            border-left: 3px solid transparent;
            border-bottom: 3px solid transparent;
            animation: loading1 1s ease infinite;
            z-index: 10
        }

        .page-404-action a .load::before {
            content: '';
            position: absolute;
            border-radius: 50%;
            border: 3px dashed #fff;
            width: 30px;
            height: 30px;
            border-left: 3px solid transparent;
            border-bottom: 3px solid transparent;
            animation: loading1 2s linear infinite;
            z-index: 5
        }

@keyframes loading1 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.page-404-action a.active {
    transform: scale(.85)
}

.page-404-action a.sending .loading {
    visibility: visible;
    opacity: 1
}

.page-404-action a .loading {
    opacity: 0;
    visibility: hidden
}


.page-404-action a svg {
    margin-left: 10px;
    stroke: #ffffff;
    transition: all 0.3s ease-in-out;
}

.page-404-action a:hover {
    background-color: #ffffff;
    color: #000000;
}

    .page-404-action a:hover svg {
        transform: translate(10px, -5px);
    }


.verify-page-status {
    text-align: center;
    padding: 100px 0;
    font-size: 24px;
}


#verify-page #page-cover {
    width: 100%;
}

    #verify-page #page-cover .page-cover {
        width: 100%;
        height: 550px;
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }

        #verify-page #page-cover .page-cover .container {
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
            padding-bottom: 50px;
            position: relative;
            z-index: 11;
        }

            #verify-page #page-cover .page-cover .container p {
                font-size: 40px;
                font-weight: 700;
                line-height: 1.2em;
                color: #ffffff;
                width: 60%;
            }

            #verify-page #page-cover .page-cover .container img {
                width: 100%;
            }

@media screen and (max-width: 767px) {
    #verify-page #page-cover .page-cover .container {
        padding-bottom: 50px;
    }

        #verify-page #page-cover .page-cover .container p {
            width: 100%;
            font-size: 24px;
        }
}

#verify-page #page-cover .page-cover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 10;
}

@media only screen and (max-width: 767px) {

    .kvkk-info-box {
        position: fixed;
        bottom: 30px;
        left: 20px;
        padding: 10px 45px 10px 10px;
        width: calc(100% - 40px);
    }

        .kvkk-info-box .close {
            right: -10px;
        }
}

.checkbox-wrapper-28 {
    --size: 25px;
    position: relative;
    margin-top: 50px;
}

.checkbox-wrapper-28 *,
.checkbox-wrapper-28 *:before,
.checkbox-wrapper-28 *:after {
    box-sizing: border-box;
}

.checkbox-wrapper-28 .promoted-input-checkbox {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.checkbox-wrapper-28 input:checked ~ svg {
    height: calc(var(--size) * 0.6);
    -webkit-animation: draw-checkbox-28 ease-in-out 0.2s forwards;
    animation: draw-checkbox-28 ease-in-out 0.2s forwards;
}

.checkbox-wrapper-28 label:active::after {
    background-color: #e6e6e6;
}

.checkbox-wrapper-28 label {
    color: #0080d3;
    line-height: var(--size);
    cursor: pointer;
    position: relative;
}

.checkbox-wrapper-28 label:after {
    content: "";
    height: var(--size);
    width: var(--size);
    margin-right: 8px;
    float: left;
    border: 2px solid #0080d3;
    border-radius: 3px;
    transition: 0.15s all ease-out;
}

.checkbox-wrapper-28 svg {
    stroke: #0080d3;
    stroke-width: 3px;
    height: 0;
    width: calc(var(--size) * 0.6);
    position: absolute;
    left: calc(var(--size) * 0.21);
    top: calc(var(--size) * 0.2);
    stroke-dasharray: 33;
}

@-webkit-keyframes draw-checkbox-28 {
     0% {
         stroke-dashoffset: 33;
     }

     100% {
         stroke-dashoffset: 0;
     }
 }
@keyframes draw-checkbox-28 {
     0% {
         stroke-dashoffset: 33;
     }

     100% {
         stroke-dashoffset: 0;
     }
 }

.circle-close {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 4px solid #0f52c0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    display: inline-block;
    margin: 10px 20px;
}

    .circle-close:after {
        width: 24px;
        height: 4px;
        background-color: #0f52c0;
        content: "";
        left: 50%;
        top: 50%;
        margin-left: -12px;
        margin-top: -2px;
        position: absolute;
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        /*@include transform-origin(100%,100%);*/
    }

    .circle-close:before {
        left: 50%;
        top: 50%;
        margin-left: -12px;
        margin-top: -2px;
        width: 24px;
        height: 4px;
        background-color: #0f52c0;
        content: "";
        position: absolute;
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        /*@include transform-origin(0%,0%);*/
    }

    .circle-close[data-animation="showShadow"] {
        -moz-box-shadow: 0px 0px 0px 0px #0f52c0 inset;
        -webkit-box-shadow: 0px 0px 0px 0px #0f52c0 inset;
        box-shadow: 0px 0px 0px 0px #0f52c0 inset;
        -moz-transition: cubic-bezier(0.175, 0.885, 0.52, 1.775) 200ms;
        -o-transition: cubic-bezier(0.175, 0.885, 0.52, 1.775) 200ms;
        -webkit-transition: cubic-bezier(0.175, 0.885, 0.52, 1.775) 200ms;
        transition: cubic-bezier(0.175, 0.885, 0.52, 1.775) 200ms;
        border: 0px solid white;
    }

        .circle-close[data-animation="showShadow"]:before, .circle-close[data-animation="showShadow"]:after {
            -moz-transition: cubic-bezier(0.175, 0.885, 0.52, 1.775) 200ms;
            -o-transition: cubic-bezier(0.175, 0.885, 0.52, 1.775) 200ms;
            -webkit-transition: cubic-bezier(0.175, 0.885, 0.52, 1.775) 200ms;
            transition: cubic-bezier(0.175, 0.885, 0.52, 1.775) 200ms;
        }

        .circle-close[data-animation="showShadow"]:not(.showShadow):hover {
            -moz-box-shadow: 0px 0px 0px 6px #0f52c0 inset;
            -webkit-box-shadow: 0px 0px 0px 6px #0f52c0 inset;
            box-shadow: 0px 0px 0px 6px #0f52c0 inset;
        }

            .circle-close[data-animation="showShadow"]:not(.showShadow):hover:before {
                -moz-transform: scale(0.7) rotate(45deg);
                -ms-transform: scale(0.7) rotate(45deg);
                -webkit-transform: scale(0.7) rotate(45deg);
                transform: scale(0.7) rotate(45deg);
                -moz-transition-delay: 100ms;
                -o-transition-delay: 100ms;
                -webkit-transition-delay: 100ms;
                transition-delay: 100ms;
            }

            .circle-close[data-animation="showShadow"]:not(.showShadow):hover:after {
                -moz-transform: scale(0.7) rotate(-45deg);
                -ms-transform: scale(0.7) rotate(-45deg);
                -webkit-transform: scale(0.7) rotate(-45deg);
                transform: scale(0.7) rotate(-45deg);
                -moz-transition-delay: 100ms;
                -o-transition-delay: 100ms;
                -webkit-transition-delay: 100ms;
                transition-delay: 100ms;
            }

    .circle-close.showShadow {
        -moz-transition: ease-out 300ms;
        -o-transition: ease-out 300ms;
        -webkit-transition: ease-out 300ms;
        transition: ease-out 300ms;
        -moz-transform: scale(0);
        -ms-transform: scale(0);
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }




aside {
    background-color: #fff;
    min-height: 100vh;
    border-right: solid 1px #e5e5e5;
    position: relative;
    padding: 20px 10px;
}

    aside .content {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

        aside .content .logo {
            padding-bottom: 20px;
        }

            aside .content .logo a {
                display: inline-block;
            }

                aside .content .logo a > div {
                    display: table;
                    width: 100%;
                }

                    aside .content .logo a > div .figure {
                        display: table-cell;
                        width: 40px;
                        font-size: 36px;
                        vertical-align: middle;
                    }

                        aside .content .logo a > div .figure img {
                            width: 48px;
                            display: inline-block;
                            vertical-align: top;
                            margin-right: 8px;
                        }

                    aside .content .logo a > div .text {
                        vertical-align: middle;
                    }

                        aside .content .logo a > div .text .brand {
                            color: #333;
                            font-weight: 800;
                            font-size: 24px;
                            display: block;
                            line-height: 30px;
                        }

                        aside .content .logo a > div .text .spot {
                            color: #333;
                            font-weight: 500;
                            font-size: 12px;
                            display: block;
                            text-align: center;
                            line-height: 12px;
                        }

        aside .content .menu {
            width: 100%;
            padding: 10px 0px;
        }

            aside .content .menu nav {
                height: 100%;
            }

                aside .content .menu nav h4 {
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 1.5em;
                    color: #222;
                    margin-top: 10px;
                    margin-bottom: 5px;
                    padding: 5px 10px;
                    background-color: #f1f1f1;
                }

                aside .content .menu nav a {
                    font-size: 14px;
                    font-weight: 500;
                    line-height: 2em;
                    color: #3f3f46;
                    display: block;
                    margin: 2px 0;
                    border-radius: 5px;
                    padding: 5px;
                }

                    aside .content .menu nav a:hover {
                        background-color: #f6f6f6;
                    }

                    aside .content .menu nav a.logout {
                        background-color: #ffe8e8;
                    }

                    aside .content .menu nav a i {
                        margin-right: 5px;
                    }

header {
    background-color: transparent;
    position: fixed;
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: 100px;
    padding: 20px 0;
    z-index: 99;
    transition: all 0.3s ease-in-out;
}

    header > .container {
        display: flex;
        justify-content: space-between;
    }

@media screen and (max-width: 767px) {
    header > .container {
        justify-content: space-between;
        margin-right: 60px;
    }
}

header > .container .logo {
    width: 150px;
}

    header > .container .logo a {
        height: 60px;
        display: block;
        position: relative;
    }

        header > .container .logo a img {
            height: 100%;
            transition: all 0.3s ease-in-out;
        }

            header > .container .logo a img.colorful {
                display: none;
            }

            header > .container .logo a img.white {
                display: block;
            }

header > .container .menu {
    background-color: transparent;
    position: relative;
    width: 100%;
}

@media screen and (max-width: 767px) {
    header > .container .menu {
        height: 100vh;
        z-index: 99;
    }
}

header > .container .menu .mobile-menu {
    display: none;
    position: relative;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    header > .container .menu .mobile-menu {
        left: -80px;
        display: block;
        top: -10px;
    }
}

header > .container .menu .mobile-menu img:last-child {
    display: none;
}

@media screen and (max-width: 767px) {
    header > .container .menu {
        position: absolute;
        width: 100%;
        background-color: #000000;
        right: -100%;
        top: 0px;
        padding: 30px 20px;
        transition: all 0.3s ease-in-out;
    }

        header > .container .menu .mobile-menu-close {
            display: none;
        }

        header > .container .menu.open {
            right: 0;
        }

            header > .container .menu.open .mobile-menu {
                left: 20px;
                top: -10px;
            }

                header > .container .menu.open .mobile-menu img:first-child {
                    display: none;
                }

                header > .container .menu.open .mobile-menu img:last-child {
                    display: block;
                }
}

header > .container .menu .mobile-menu-close {
    display: none;
    margin-top: 30px;
    margin-left: 20px;
    position: relative;
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    header > .container .menu .mobile-menu-close {
        display: block;
        background: transparent;
        border: none;
    }
}

header > .container .menu > ul {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: center;
    height: 60px;
    align-items: center;
}

@media screen and (max-width: 767px) {
    header > .container .menu > ul {
        flex-wrap: wrap;
    }
}

header > .container .menu > ul > li {
    position: relative;
    padding: 0 30px;
}

@media screen and (max-width: 767px) {
    header > .container .menu > ul > li {
        width: 100%;
    }
}

header > .container .menu > ul > li > a {
    font-size: 16px;
    font-weight: 500;
    line-height: 1em;
    color: #ffffff;
    display: block;
    padding: 10px 0;
}

@media screen and (max-width: 767px) {
    header > .container .menu > ul > li > a {
        font-size: 1.5em;
        margin: 5px 0;
    }
}

header > .container .menu > ul > li > ul {
    display: none;
    left: 0;
    top: 30px;
    background-color: #ffffff;
    width: 100%;
    max-width: 250px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding: 10px 0;
    box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.1490196078);
}

@media screen and (max-width: 767px) {
    header > .container .menu > ul > li > ul {
        flex-wrap: wrap;
        top: -10px;
        position: relative;
        background-color: transparent;
        color: #ffffff !important;
    }
}

header > .container .menu > ul > li > ul > li {
    padding: 0 20px;
    width: 100%;
}

@media screen and (max-width: 767px) {
    header > .container .menu > ul > li > ul > li {
        width: 100%;
    }
}

header > .container .menu > ul > li > ul > li > a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1em;
    color: #000000;
    display: block;
    padding: 10px 0;
}

@media screen and (max-width: 767px) {
    header > .container .menu > ul > li > ul > li > a {
        font-size: 1.5em;
        margin: 5px 0;
        color: #ffffff;
    }
}

header > .container .menu > ul > li:hover ul {
    display: flex;
}

header > .container .search {
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    header > .container .search span {
        color: #ffffff;
        display: inline-block;
        margin-right: 10px;
        font-size: 14px;
        font-weight: 500;
        line-height: 1em;
        color: #ffffff;
    }

    header > .container .search svg {
        width: 24px;
        height: 24px;
        stroke: #ffffff;
    }

header > .container .language {
    width: 70px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 0 10px;
    transition: all 0.2s ease-in-out;
    font-size: 14px;
    font-weight: 500;
    line-height: 60px;
    color: #ffffff;
}

    header > .container .language > div {
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
        right: 0;
        height: 60px;
        width: 50px;
        cursor: pointer;
    }

        header > .container .language > div ul {
            display: none;
        }

            header > .container .language > div ul li a {
                font-size: 14px;
                font-weight: 500;
                line-height: 35px;
                color: #ffffff;
                height: 35px;
                display: block;
            }

                header > .container .language > div ul li a:hover {
                    color: #54c1dc !important;
                }

        header > .container .language > div:hover {
            background: #3d3d3d;
            border-color: #3d3d3d;
            color: #ffffff;
            height: auto;
            min-height: 50px;
        }

            header > .container .language > div:hover ul {
                display: block;
            }

header > .container .login {
    width: 150px;
    height: 60px;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    header > .container .login {
        display: none;
    }
}

header > .container .login a {
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    color: #ffffff;
    display: inline-block;
    background-color: #38b6ff;
    border: solid 1px #38b6ff;
    height: 40px;
    padding: 0 40px;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

    header > .container .login a:hover {
        background-color: white;
        color: #000000;
    }

header.sticky {
    background-color: #ffffff;
    padding: 10px 0;
    height: 70px;
    box-shadow: 0px 3px 14px 1px rgba(0, 0, 0, 0.1490196078);
}

    header.sticky .container .logo a {
        height: 50px;
    }

        header.sticky .container .logo a img.colorful {
            display: block;
        }

        header.sticky .container .logo a img.white {
            display: none;
        }

    header.sticky .container .menu .mobile-menu {
        top: -18px;
    }

        header.sticky .container .menu .mobile-menu img:first-child {
            filter: invert(1);
        }

    header.sticky .container .menu ul li a {
        color: #000000;
    }

@media screen and (max-width: 767px) {
    header.sticky .container .menu ul li a {
        color: #ffffff;
    }
}

header.sticky .container .search span {
    color: #000000;
}

header.sticky .container .search svg {
    stroke: #000000;
}

header.sticky .container .language {
    color: #000000;
}

header .search-content {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-right: 10%;
    background: rgba(65, 65, 65, 0.92);
    top: 0;
    right: 0;
    z-index: 105;
    transition: none;
    left: 0;
    bottom: 0;
}

@media screen and (max-width: 767px) {
    header .search-content {
        padding-left: 20px;
        padding-right: 20px;
    }
}

header .search-content .search-close {
    font-size: 40px;
    position: absolute;
    right: 20px;
    top: 20px;
    color: #ffffff;
    cursor: pointer;
}

header .search-content input {
    width: calc(100% - 80px);
    margin-top: 300px;
    height: 80px;
    float: left;
    background: transparent;
    line-height: 80px;
    padding: 0 20px;
    font-size: 24px;
    color: #ffffff;
    border: solid 2px #ffffff;
}

    header .search-content input::placeholder {
        color: #ffffff;
        font-weight: 900;
    }

header .search-content button {
    float: right;
    color: #000000;
    border: solid 1px #ffffff;
    background-color: #ffffff;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
    padding: 0 15px;
    cursor: pointer;
    text-align: center;
    width: 80px;
    margin-top: 300px;
}

    header .search-content button:hover {
        color: #000;
    }

footer {
    background-color: #23262d;
    position: relative;
    width: 100%;
    padding-top: 100px;
}

@media screen and (max-width: 767px) {
    footer {
        padding-top: 50px;
    }
}

footer .container .content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

    footer .container .content .left-content {
        display: flex;
        flex-wrap: wrap;
        width: 50%;
    }

@media screen and (max-width: 767px) {
    footer .container .content .left-content {
        width: 100%;
    }
}

footer .container .content .left-content > figure {
    width: 50%;
}

@media screen and (max-width: 767px) {
    footer .container .content .left-content > figure {
        width: 100%;
        text-align: center;
    }
}

footer .container .content .left-content > figure .logo {
    height: 65px;
    display: block;
}

footer .container .content .left-content > figure .spot {
    height: 25px;
    display: block;
    margin-top: 30px;
}

@media screen and (max-width: 767px) {
    footer .container .content .left-content > figure .spot {
        width: 100%;
        height: auto;
    }
}

footer .container .content .left-content > .contact {
    width: 100%;
    padding-top: 50px;
}

@media screen and (max-width: 767px) {
    footer .container .content .left-content > .contact {
        width: 100%;
        padding-left: 0;
        margin-top: 50px;
    }
}

footer .container .content .left-content > .contact nav {
    margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
    footer .container .content .left-content > .contact nav {
        display: none;
    }
}

footer .container .content .left-content > .contact nav a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1em;
    color: #ffffff;
    display: inline-block;
    margin: 0 10px;
}

    footer .container .content .left-content > .contact nav a:first-child {
        margin-left: 0;
    }

footer .container .content .left-content > .contact .contactus {
    display: grid;
    grid-template-columns: 1fr;
}

@media screen and (max-width: 767px) {
    footer .container .content .left-content > .contact .contactus {
        grid-template-columns: 1fr;
        row-gap: 50px;
        text-align: center;
    }
}

footer .container .content .left-content > .contact .contactus address h6 {
    font-size: 14px;
    font-weight: 300;
    line-height: 1em;
    color: #999999;
    margin-bottom: 10px;
}

footer .container .content .left-content > .contact .contactus address p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5em;
    color: #ffffff;
    display: inline-block;
}

footer .container .content .left-content > .contact .contactus .call-write {
    margin-top: 40px;
}

    footer .container .content .left-content > .contact .contactus .call-write h6 {
        font-size: 14px;
        font-weight: 300;
        line-height: 1em;
        color: #999999;
        margin-bottom: 10px;
    }

    footer .container .content .left-content > .contact .contactus .call-write a {
        font-size: 14px;
        font-weight: 500;
        line-height: 1em;
        color: #ffffff;
        display: inline-block;
    }

footer .container .content .left-content > .contact .socials {
    margin-top: 30px;
}

@media screen and (max-width: 767px) {
    footer .container .content .left-content > .contact .socials {
        margin-top: 0px;
    }
}

footer .container .content .left-content > .contact .socials a {
    display: inline-block;
    background-color: #0f52c0;
    color: #23262d;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    margin: 0 10px;
    transition: all 0.3s ease-in-out;
}

    footer .container .content .left-content > .contact .socials a:first-child {
        margin-left: 0;
    }

    footer .container .content .left-content > .contact .socials a:hover {
        background-color: #ffffff;
    }

footer .container .content .left-content > .certificates {
    width: 100%;
    margin-top: 40px;
}

@media screen and (max-width: 767px) {
    footer .container .content .left-content > .certificates {
        width: 100%;
        text-align: center;
    }
}

footer .container .content .left-content > .certificates a img {
    display: inline-block;
    height: 80px;
}

footer .container .content .right-content {
    display: flex;
    flex-wrap: wrap;
    width: 50%;
}

@media screen and (max-width: 767px) {
    footer .container .content .right-content {
        width: 100%;
    }
}

footer .container .content .right-content > .menus {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 20px;
    width: 100%;
}

@media screen and (max-width: 767px) {
    footer .container .content .right-content > .menus {
        display: none;
    }
}

footer .container .content .right-content > .menus .menu h5 {
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    color: #ffffff;
    margin-bottom: 20px;
}

footer .container .content .right-content > .menus .menu nav {
    margin-bottom: 50px;
}

@media screen and (max-width: 767px) {
    footer .container .content .right-content > .menus .menu nav {
        display: none;
    }
}

footer .container .content .right-content > .menus .menu nav a {
    font-size: 14px;
    font-weight: 500;
    line-height: 1em;
    color: #ffffff;
    display: flex;
    margin: 10px 0;
}

    footer .container .content .right-content > .menus .menu nav a:first-child {
        margin-left: 0;
    }

footer .container .content .right-content > .peopleco {
    text-align: center;
    padding: 70px 0 0;
    width: 100%;
}
footer .container .content .right-content > .peopleco a {
    display: inline-block
}

    footer .container .content .right-content > .peopleco img {
        height: 40px;
    }

footer .container .content .right-content > .partnerships {
    width: 100%;
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media screen and (max-width: 767px) {
    footer .container .content .right-content > .partnerships {
        width: 100%;
        padding-left: 0;
    }
}

footer .container .content .right-content > .partnerships a {
    text-align: center;
}

    footer .container .content .right-content > .partnerships a img {
        max-width: 100%;
        max-height: 60px;
    }

footer .container .content > .footer {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 50px;
}

@media screen and (max-width: 767px) {
    footer .container .content > .footer {
        text-align: center;
    }
}

footer .container .content > .footer .copyright {
    width: 100%;
    font-size: 12px;
    font-weight: 500;
    line-height: 1em;
    color: #747474;
}

footer .container .content > .footer .menu {
    width: 100%;
    text-align: right;
    margin-top: 20px;
}

    footer .container .content > .footer .menu a {
        font-size: 14px;
        font-weight: 500;
        line-height: 1em;
        color: #999999;
        display: inline-block;
        margin: 0 15px;
    }

@media screen and (max-width: 767px) {
    footer .container .content > .footer .menu {
        text-align: center;
    }

        footer .container .content > .footer .menu a {
            margin: 0 10px;
        }
}

footer .container .content > .footer .menu a:last-child {
    margin-right: 0;
}

@media screen and (max-width: 767px) {
    footer .container .content > .footer .menu a:first-child {
        margin-left: 0;
    }
}

footer .container .content > .footer .developby {
    width: 100%;
    margin: 30px 0;
    text-align: right;
}

@media screen and (max-width: 767px) {
    footer .container .content > .footer .developby {
        text-align: center;
    }
}

footer .container .content > .footer .developby img {
    height: 15px;
}

.breadcrumb {
    background-color: #f2f3f9;
}

    .breadcrumb .container {
        padding: 10px 5px;
    }

        .breadcrumb .container a {
            font-size: 12px;
            font-weight: 400;
            line-height: 1em;
            color: #000000;
            display: inline-block;
        }

            .breadcrumb .container a::after {
                content: ">";
                display: inline-block;
                margin: 0 5px;
            }

        .breadcrumb .container span {
            font-size: 12px;
            font-weight: 400;
            line-height: 1em;
            display: inline-block;
        }

    .breadcrumb h1 {
        font-size: 22px;
        font-weight: 700;
        line-height: 1em;
        text-align: center;
        padding: 0px 0 30px;
    }

.login-page {
    background-color: #ffffff;
}

    .login-page section {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .login-page .content {
        width: 500px;
        border: solid 1px #e5e5e5;
        border-radius: 8px;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding: 30px 50px 40px;
    }

@media screen and (max-width: 767px) {
    .login-page .content {
        width: 50%;
    }
}

@media screen and (max-aspect-ratio: 13/9) and (max-width: 1199px) {
    .login-page .content {
        width: 50%;
    }
}

@media screen and (max-aspect-ratio: 13/9) and (min-width: 991px) {
    .login-page .content {
        width: 100%;
    }
}

.login-page .content h1 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1em;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
}

.login-page .content p {
    font-size: 16px;
    font-weight: 500;
    line-height: 1em;
    color: #737373;
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
}

.login-page .content h2 {
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
    display: block;
    text-align: center;
    width: 100%;
    margin: 30px auto;
}

.login-page .content .register-btn {
    font-size: 16px;
    font-weight: 800;
    line-height: 1em;
    color: #000000;
    display: block;
    text-align: center;
    width: 100%;
}

.login-page .content .form-item {
    width: 100%;
    margin-bottom: 20px;
}

    .login-page .content .form-item label {
        font-size: 14px;
        font-weight: 600;
        line-height: 1em;
        display: block;
        margin-bottom: 10px;
    }

    .login-page .content .form-item input {
        font-size: 16px;
        font-weight: 600;
        line-height: 1em;
        border: solid 1px #e5e5e5;
        border-radius: 10px;
        width: 100%;
        height: 50px;
        padding: 0 10px;
    }

.login-page .content .actions {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

    .login-page .content .actions div {
        width: 50%;
        margin-bottom: 30px;
    }

        .login-page .content .actions div:last-child {
            text-align: right;
        }

        .login-page .content .actions div a {
            font-size: 12px;
            font-weight: 400;
            line-height: 1em;
            color: #000000;
        }

    .login-page .content .actions input {
        display: none;
    }

        .login-page .content .actions input + label {
            font-size: 12px;
            font-weight: 400;
            line-height: 1em;
            vertical-align: middle;
        }

            .login-page .content .actions input + label::before {
                content: "";
                display: inline-block;
                width: 15px;
                height: 15px;
                border: solid 1px #e5e5e5;
                vertical-align: middle;
                margin-right: 5px;
            }

        .login-page .content .actions input:checked + label::before {
            background-color: #e5e5e5;
        }

.login-page .content button {
    background-color: #000000;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    color: #ffffff;
    padding: 0 30px;
    border: solid 1px #0f52c0;
    border-radius: 10px;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 30px;
}

.register-page section {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 20px auto;
}

.register-page .content {
    width: 500px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 30px 0px 40px;
}

@media screen and (max-width: 767px) {
    .register-page .content {
        width: 50%;
    }
}

@media screen and (max-aspect-ratio: 13/9) and (max-width: 1199px) {
    .register-page .content {
        width: 50%;
    }
}

@media screen and (max-aspect-ratio: 13/9) and (min-width: 991px) {
    .register-page .content {
        width: 100%;
    }
}

.register-page .content h1 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1em;
    width: 100%;
    margin-bottom: 30px;
    text-align: center;
}

.register-page .content h2 {
    font-size: 20px;
    font-weight: 300;
    line-height: 1em;
    display: block;
    text-align: center;
    width: 100%;
    margin: 50px auto;
}

    .register-page .content h2 a {
        font-size: 20px;
        font-weight: 600;
        line-height: 1em;
        color: #0f52c0;
    }

.register-page .content .register-btn {
    font-size: 16px;
    font-weight: 800;
    line-height: 1em;
    color: #000000;
    display: block;
    text-align: center;
    width: 100%;
}

.register-page .content .form-item {
    margin: 10px 0;
    position: relative;
    width: 100%;
}

    .register-page .content .form-item textarea,
    .register-page .content .form-item input {
        font-size: 14px;
        font-weight: 600;
        line-height: 50px;
        color: #000000;
        border: solid 1px #af99c0;
        color: #000000;
        height: 50px;
        border-radius: 10px;
        background-color: transparent;
        width: 100%;
        z-index: 1;
        padding: 0 30px;
    }

        .register-page .content .form-item textarea.error,
        .register-page .content .form-item input.error {
            border-color: #dd2020;
        }

        .register-page .content .form-item textarea::placeholder,
        .register-page .content .form-item input::placeholder {
            font-size: 14px;
            font-weight: 600;
            line-height: 50px;
            color: #645d67;
        }

        .register-page .content .form-item textarea + label,
        .register-page .content .form-item input + label {
            font-size: 14px;
            font-weight: 600;
            line-height: 50px;
            color: #645d67;
            top: 0px;
            left: 30px;
            z-index: 2;
            color: #8d8d8d;
            position: absolute;
            pointer-events: none;
            transition: all 0.2s ease-in-out;
            display: inline-block;
            padding: 0 5px;
        }

        .register-page .content .form-item textarea:not(:placeholder-shown) + label,
        .register-page .content .form-item textarea:focus + label,
        .register-page .content .form-item input:not(:placeholder-shown) + label,
        .register-page .content .form-item input:focus + label {
            top: -5px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1em;
            color: #645d67;
            background-color: #ffffff;
        }

    .register-page .content .form-item textarea {
        height: 140px;
    }

.register-page .content .actions {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

    .register-page .content .actions div {
        width: 100%;
        margin-bottom: 30px;
    }

        .register-page .content .actions div a {
            font-size: 12px;
            font-weight: 400;
            line-height: 1em;
            color: #000000;
        }

    .register-page .content .actions input {
        display: none;
    }

        .register-page .content .actions input + label {
            font-size: 12px;
            font-weight: 400;
            line-height: 1em;
            vertical-align: middle;
        }

            .register-page .content .actions input + label::before {
                content: "";
                display: inline-block;
                width: 15px;
                height: 15px;
                border: solid 1px #af99c0;
                vertical-align: middle;
                margin-right: 5px;
            }

        .register-page .content .actions input:checked + label::before {
            background-color: #af99c0;
        }

.register-page .content button {
    background-color: #0f52c0;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    font-weight: 700;
    line-height: 40px;
    color: #ffffff;
    padding: 0 30px;
    border: solid 1px #0f52c0;
    border-radius: 10px;
    white-space: nowrap;
    width: 100%;
    margin-bottom: 30px;
}

.register-page .content .terms {
    font-size: 14px;
    font-weight: 400;
    line-height: 1em;
}

    .register-page .content .terms a {
        color: #5877f6;
        text-decoration: underline;
    }

.account-dashboard .container {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
}

    .account-dashboard .container h2 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1em;
        color: #000000;
        margin: 30px 0;
    }

    .account-dashboard .container .content {
        width: calc(100% - 250px);
        padding: 30px 0 50px 30px;
    }

.home-page {
    width: 100%;
}

    .home-page #home-cover {
        width: 100%;
    }

        .home-page #home-cover .home-cover {
            width: 100%;
            height: 100vh;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
        }

@media screen and (max-width: 767px) {
    .home-page #home-cover .home-cover {
        display: none;
    }
}

.home-page #home-cover .home-cover .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

    .home-page #home-cover .home-cover .container p {
        font-size: 150px;
        font-weight: 700;
        line-height: 1em;
        color: #ffffff;
        text-align: left;
        position: relative;
        z-index: 5;
    }

.home-page #home-cover .home-cover img {
    width: 70%;
    position: absolute;
    z-index: 4;
    top: 100px;
    left: 0;
}

.home-page #home-cover .home-cover-mobile {
    display: none;
    width: 100%;
    height: 600px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .home-page #home-cover .home-cover-mobile {
        display: block;
    }
}

.home-page #home-cover .home-cover-mobile .container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

    .home-page #home-cover .home-cover-mobile .container p {
        font-size: 40px;
        font-weight: 700;
        line-height: 1em;
        color: #ffffff;
        text-align: left;
        position: relative;
        z-index: 5;
    }

.home-page #home-cover .home-cover-mobile img {
    width: 70%;
    position: absolute;
    z-index: 4;
    top: 200px;
    left: 0;
}

.home-page #solutions {
    background-color: #23262d;
    width: 100%;
}

    .home-page #solutions .container h3 {
        font-size: 30px;
        font-weight: 600;
        line-height: 1em;
        color: #ffffff;
        padding: 80px 0;
        text-align: center;
    }

@media screen and (max-width: 767px) {
    .home-page #solutions .container h3 {
        font-size: 26px;
        padding: 40px 0;
    }
}

.home-page #solutions .content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 767px) {
    .home-page #solutions .content {
        grid-template-columns: 1fr;
    }
}

.home-page #solutions .content > a {
    display: inline-block;
    height: 400px;
    padding: 30px 50px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

    .home-page #solutions .content > a > div {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 9;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }

        .home-page #solutions .content > a > div img {
            transition: all 0.5s ease-in-out;
            filter: grayscale(1);
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .home-page #solutions .content > a::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        left: 0;
        top: 0;
        z-index: 10;
    }

    .home-page #solutions .content > a span {
        display: block;
        position: relative;
        z-index: 11;
        letter-spacing: 3px;
        font-size: 40px;
        font-weight: 400;
        line-height: 1em;
        color: #dfac51;
    }

    .home-page #solutions .content > a:first-child span {
        color: #38b6ff;
    }

    .home-page #solutions .content > a:last-child span {
        color: #54c1dc;
    }

    .home-page #solutions .content > a h4 {
        display: block;
        position: relative;
        z-index: 11;
        margin: 10px 0 20px 0;
        font-size: 30px;
        font-weight: 800;
        line-height: 1em;
        color: #ffffff;
    }

    .home-page #solutions .content > a img {
        height: 60px;
        position: relative;
        z-index: 11;
    }

    .home-page #solutions .content > a p {
        display: block;
        position: relative;
        z-index: 11;
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5em;
        color: #ffffff;
        transition: all 0.3s ease-in-out;
        margin-top: 100px;
        white-space: pre-line;
    }

    .home-page #solutions .content > a a {
        position: absolute;
        left: 50px;
        bottom: 0;
        z-index: 11;
        font-size: 10px;
        font-weight: 700;
        line-height: 36px;
        color: #000000;
        border: solid 1px #ffffff;
        display: inline-block;
        background-color: #ffffff;
        height: 36px;
        padding: 0 30px;
        border-radius: 25px;
        margin-top: 50px;
        transition: all 0.3s ease-in-out;
        opacity: 0;
    }

        .home-page #solutions .content > a a:hover {
            background-color: transparent;
            color: #ffffff;
        }

    .home-page #solutions .content > a:hover > div img {
        filter: none;
    }

    .home-page #solutions .content > a:hover::after {
        border: solid 3px #38b6ff;
    }

.home-page #about {
    background-color: #ffffff;
    width: 100%;
    padding: 100px 0;
}

@media screen and (max-width: 767px) {
    .home-page #about {
        padding: 60px 0;
    }
}

.home-page #about .container > h3 {
    width: 50%;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.5em;
    color: #000000;
    margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
    .home-page #about .container > h3 {
        font-size: 26px;
        width: 100%;
    }
}

.home-page #about .container .content {
    display: grid;
    column-gap: 50px;
    grid-template-columns: 1fr 1fr;
    align-items: flex-start;
}

@media screen and (max-width: 767px) {
    .home-page #about .container .content {
        grid-template-columns: 1fr;
    }
}

.home-page #about .container .content > figure {
    overflow: hidden;
    border-radius: 5px;
}

@media screen and (max-width: 767px) {
    .home-page #about .container .content > figure {
        margin-bottom: 30px;
    }
}

.home-page #about .container .content > figure img {
    width: 100%;
    display: block;
    transition: all 0.4s ease-in-out;
}

.home-page #about .container .content > figure:hover img {
    transform: scale(1.1);
}

.home-page #about .container .content > div .action {
    font-size: 16px;
    font-weight: 500;
    line-height: 45px;
    color: #23262d;
    border: solid 1px #0f52c0;
    display: inline-block;
    background-color: #ffffff;
    height: 45px;
    padding: 0 30px;
    border-radius: 25px;
    margin-top: 50px;
    transition: all 0.3s ease-in-out;
}

    .home-page #about .container .content > div .action svg {
        margin-left: 10px;
        stroke: #23262d;
        transition: all 0.3s ease-in-out;
    }

    .home-page #about .container .content > div .action:hover {
        color: #ffffff;
        background-color: #38b6ff;
    }

        .home-page #about .container .content > div .action:hover svg {
            transform: translate(10px, -5px);
            stroke: #ffffff;
        }

.home-page #blog {
    background-color: #23262d;
    width: 100%;
    padding: 80px 0 100px;
}

    .home-page #blog .container .header {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin-bottom: 40px;
    }


.home-page #blog .container .header h3 {
    font-size: 40px;
    font-weight: 500;
    line-height: 1.1em;
    color: #ffffff;
}

.home-page #blog .container .header .action {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
}

    .home-page #blog .container .header .action a {
        font-size: 16px;
        font-weight: 500;
        line-height: 45px;
        color: #ffffff;
        border: solid 1px #0f52c0;
        display: inline-block;
        background-color: #0f52c0;
        height: 45px;
        padding: 0 50px;
        border-radius: 25px;
        margin-top: 50px;
        transition: all 0.3s ease-in-out;
    }

@media screen and (max-width: 767px) {
    .home-page #blog .container .header .action a {
        margin-top: 50px;
    }
}
        .home-page #blog .container .header .action a svg {
            margin-left: 10px;
            stroke: #ffffff;
            transition: all 0.3s ease-in-out;
        }

        .home-page #blog .container .header .action a:hover {
            background-color: #ffffff;
            color: #000000;
        }

            .home-page #blog .container .header .action a:hover svg {
                transform: translate(10px, -5px);
            }

.home-page #blog .container .content .blog-slider div {
    z-index: 5;
    position: relative;
}

    .home-page #blog .container .content .blog-slider div::before {
        content: "";
        position: absolute;
        background-color: #44464c;
        z-index: 1;
        inline-size: 1px;
        block-size: 100%;
        inset-block-start: 0;
        inset-inline-start: -20px;
    }

    .home-page #blog .container .content .blog-slider div:first-child::before {
        content: none;
    }

    .home-page #blog .container .content .blog-slider div a {
        display: block;
    }

        .home-page #blog .container .content .blog-slider div a figure {
            overflow: hidden;
            border-radius: 8px;
        }

            .home-page #blog .container .content .blog-slider div a figure img {
                width: 100%;
                display: block;
                transition: all 0.4s ease-in-out;
            }

            .home-page #blog .container .content .blog-slider div a figure:hover img {
                transform: scale(1.1);
            }

        .home-page #blog .container .content .blog-slider div a h5 {
            margin-top: 20px;
            font-size: 22px;
            font-weight: 600;
            line-height: 1.3em;
            color: #ffffff;
        }

.home-page #blog .container .content #blog-slider-dots.owl-dots {
    text-align: center;
    bottom: 20px;
    margin-top: 20px;
}

    .home-page #blog .container .content #blog-slider-dots.owl-dots .owl-dot {
        width: 12px;
        height: 12px;
        border: solid 1px #ffffff;
        border-radius: 50%;
        background: #fff;
        display: inline-block;
        margin: 0 3px;
        cursor: pointer;
    }

        .home-page #blog .container .content #blog-slider-dots.owl-dots .owl-dot.active,
        .home-page #blog .container .content #blog-slider-dots.owl-dots .owl-dot:hover {
            background: #38b6ff;
            border-color: #38b6ff;
        }

.home-page #customer-comments {
    background-color: #ffffff;
    width: 100%;
    padding: 150px 0 100px;
}

@media screen and (max-width: 767px) {
    .home-page #customer-comments {
        padding: 80px 0;
    }
}

.home-page #customer-comments .container .content {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    .home-page #customer-comments .container .content {
        flex-wrap: wrap;
    }
}

.home-page #customer-comments .container .content > figure {
    width: 250px;
}

@media screen and (max-width: 767px) {
    .home-page #customer-comments .container .content > figure {
        width: 100%;
        text-align: center;
    }
}

.home-page #customer-comments .container .content div.item {
    width: calc(100% - 250px);
    display: flex;
    flex-wrap: wrap;
    padding-left: 100px;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .home-page #customer-comments .container .content div.item {
        width: 100%;
        padding-left: 0;
        margin-top: 50px;
    }
}

.home-page #customer-comments .container .content div.item p {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.5em;
    color: #000000;
    border-bottom: solid 1px #cfcaca;
    padding-bottom: 30px;
    margin-bottom: 30px;
    width: 100%;
}
@media screen and (max-width: 767px) {
    .home-page #customer-comments .container .content div.item p {
        font-size: 20px;
    }
}
.home-page #customer-comments .container .content div.item > div {
    display: flex;
    width: 100%;
}

    .home-page #customer-comments .container .content div.item > div figure {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
    }

        .home-page #customer-comments .container .content div.item > div figure img {
            width: 100%;
        }

    .home-page #customer-comments .container .content div.item > div div {
        padding-left: 40px;
        width: calc(100% - 80px);
    }

        .home-page #customer-comments .container .content div.item > div div h6 {
            font-size: 20px;
            font-weight: 600;
            line-height: 1em;
            color: #5b5b5b;
            padding: 10px 0;
        }

        .home-page #customer-comments .container .content div.item > div div span {
            font-size: 16px;
            font-weight: 400;
            line-height: 1em;
            color: #5b5b5b;
        }

.home-page #references {
    background-color: #ffffff;
    width: 100%;
    padding: 50px 0 100px;
}

    .home-page #references .references-slider img {
        width: 100%;
        filter: grayscale(1);
        transition: all 0.3s ease-in-out;
    }

        .home-page #references .references-slider img:hover {
            filter: none;
        }

    .home-page #references .references-slider #reference-slider-dots.owl-dots {
        text-align: center;
        bottom: 20px;
        margin-top: 20px;
    }

        .home-page
        #references
        .references-slider
        #reference-slider-dots.owl-dots
        .owl-dot {
            width: 12px;
            height: 12px;
            border: solid 1px #aaaaaa;
            border-radius: 50%;
            background: #fff;
            display: inline-block;
            margin: 0 3px;
            cursor: pointer;
        }

            .home-page
            #references
            .references-slider
            #reference-slider-dots.owl-dots
            .owl-dot.active,
            .home-page
            #references
            .references-slider
            #reference-slider-dots.owl-dots
            .owl-dot:hover {
                background: #aaaaaa;
                border-color: #aaaaaa;
            }

.html-page {
    width: 100%;
}

    .html-page #page-cover {
        width: 100%;
    }

        .html-page #page-cover .page-cover {
            width: 100%;
            height: 550px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

            .html-page #page-cover .page-cover .container {
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;
                padding-bottom: 50px;
                position: relative;
                z-index: 11;
            }

                .html-page #page-cover .page-cover .container p {
                    font-size: 40px;
                    font-weight: 700;
                    line-height: 1.2em;
                    color: #ffffff;
                    width: 60%;
                }

                .html-page #page-cover .page-cover .container img {
                    width: 100%;
                }

@media screen and (max-width: 767px) {
    .html-page #page-cover .page-cover .container {
        padding-bottom: 50px;
    }

        .html-page #page-cover .page-cover .container p {
            width: 100%;
            font-size: 30px;
        }
}

.html-page #page-cover .page-cover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 10;
}

.html-page > section {
    width: 100%;
}

.html-page .dark {
    background-color: #23262d;
    color: #ffffff;
}

    .html-page .dark a {
        color: #ffffff;
    }

.html-page .text-content {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .html-page .text-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 767px) {
    .html-page .text-content .content {
        padding-left: 0;
        padding-right: 0;
    }
}

.html-page .text-content .content p {
    color: #999999;
    margin: 20px 0;
}

.html-page .list-content {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .html-page .list-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.html-page .list-content .header {
    padding-left: 40%;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2em;
    color: #000000;
}

@media screen and (max-width: 767px) {
    .html-page .list-content .header {
        padding-left: 0;
        font-size: 26px;
    }
}

.html-page .list-content .header b,
.html-page .list-content .header strong {
    font-weight: 700;
}

.html-page .list-content .subtitle {
    padding-left: 40%;
    margin-top: 30px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2em;
    color: #000000;
}

@media screen and (max-width: 767px) {
    .html-page .list-content .subtitle {
        padding-left: 0;
        font-size: 22px;
        text-align: center;
    }
}

.html-page .list-content ul {
    width: 100%;
    margin-top: 70px;
}

@media screen and (max-width: 767px) {
    .html-page .list-content ul {
        margin-top: 10px;
    }
}

.html-page .list-content ul li {
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    align-content: center;
    padding: 80px 30px;
    background-size: cover;
    border-radius: 8px;
    transition: background-image 0.8s ease-in-out;
}

@media screen and (max-width: 767px) {
    .html-page .list-content ul li {
        flex-wrap: wrap;
        padding: 20px 0;
        margin-bottom: 40px;
    }
}

.html-page .list-content ul li .title {
    width: 40%;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2em;
    color: #000000;
}

    .html-page .list-content ul li .title b,
    .html-page .list-content ul li .title strong {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2em;
        color: #000000;
    }

@media screen and (max-width: 767px) {
    .html-page .list-content ul li .title {
        width: 100%;
        font-size: 24px;
        margin-bottom: 30px;
    }

        .html-page .list-content ul li .title b,
        .html-page .list-content ul li .title strong {
            font-size: 24px;
        }
}

.html-page .list-content ul li .desc {
    width: 40%;
    padding-right: 50px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #5b5b5b;
}

@media screen and (max-width: 767px) {
    .html-page .list-content ul li .desc {
        width: 100%;
        padding-right: 0;
    }
}

.html-page .list-content ul li .action {
    width: 20%;
}

@media screen and (max-width: 767px) {
    .html-page .list-content ul li .action {
        width: 100%;
        margin-top: 30px;
    }
}

.html-page .list-content ul li .action a {
    font-size: 16px;
    font-weight: 500;
    line-height: 45px;
    color: #23262d;
    border: solid 1px #000000;
    display: inline-block;
    background-color: #ffffff;
    height: 45px;
    padding: 0 15px;
    border-radius: 25px;
    transition: all 0.2s ease-in-out;
}

    .html-page .list-content ul li .action a svg {
        margin-left: 10px;
        stroke: #23262d;
        transition: all 0.3s ease-in-out;
    }

    .html-page .list-content ul li .action a:hover {
        background-color: #38b6ff;
        border-color: #38b6ff;
    }

        .html-page .list-content ul li .action a:hover svg {
            transform: translate(5px, -5px);
        }

.html-page .list-content ul li:hover {
    background-image: var(--bg-image);
}

    .html-page .list-content ul li:hover .title {
        color: #38b6ff;
    }

        .html-page .list-content ul li:hover .title b,
        .html-page .list-content ul li:hover .title strong {
            color: #38b6ff;
        }

    .html-page .list-content ul li:hover .desc {
        color: #ffffff;
    }

.html-page .list-content.dark {
    color: #ffffff;
}

    .html-page .list-content.dark .header {
        color: #ffffff;
    }

        .html-page .list-content.dark .header b,
        .html-page .list-content.dark .header strong {
            color: #ffffff;
        }

    .html-page .list-content.dark .subtitle {
        color: #ffffff;
    }

    .html-page .list-content.dark ul li .title {
        color: #ffffff;
    }

        .html-page .list-content.dark ul li .title b,
        .html-page .list-content.dark ul li .title strong {
            color: #ffffff;
        }

    .html-page .list-content.dark ul li .desc {
        color: #999999;
    }

.html-page .team-content {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .html-page .team-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.html-page .team-content .container .header {
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
    color: #000000;
}

    .html-page .team-content .container .header b,
    .html-page .team-content .container .header strong {
        font-weight: 600;
    }

@media screen and (max-width: 767px) {
    .html-page .team-content .container .header {
        font-size: 28px;
    }
}

.html-page .team-content .container .team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    row-gap: 50px;
    margin-top: 50px;
}

@media screen and (max-width: 767px) {
    .html-page .team-content .container .team {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 50px;
    }
}

.html-page .team-content .container .team .person figure {
    border-radius: 8px;
    overflow: hidden;
}

    .html-page .team-content .container .team .person figure img {
        display: block;
        width: 100%;
        transition: all 0.4s ease-in-out;
    }

    .html-page .team-content .container .team .person figure:hover img {
        transform: scale(1.1);
    }

.html-page .team-content .container .team .person .info h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.html-page .team-content .container .team .person .info span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5em;
    color: #999999;
}

.html-page .team-content .container .team .person .info a {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5em;
    color: #999999;
}

    .html-page .team-content .container .team .person .info a:hover {
        color: #38b6ff;
    }

.html-page .team-content .container .team .person .info .social {
    padding-top: 10px;
}

    .html-page .team-content .container .team .person .info .social a {
        font-size: 24px;
        font-weight: 500;
        line-height: 1em;
        color: #999999;
        font-style: normal;
    }

        .html-page .team-content .container .team .person .info .social a:hover {
            color: #38b6ff;
        }

        .html-page .team-content .container .team .person .info .social a i {
            font-style: normal;
        }

.html-page .team-content.dark .container .header {
    color: #ffffff;
}

.html-page .accordion-content {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .html-page .accordion-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.html-page .accordion-content .header {
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
    color: #000000;
}

    .html-page .accordion-content .header b,
    .html-page .accordion-content .header strong {
        font-weight: 600;
    }

@media screen and (max-width: 767px) {
    .html-page .accordion-content .header {
        font-size: 28px;
    }
}

.html-page .accordion-content .accordion-list {
    margin-top: 10px;
}

    .html-page .accordion-content .accordion-list .accordion-detail {
        overflow: hidden;
        height: 0;
        padding: 0;
        transition: all 0.3s ease-in-out;
    }

        .html-page .accordion-content .accordion-list .accordion-detail.open {
            height: auto;
            padding: 40px 0 20px 0px;
        }

    .html-page .accordion-content .accordion-list h4 {
        font-size: 18px;
        font-weight: 600;
        line-height: 1em;
        color: #000000;
        cursor: pointer;
        padding: 20px 0;
    }


        .html-page .accordion-content .accordion-list h4 svg {
            transition: all 0.3s ease-in-out;
            float: right;
            width: 34px;
            height: 34px;
            stroke: #000000;
            fill: #000000;
        }

            .html-page .accordion-content .accordion-list h4 svg path {
                fill: #000000;
            }

        .html-page .accordion-content .accordion-list h4.open i {
            transform: rotate(180deg);
        }

        .html-page .accordion-content .accordion-list h4.open .accordion-icon,
        .html-page .accordion-content .accordion-list h4.open .title-style-1 span,
        .html-page .accordion-content .accordion-list h4:hover .accordion-icon,
        .html-page .accordion-content .accordion-list h4:hover .title-style-1 span {
            background: #626979 !important;
            color: #ffffff;
        }

    .html-page .accordion-content .accordion-list > .separator {
        padding-top: 10px;
        padding-bottom: 10px;
        background-color: #ffffff;
    }

        .html-page .accordion-content .accordion-list > .separator div {
            background-color: #23262d;
            height: 1px;
        }

        .html-page .accordion-content .accordion-list > .separator.dark {
            background-color: #23262d;
        }

            .html-page .accordion-content .accordion-list > .separator.dark div {
                background-color: rgba(116, 116, 116, 0.6392156863);
            }

.html-page .accordion-content.dark .header {
    color: #ffffff;
}

.html-page .accordion-content.dark .accordion-list .accordion-detail {
    color: #ffffff;
}

.html-page .accordion-content.dark .accordion-list h4 {
    color: #ffffff;
}

.html-page .accordion-content.dark .accordion-list > .separator {
    background-color: #23262d;
}

    .html-page .accordion-content.dark .accordion-list > .separator div {
        background-color: rgba(116, 116, 116, 0.6392156863);
    }

.html-page .action-content {
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .html-page .action-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.html-page .action-content .header {
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
    color: #000000;
}

    .html-page .action-content .header b,
    .html-page .action-content .header strong {
        font-weight: 600;
    }

@media screen and (max-width: 767px) {
    .html-page .action-content .header {
        font-size: 28px;
    }
}

.html-page .action-content .action {
    font-size: 16px;
    font-weight: 500;
    line-height: 45px;
    color: #23262d;
    border: solid 1px #0f52c0;
    display: inline-block;
    background-color: #fff;
    height: 45px;
    padding: 0 30px;
    border-radius: 25px;
    margin-top: 50px;
    transition: all 0.3s ease-in-out;
}

    .html-page .action-content .action svg {
        margin-left: 10px;
        stroke: #23262d;
        transition: all 0.3s ease-in-out;
    }

    .html-page .action-content .action:hover {
        color: #ffffff;
        background-color: #38b6ff
    }

        .html-page .action-content .action:hover svg {
            transform: translate(10px, -5px);
            stroke: #ffffff;
        }

.html-page .action-content.dark .header {
    color: #ffffff;
}

.html-page .separator {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
}

    .html-page .separator div {
        background-color: #23262d;
        height: 1px;
    }

    .html-page .separator.dark {
        background-color: #23262d;
    }

        .html-page .separator.dark div {
            background-color: rgba(116, 116, 116, 0.6392156863);
        }

.blog-page {
    width: 100%;
}

    .blog-page > section {
        width: 100%;
    }

    .blog-page .dark {
        background-color: #23262d;
        color: #ffffff;
    }

        .blog-page .dark a {
            color: #ffffff;
        }

    .blog-page .text-content {
        padding-top: 100px;
        padding-bottom: 100px;
    }

        .blog-page .text-content .content {
            padding-left: 100px;
            padding-right: 100px;
            color: #fff;
        }

.blog-page .text-content .content > h1 {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2em;
    color: #ffffff;
    margin: 80px 0 50px;
}

@media screen and (max-width: 767px) {
    .blog-page .text-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }

        .blog-page .text-content .content {
            padding-left: 0px;
            padding-right: 0px;
            color: #fff;
        }
    .blog-page .text-content .content > h1 {
        font-size: 24px;
        line-height: 1.3em;
    }
}

.blog-page .text-content .content > figure img {
    width: 100%;
    display: block;
    border-radius: 8px;
}

.blog-page .text-content .content p {
    color: #999999;
    margin: 20px 0;
}

.blog-page .separator {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
}

    .blog-page .separator div {
        background-color: #23262d;
        height: 1px;
    }

    .blog-page .separator.dark {
        background-color: #23262d;
    }

        .blog-page .separator.dark div {
            background-color: rgba(116, 116, 116, 0.6392156863);
        }

.blog-list-page {
    width: 100%;
}

    .blog-list-page #page-cover {
        width: 100%;
    }

        .blog-list-page #page-cover .page-cover {
            width: 100%;
            height: 550px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

            .blog-list-page #page-cover .page-cover .container {
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;
                padding-bottom: 50px;
                position: relative;
                z-index: 11;
            }

                .blog-list-page #page-cover .page-cover .container p {
                    font-size: 40px;
                    font-weight: 700;
                    line-height: 1.2em;
                    color: #ffffff;
                    width: 60%;
                }

                .blog-list-page #page-cover .page-cover .container img {
                    width: 100%;
                }

            .blog-list-page #page-cover .page-cover::after {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.6);
                left: 0;
                top: 0;
                z-index: 10;
            }

    .blog-list-page > section {
        width: 100%;
    }

    .blog-list-page .dark {
        background-color: #23262d;
        color: #ffffff;
    }

        .blog-list-page .dark a {
            color: #ffffff;
        }

    .blog-list-page #blog-list {
        background-color: #23262d;
        width: 100%;
        padding: 100px 0 100px;
    }

        .blog-list-page #blog-list .container .content {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            column-gap: 60px;
            row-gap: 80px;
        }

@media screen and (max-width: 767px) {
    .blog-list-page #blog-list .container .content {
        grid-template-columns: 1fr;
    }
}

.blog-list-page #blog-list .container .content div {
    z-index: 5;
    position: relative;
}

    .blog-list-page #blog-list .container .content div a {
        display: block;
    }

        .blog-list-page #blog-list .container .content div a figure {
            overflow: hidden;
            border-radius: 8px;
        }

            .blog-list-page #blog-list .container .content div a figure img {
                width: 100%;
                display: block;
                transition: all 0.4s ease-in-out;
            }

            .blog-list-page #blog-list .container .content div a figure:hover img {
                transform: scale(1.1);
            }

        .blog-list-page #blog-list .container .content div a h5 {
            margin-top: 20px;
            font-size: 22px;
            font-weight: 600;
            line-height: 1.3em;
            color: #ffffff;
        }

.blog-list-page .separator {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
}

    .blog-list-page .separator div {
        background-color: #23262d;
        height: 1px;
    }

    .blog-list-page .separator.dark {
        background-color: #23262d;
    }

        .blog-list-page .separator.dark div {
            background-color: rgba(116, 116, 116, 0.6392156863);
        }

.product-page {
    width: 100%;
}

    .product-page #page-cover {
        width: 100%;
    }

        .product-page #page-cover .page-cover {
            width: 100%;
            height: 70vh;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

@media screen and (max-width: 767px) {
    .product-page #page-cover .page-cover {
        height: 400px;
    }
}

.product-page #page-cover .page-cover .container {
    height: 100%;
}

    .product-page #page-cover .page-cover .container > div {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-end;
        align-content: flex-end;
        padding-bottom: 50px;
        position: relative;
        z-index: 11;
        width: 60%;
    }

@media screen and (max-width: 767px) {
    .product-page #page-cover .page-cover .container > div {
        width: 100%;
    }
}

.product-page #page-cover .page-cover .container > div h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2em;
    color: #ffffff;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .product-page #page-cover .page-cover .container > div h2 {
        font-size: 24px;
    }
}

.product-page #page-cover .page-cover .container > div h5 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2em;
    color: #54c1dc;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .product-page #page-cover .page-cover .container > div h5 {
        font-size: 24px;
    }
}

.product-page #page-cover .page-cover .container > div p {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2em;
    color: #ffffff;
    width: 100%;
    margin-top: 50px;
    display: none;
}

@media screen and (max-width: 767px) {
    .product-page #page-cover .page-cover .container > div p {
        font-size: 16px;
    }
}

.product-page #page-cover .page-cover .container > div img {
    width: 100%;
}

.product-page #page-cover .page-cover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 10;
}

.product-page > section {
    width: 100%;
}

.product-page .page-content {
    padding: 0;
    min-height: auto;
    position: relative;
    z-index: 2;
}

    .product-page .page-content::after {
        content: "";
        display: block;
        position: absolute;
        z-index: 1;
        width: 50%;
        height: 100%;
        background-color: #ffffff;
        right: 0;
        top: 0;
    }

@media screen and (max-width: 767px) {
    .product-page .page-content::after {
        content: none;
    }
}

.product-page .page-content .container {
    display: grid;
    grid-template-columns: 33% 66%;
    position: relative;
    z-index: 3;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container {
        grid-template-columns: 100%;
        padding-bottom: 20px;
    }
}

.product-page .page-content .container .menu {
    padding: 50px 30px 0 0px;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .menu {
        width: 100%;
        padding: 20px;
    }
}

.product-page .page-content .container .menu h4 {
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
    color: #54c1dc;
    display: inline-block;
    display: none
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .menu h4 {
        font-size: 24px;
    }
}

.product-page .page-content .container .menu h4 b,
.product-page .page-content .container .menu h4 strong {
    font-weight: 700;
}

.product-page .page-content .container .menu nav {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .menu nav {
        border: solid 1px #ffffff;
        border-radius: 10px;
        padding: 20px;
        overflow: hidden;
        min-height: 70px;
        height: 0;
        margin-bottom: 40px;
        margin-top: 40px;
    }

        .product-page .page-content .container .menu nav.open {
            height: auto;
        }
}

.product-page .page-content .container .menu nav h3 {
    display: none;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 1em;
    color: #ffffff;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .menu nav h3 {
        display: block;
        margin-bottom: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.product-page .page-content .container .menu nav h3 svg {
    fill: #ffffff;
    stroke: #ffffff;
}

.product-page .page-content .container .menu nav ul {
    margin-top: 20px;
    display: inline-block;
}

    .product-page .page-content .container .menu nav ul li {
        padding: 10px 0;
        text-align: left;
    }

        .product-page .page-content .container .menu nav ul li a {
            font-size: 20px;
            font-weight: 500;
            line-height: 1.5em;
            color: #ffffff;
        }

@media screen and (max-width: 767px) {
    .product-page .page-content .container .menu nav ul li a {
        font-size: 16px;
    }
}

.product-page .page-content .container .menu nav ul li a.active {
    color: #ffffff;
}

.product-page .page-content .container .menu nav ul li a:hover {
    color: #54c1dc;
}

    .product-page .page-content .container .menu nav ul li a:hover svg path {
        stroke: #ffffff;
    }

.product-page .page-content .container .menu nav ul li a svg {
    vertical-align: sub;
    margin-right: 5px;
}

.product-page .page-content .container .menu nav ul li a.active {
    color: #54c1dc;
}

    .product-page .page-content .container .menu nav ul li a.active svg path {
        stroke: #ffffff;
    }

.product-page .page-content .container .content {
    width: 100%;
    background-color: #ffffff;
    text-align: justify;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content {
        flex-wrap: wrap;
        padding: 0 20px;
        text-align: left;
    }
}

.product-page .page-content .container .content .detail {
    width: 100%;
    padding-left: 50px;
    padding-top: 50px;
    background-color: #ffffff;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .detail {
        width: 100%;
        padding-left: 0;
        padding-top: 20px;
    }
}

.product-page .page-content .container .content .detail figure img {
    width: 100%;
    display: block;
    margin-top: 20px;
}

.product-page .page-content .container .content .fvd-content {
    padding: 40px 0 50px 50px;
}

    .product-page .page-content .container .content .fvd-content .text-content {
        padding-bottom: 50px;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .text-content
        .container {
            display: block;
            width: auto;
        }

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content {
        padding: 40px 0;
    }

        .product-page .page-content .container .content .fvd-content .text-content .container {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 0;
            padding-right: 0;
        }

            .product-page .page-content .container .content .fvd-content .text-content .container .content {
                padding-left: 0;
                padding-right: 0;
            }
}

.product-page .page-content .container .content .fvd-content .text-content .container .content p {
    color: #999999;
    margin: 20px 0;
}

.product-page .page-content .container .content .fvd-content .list-content {
    padding-bottom: 50px;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content .list-content {
        padding-bottom: 50px;
    }
}

.product-page .page-content .container .content .fvd-content .list-content .container {
    display: block;
    width: auto;
}

    .product-page .page-content .container .content .fvd-content .list-content .container .header {
        padding-left: 40%;
        font-size: 34px;
        font-weight: 400;
        line-height: 1.2em;
        color: #000000;
    }

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content .list-content .container .header {
        padding-left: 0;
        font-size: 26px;
    }
}

.product-page .page-content .container .content .fvd-content .list-content .container .header b,
.product-page .page-content .container .content .fvd-content .list-content .container .header strong {
    font-weight: 700;
}

.product-page .page-content .container .content .fvd-content .list-content .container .subtitle {
    padding-left: 40%;
    margin-top: 30px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2em;
    color: #000000;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content .list-content .container .subtitle {
        padding-left: 0;
        font-size: 22px;
        text-align: center;
    }
}

.product-page .page-content .container .content .fvd-content .list-content .container ul {
    width: 100%;
    margin-top: 70px;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content .list-content .container ul {
        margin-top: 10px;
    }
}

.product-page .page-content .container .content .fvd-content .list-content .container ul li {
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    align-content: center;
    padding: 80px 30px;
    background-size: cover;
    border-radius: 8px;
    transition: background-image 0.8s ease-in-out;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content .list-content .container ul li {
        flex-wrap: wrap;
        padding: 20px 0;
        margin-bottom: 40px;
    }
}

.product-page .page-content .container .content .fvd-content .list-content .container ul li .title {
    width: 40%;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2em;
    color: #000000;
}

    .product-page .page-content .container .content .fvd-content .list-content .container ul li .title b,
    .product-page .page-content .container .content .fvd-content .list-content .container ul li .title strong {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2em;
        color: #000000;
    }

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content .list-content .container ul li .title {
        width: 100%;
        font-size: 24px;
        margin-bottom: 30px;
    }

        .product-page .page-content .container .content .fvd-content .list-content .container ul li .title b,
        .product-page .page-content .container .content .fvd-content .list-content .container ul li .title strong {
            font-size: 24px;
        }
}

.product-page
.page-content
.container
.content
.fvd-content
.list-content
.container
ul
li
.desc {
    width: 40%;
    padding-right: 50px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: #5b5b5b;
}

@media screen and (max-width: 767px) {
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content
    .container
    ul
    li
    .desc {
        width: 100%;
        padding-right: 0;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.list-content
.container
ul
li
.action {
    width: 20%;
}

@media screen and (max-width: 767px) {
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content
    .container
    ul
    li
    .action {
        width: 100%;
        margin-top: 30px;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.list-content
.container
ul
li
.action
a {
    font-size: 16px;
    font-weight: 500;
    line-height: 45px;
    color: #23262d;
    border: solid 1px #000000;
    display: inline-block;
    background-color: #ffffff;
    height: 45px;
    padding: 0 15px;
    border-radius: 25px;
    transition: all 0.2s ease-in-out;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content
    .container
    ul
    li
    .action
    a
    svg {
        margin-left: 10px;
        stroke: #23262d;
        transition: all 0.3s ease-in-out;
    }

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content
    .container
    ul
    li
    .action
    a:hover {
        background-color: #38b6ff;
        border-color: #38b6ff;
        color: #fff;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .list-content
        .container
        ul
        li
        .action
        a:hover
        svg {
            transform: translate(5px, -5px);
            stroke: #fff;
        }

.product-page
.page-content
.container
.content
.fvd-content
.list-content
.container
ul
li:hover {
    background-image: var(--bg-image);
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content
    .container
    ul
    li:hover
    .title {
        color: #54c1dc;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .list-content
        .container
        ul
        li:hover
        .title
        b,
        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .list-content
        .container
        ul
        li:hover
        .title
        strong {
            color: #54c1dc;
        }

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content
    .container
    ul
    li:hover
    .desc {
        color: #ffffff;
    }

.product-page
.page-content
.container
.content
.fvd-content
.list-content.dark {
    color: #ffffff;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content.dark
    .header {
        color: #ffffff;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .list-content.dark
        .header
        b,
        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .list-content.dark
        .header
        strong {
            color: #ffffff;
        }

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content.dark
    .subtitle {
        color: #ffffff;
    }

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content.dark
    ul
    li
    .title {
        color: #ffffff;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .list-content.dark
        ul
        li
        .title
        b,
        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .list-content.dark
        ul
        li
        .title
        strong {
            color: #ffffff;
        }

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .list-content.dark
    ul
    li
    .desc {
        color: #999999;
    }

.product-page .page-content .container .content .fvd-content .team-content {
    padding-bottom: 50px;
}

@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content .team-content {
        padding-bottom: 50px;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.team-content
.container {
    display: block;
    width: auto;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .team-content
    .container
    .header {
        font-size: 40px;
        font-weight: 400;
        line-height: 1em;
        color: #000000;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .team-content
        .container
        .header
        b,
        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .team-content
        .container
        .header
        strong {
            font-weight: 600;
        }

@media screen and (max-width: 767px) {
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .team-content
    .container
    .header {
        font-size: 28px;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.team-content
.container
.team {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 40px;
    row-gap: 50px;
    margin-top: 50px;
}

@media screen and (max-width: 767px) {
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .team-content
    .container
    .team {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 50px;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.team-content
.container
.team
.person
figure {
    border-radius: 8px;
    overflow: hidden;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .team-content
    .container
    .team
    .person
    figure
    img {
        display: block;
        width: 100%;
        transition: all 0.4s ease-in-out;
    }

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .team-content
    .container
    .team
    .person
    figure:hover
    img {
        transform: scale(1.1);
    }

.product-page
.page-content
.container
.content
.fvd-content
.team-content
.container
.team
.person
.info
h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1em;
    margin-top: 20px;
    margin-bottom: 10px;
}

.product-page
.page-content
.container
.content
.fvd-content
.team-content
.container
.team
.person
.info
span {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5em;
    color: #999999;
}

.product-page
.page-content
.container
.content
.fvd-content
.team-content
.container
.team
.person
.info
a {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5em;
    color: #999999;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .team-content
    .container
    .team
    .person
    .info
    a:hover {
        color: #38b6ff;
    }

.product-page
.page-content
.container
.content
.fvd-content
.team-content
.container
.team
.person
.info
.social {
    padding-top: 10px;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .team-content
    .container
    .team
    .person
    .info
    .social
    a {
        font-size: 24px;
        font-weight: 500;
        line-height: 1em;
        color: #999999;
        font-style: normal;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .team-content
        .container
        .team
        .person
        .info
        .social
        a:hover {
            color: #38b6ff;
        }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .team-content
        .container
        .team
        .person
        .info
        .social
        a
        i {
            font-style: normal;
        }

.product-page
.page-content
.container
.content
.fvd-content
.team-content.dark
.container
.header {
    color: #ffffff;
}

.product-page
.page-content
.container
.content
.fvd-content
.accordion-content {
    padding-bottom: 50px;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content
    .container {
        display: block;
        width: auto;
    }

@media screen and (max-width: 767px) {
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content
    .container {
        padding: 0px;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.accordion-content
.container
.header {
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
    color: #000000;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content
    .container
    .header
    b,
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content
    .container
    .header
    strong {
        font-weight: 600;
    }

@media screen and (max-width: 767px) {
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content
    .container
    .header {
        font-size: 28px;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.accordion-content
.container
.accordion-list {
    margin-top: 10px;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content
    .container
    .accordion-list
    .accordion-detail {
        overflow: hidden;
        height: 0;
        padding: 0;
        transition: all 0.3s ease-in-out;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .accordion-content
        .container
        .accordion-list
        .accordion-detail.open {
            height: auto;
            padding: 40px 0 20px 0px;
        }

    .product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4 {
        font-size: 18px;
        font-weight: 600;
        line-height: 1em;
        color: #000000;
        cursor: pointer;
        padding: 20px 40px 20px 0;
    }


@media screen and (max-width: 767px) {
    .product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4 {
        line-height: 1.5em;
        padding: 10px 40px 10px 0;
    }
}

.product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4 svg {
    transition: all 0.3s ease-in-out;
    float: right;
    width: 34px;
    height: 34px;
    stroke: #000000;
    right: -40px;
    position: relative;
}

    .product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4 svg path {
        fill: #000000;
    }

.product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4.open svg {
    transform: rotate(180deg);
}

.product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4.open .accordion-icon,
.product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4.open .title-style-1 span,
.product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4:hover .accordion-icon,
.product-page .page-content .container .content .fvd-content .accordion-content .container .accordion-list h4:hover .title-style-1 span {
    background: #626979 !important;
    color: #ffffff;
}

.product-page
.page-content
.container
.content
.fvd-content
.accordion-content
.container
.accordion-list > .separator {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content
    .container
    .accordion-list > .separator
    div {
        background-color: #23262d;
        height: 1px;
    }

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content
    .container
    .accordion-list > .separator.dark {
        background-color: #23262d;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .accordion-content
        .container
        .accordion-list > .separator.dark
        div {
            background-color: rgba(116, 116, 116, 0.6392156863);
        }

.product-page
.page-content
.container
.content
.fvd-content
.accordion-content.dark
.header {
    color: #ffffff;
}

.product-page
.page-content
.container
.content
.fvd-content
.accordion-content.dark
.accordion-list
.accordion-detail {
    color: #ffffff;
}

.product-page
.page-content
.container
.content
.fvd-content
.accordion-content.dark
.accordion-list
h4 {
    color: #ffffff;
}

.product-page
.page-content
.container
.content
.fvd-content
.accordion-content.dark
.accordion-list > .separator {
    background-color: #23262d;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .accordion-content.dark
    .accordion-list > .separator
    div {
        background-color: rgba(116, 116, 116, 0.6392156863);
    }

.product-page .page-content .container .content .fvd-content .action-content {
    padding-bottom: 50px;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .action-content
    .container {
        display: block;
        width: auto;
    }

@media screen and (max-width: 767px) {
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .action-content
    .container {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.action-content
.container
.header {
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
    color: #000000;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .action-content
    .container
    .header
    b,
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .action-content
    .container
    .header
    strong {
        font-weight: 600;
    }

@media screen and (max-width: 767px) {
    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .action-content
    .container
    .header {
        font-size: 28px;
    }
}

.product-page
.page-content
.container
.content
.fvd-content
.action-content
.container
.action {
    font-size: 16px;
    font-weight: 500;
    line-height: 45px;
    color: #23262d;
    border: solid 1px #0f52c0;
    display: inline-block;
    background-color: #ffffff;
    height: 45px;
    padding: 0 30px;
    border-radius: 25px;
    margin-top: 50px;
    transition: all 0.3s ease-in-out;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .action-content
    .container
    .action
    svg {
        margin-left: 10px;
        stroke: #23262d;
        transition: all 0.3s ease-in-out;
    }

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .action-content
    .container
    .action:hover {
        color: #ffffff;
        background-color: #38b6ff;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .action-content
        .container
        .action:hover
        svg {
            transform: translate(10px, -5px);
            color: #fff;
        }

.product-page
.page-content
.container
.content
.fvd-content
.action-content.dark
.header {
    color: #ffffff;
}

.product-page
.page-content
.container
.content
.fvd-content
.action-content.dark
.accordion-list
.accordion-detail {
    color: #ffffff;
}

.product-page
.page-content
.container
.content
.fvd-content
.action-content.dark
.accordion-list
h4 {
    color: #ffffff;
}

.product-page
.page-content
.container
.content
.fvd-content
.action-content.dark
.accordion-list > .separator {
    background-color: #23262d;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .action-content.dark
    .accordion-list > .separator
    div {
        background-color: rgba(116, 116, 116, 0.6392156863);
    }

.product-page .page-content .container .content .fvd-content .separator {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
}

    .product-page
    .page-content
    .container
    .content
    .fvd-content
    .separator
    .container {
        display: block;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .separator
        .container
        div {
            background-color: #23262d;
            height: 1px;
        }

    .product-page .page-content .container .content .fvd-content .separator.dark {
        background-color: #23262d;
    }

        .product-page
        .page-content
        .container
        .content
        .fvd-content
        .separator.dark
        div {
            background-color: rgba(116, 116, 116, 0.6392156863);
        }

.product-page .others {
    padding: 120px 0;
}

@media screen and (max-width: 767px) {
    .product-page .others {
        padding: 60px 0;
    }
}

.product-page .others .container > h3 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1em;
    color: #747474;
    margin-bottom: 80px;
}

.product-page .others .container .categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
    row-gap: 50px;
}

@media screen and (max-width: 767px) {
    .product-page .others .container .categories {
        grid-template-columns: repeat(1, 1fr);
    }
}

.product-page .others .container .categories .cat {
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 30px;
}

    .product-page .others .container .categories .cat .title {
        font-size: 30px;
        font-weight: 400;
        line-height: 1.2em;
        color: #747474;
    }

        .product-page .others .container .categories .cat .title b,
        .product-page .others .container .categories .cat .title strong {
            font-weight: 700;
            display: block;
        }

    .product-page .others .container .categories .cat .action {
        align-content: center;
    }

        .product-page .others .container .categories .cat .action a {
            font-size: 16px;
            font-weight: 500;
            line-height: 45px;
            color: #23262d;
            border: solid 1px #000000;
            display: inline-block;
            background-color: #ffffff;
            height: 45px;
            padding: 0 15px;
            border-radius: 25px;
            transition: all 0.2s ease-in-out;
        }

            .product-page .others .container .categories .cat .action a svg {
                margin-left: 10px;
                stroke: #23262d;
                transition: all 0.3s ease-in-out;
            }

            .product-page .others .container .categories .cat .action a:hover {
                background-color: #38b6ff;
                border-color: #38b6ff;
                color: #ffffff;
            }

                .product-page .others .container .categories .cat .action a:hover svg {
                    transform: translate(5px, -5px);
                    stroke: #ffffff;
                }

.product-page .dark {
    background-color: #23262d;
    color: #ffffff;
}

    .product-page .dark a {
        color: #ffffff;
    }

.contact-page {
    width: 100%;
}

    .contact-page #page-cover {
        width: 100%;
    }

        .contact-page #page-cover .page-cover {
            width: 100%;
            height: 550px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

            .contact-page #page-cover .page-cover .container {
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: flex-end;
                padding-bottom: 50px;
                position: relative;
                z-index: 11;
            }

                .contact-page #page-cover .page-cover .container p {
                    font-size: 40px;
                    font-weight: 700;
                    line-height: 1.2em;
                    color: #ffffff;
                    width: 60%;
                    white-space: pre-line;
                }

                .contact-page #page-cover .page-cover .container img {
                    width: 100%;
                }

@media screen and (max-width: 767px) {
    .contact-page #page-cover .page-cover .container p {
        width: 100%;
        font-size: 24px;
    }
}

.contact-page #page-cover .page-cover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 10;
}

.contact-page > section {
    width: 100%;
}

.contact-page .dark {
    background-color: #23262d;
    color: #ffffff;
}

    .contact-page .dark a {
        color: #ffffff;
    }

.contact-page .content .container {
    display: flex;
    flex-wrap: nowrap;
    padding-top: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .contact-page .content .container {
        flex-wrap: wrap;
        padding-top: 40px;
        padding-bottom: 40px;
    }
}

.contact-page .content .container .text-content {
    width: 33%;
}

    .contact-page .content .container .text-content h3 {
        font-size: 30px;
        font-weight: 600;
        line-height: 1.5em;
        color: #ffffff;
    }

    .contact-page .content .container .text-content p {
        font-size: 20px;
        font-weight: 400;
        line-height: 1.5em;
        color: #999999;
        margin-top: 30px;
        margin-bottom: 80px;
    }

    .contact-page .content .container .text-content a {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5em;
        color: #ffffff;
        display: inline-block;
        margin-bottom: 10px;
    }

    .contact-page .content .container .text-content .fa {
        text-decoration: none;
        display: inline-block;
        margin-right: 5px;
    }

    .contact-page .content .container .text-content span {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.5em;
        color: #ffffff;
        display: block;
    }

@media screen and (max-width: 767px) {
    .contact-page .content .container .text-content {
        width: 100%;
    }

        .contact-page .content .container .text-content h3 {
            font-size: 26px;
        }

        .contact-page .content .container .text-content p {
            font-size: 16px;
        }
}

.contact-page .content .container .form-content {
    width: 67%;
    padding-left: 100px;
}

@media screen and (max-width: 767px) {
    .contact-page .content .container .form-content {
        width: 100%;
        padding-left: 0;
    }
}

.contact-page .content .container .form-content h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1em;
    color: #ffffff;
    margin-bottom: 20px;
}

.contact-page .content .container .form-content p {
    font-size: 18px;
    font-weight: 400;
    line-height: 1em;
    color: #999999;
    margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
    .contact-page .content .container .form-content h4 {
        font-size: 18px;
    }

    .contact-page .content .container .form-content p {
        font-size: 16px;
    }
}

.contact-page .content .container .form-content .form-items {
    color: #ffffff;
}

    .contact-page .content .container .form-content .form-items .form-input {
        margin-bottom: 30px;
        position: relative;
    }

        .contact-page
        .content
        .container
        .form-content
        .form-items
        .form-input
        textarea,
        .contact-page .content .container .form-content .form-items .form-input input {
            border: none;
            border-bottom: solid 1px #363940;
            color: #ffffff;
            height: 45px;
            line-height: 45px;
            background-color: transparent;
            width: 100%;
            z-index: 1;
            padding: 0 20px;
            font-size: 1em;
            letter-spacing: 0.02em;
            font-weight: 600;
        }

            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            textarea.error,
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            input.error {
                border-color: #dd2020;
            }

            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            textarea::placeholder,
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            input::placeholder {
                line-height: 45px;
                font-size: 1em;
                font-weight: 600;
                color: #ffffff;
                letter-spacing: 0.02em;
            }

            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            textarea + label,
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            input + label {
                font-size: 18px;
                font-weight: 300;
                line-height: 1em;
                color: #e2e2e2;
                letter-spacing: 0.02em;
                top: 10px;
                left: 0px;
                letter-spacing: 0.02em;
                z-index: 2;
                color: #e2e2e2;
                position: absolute;
                pointer-events: none;
                transition: all 0.2s ease-in-out;
                display: inline-block;
            }
            
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-check
            input + label *{
                color: #bdc3c7;
                cursor: pointer;
            }
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-check
            input + label a{
                color: #ffffff;
                cursor: pointer;
            }
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-check
            input.error + label,
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-check
            input.error + label *{
                color: #dd2020 !important;
            }
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-check
            input.error + label a{
                color: #dba0a0 !important;
            }

            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            textarea:not(:placeholder-shown) + label,
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            textarea:focus + label,
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            input:not(:placeholder-shown) + label,
            .contact-page
            .content
            .container
            .form-content
            .form-items
            .form-input
            input:focus + label {
                top: -5px;
                font-size: 0.8em;
                line-height: 1em;
                background-color: #23262d;
            }

        .contact-page
        .content
        .container
        .form-content
        .form-items
        .form-input
        textarea {
            height: 100px;
            resize: none;
        }

    .contact-page .content .container .form-content .form-items .action {
        margin-top: 50px;
    }

        .contact-page .content .container .form-content .form-items .action button {
            font-size: 16px;
            font-weight: 500;
            line-height: 45px;
            color: #23262d;
            border: solid 1px #000000;
            display: inline-block;
            background-color: #ffffff;
            height: 45px;
            padding: 0 25px;
            border-radius: 25px;
            transition: all 0.2s ease-in-out;
        }

            .contact-page .content .container .form-content .form-items .action button svg {
                margin-left: 50px;
                stroke: #23262d;
                transition: all 0.3s ease-in-out;
            }

            .contact-page
            .content
            .container
            .form-content
            .form-items
            .action
            button:hover {
                background-color: #38b6ff;
                border-color: #38b6ff;
            }

                .contact-page
                .content
                .container
                .form-content
                .form-items
                .action
                button:hover
                svg {
                    transform: translate(5px, -5px);
                }


            .contact-page .content .container .form-content .form-items .action button.sending {
                pointer-events: none;
                opacity: 0.6;
            }
.contact-page .map-content .map {
    height: 400px;
}

.category-page {
    width: 100%;
}

    .category-page #page-cover {
        width: 100%;
    }

        .category-page #page-cover .page-cover {
            width: 100%;
            height: 550px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

@media screen and (max-width: 767px) {
    .category-page #page-cover .page-cover {
        height: 400px;
    }
}

.category-page #page-cover .page-cover .container {
    height: 100%;
}

    .category-page #page-cover .page-cover .container > div {
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-end;
        padding-bottom: 50px;
        align-content: flex-end;
        position: relative;
        z-index: 11;
        width: 80%;
    }

@media screen and (max-width: 767px) {
    .category-page #page-cover .page-cover .container > div {
        width: 100%;
    }
}

.category-page #page-cover .page-cover .container > div h2 {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2em;
    color: #ffffff;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .category-page #page-cover .page-cover .container > div h2 {
        font-size: 24px;
    }
}

.category-page #page-cover .page-cover .container > div h5 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2em;
    color: #54c1dc;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .category-page #page-cover .page-cover .container > div h5 {
        font-size: 24px;
    }
}

.category-page #page-cover .page-cover .container > div p {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2em;
    color: #ffffff;
    width: 100%;
    margin-top: 50px;
    white-space: pre-line;
}

@media screen and (max-width: 767px) {
    .category-page #page-cover .page-cover .container > div p {
        font-size: 16px;
    }
}

.category-page #page-cover .page-cover .container > div img {
    width: 100%;
}

.category-page #page-cover .page-cover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 10;
}

.category-page > section {
    width: 100%;
}

.category-page .page-content {
    padding: 50px 0;
}

@media screen and (max-width: 767px) {
    .category-page .page-content {
        padding: 50px 0;
    }
}

.category-page .page-content .content {
    display: flex;
    width: 100%;
}

@media screen and (max-width: 767px) {
    .category-page .page-content .content {
        flex-wrap: wrap;
    }
}

.category-page .page-content .content nav {
    width: 33%;
}

@media screen and (max-width: 767px) {
    .category-page .page-content .content nav {
        width: 100%;
    }
}

.category-page .page-content .content nav h4 {
    font-size: 40px;
    font-weight: 400;
    line-height: 1em;
    color: #54c1dc;
    display: none;
}

@media screen and (max-width: 767px) {
    .category-page .page-content .content nav h4 {
        font-size: 24px;
    }
}

.category-page .page-content .content nav h4 b,
.category-page .page-content .content nav h4 strong {
    font-weight: 700;
}

.category-page .page-content .content nav ul {
    margin-top: 20px;
}

    .category-page .page-content .content nav ul li {
        padding: 10px 0;
    }

        .category-page .page-content .content nav ul li a {
            font-size: 20px;
            font-weight: 500;
            line-height: 1.5em;
            color: #ffffff;
        }

@media screen and (max-width: 767px) {
    .category-page .page-content .content nav ul li a {
        font-size: 16px;
    }
}

.category-page .page-content .content nav ul li a.active {
    color: #ffffff;
}

.category-page .page-content .content nav ul li a:hover {
    color: #54c1dc;
}

    .category-page .page-content .content nav ul li a:hover svg path {
        stroke: #ffffff;
    }

.category-page .page-content .content nav ul li a svg {
    vertical-align: sub;
    margin-right: 5px;
}

.category-page .page-content .content .detail {
    width: 67%;
    padding-left: 100px;
}

@media screen and (max-width: 767px) {
    .category-page .page-content .content .detail {
        width: 100%;
        padding-left: 0;
    }
}

.category-page .page-content .content .detail figure img {
    width: 100%;
    display: block;
    margin-bottom: 20px;
}

.category-page .others {
    padding: 120px 0;
}

@media screen and (max-width: 767px) {
    .category-page .others {
        padding: 60px 0;
    }
}

.category-page .others .container > h3 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1em;
    color: #747474;
    margin-bottom: 80px;
}

.category-page .others .container .categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 50px;
    row-gap: 50px;
}

@media screen and (max-width: 767px) {
    .category-page .others .container .categories {
        grid-template-columns: repeat(1, 1fr);
    }
}

.category-page .others .container .categories .cat {
    display: grid;
    grid-template-columns: 50% 50%;
    column-gap: 30px;
}

    .category-page .others .container .categories .cat .title {
        font-size: 30px;
        font-weight: 400;
        line-height: 1.2em;
        color: #747474;
    }

        .category-page .others .container .categories .cat .title b,
        .category-page .others .container .categories .cat .title strong {
            font-weight: 700;
            display: block;
        }

    .category-page .others .container .categories .cat .action {
        align-content: center;
    }

        .category-page .others .container .categories .cat .action a {
            font-size: 16px;
            font-weight: 500;
            line-height: 45px;
            color: #23262d;
            border: solid 1px #000000;
            display: inline-block;
            background-color: #ffffff;
            height: 45px;
            padding: 0 15px;
            border-radius: 25px;
            transition: all 0.2s ease-in-out;
        }

            .category-page .others .container .categories .cat .action a svg {
                margin-left: 10px;
                stroke: #23262d;
                transition: all 0.3s ease-in-out;
            }

            .category-page .others .container .categories .cat .action a:hover {
                background-color: #38b6ff;
                border-color: #38b6ff;
                color: #ffffff;
            }

                .category-page .others .container .categories .cat .action a:hover svg {
                    transform: translate(5px, -5px);
                    stroke: #ffffff;
                }

.category-page .dark {
    background-color: #23262d;
    color: #ffffff;
}

    .category-page .dark a {
        color: #ffffff;
    }

.category-list-page {
    width: 100%;
}

    .category-list-page #page-cover {
        width: 100%;
    }

        .category-list-page #page-cover .page-cover {
            width: 100%;
            height: 550px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

            .category-list-page #page-cover .page-cover .container {
                height: 100%;
            }

                .category-list-page #page-cover .page-cover .container > div {
                    height: 100%;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: flex-end;
                    padding-bottom: 50px;
                    position: relative;
                    z-index: 11;
                    width: 60%;
                }

                    .category-list-page #page-cover .page-cover .container > div h2 {
                        font-size: 40px;
                        font-weight: 600;
                        line-height: 1.2em;
                        color: #ffffff;
                        width: 100%;
                    }

                    .category-list-page #page-cover .page-cover .container > div h5 {
                        font-size: 40px;
                        font-weight: 700;
                        line-height: 1.2em;
                        color: #54c1dc;
                        width: 100%;
                    }

                    .category-list-page #page-cover .page-cover .container > div p {
                        font-size: 20px;
                        font-weight: 400;
                        line-height: 1.2em;
                        color: #ffffff;
                        width: 100%;
                        margin-top: 50px;
                    }

                    .category-list-page #page-cover .page-cover .container > div img {
                        width: 100%;
                    }

@media screen and (max-width: 767px) {
    .category-list-page #page-cover .page-cover .container > div {
        width: 100%;
    }

        .category-list-page #page-cover .page-cover .container > div h2 {
            font-size: 30px;
        }
}

.category-list-page #page-cover .page-cover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 10;
}

.category-list-page #solutions {
    width: 100%;
}

    .category-list-page #solutions .text-content {
        padding-top: 100px;
        padding-bottom: 100px;
    }

        .category-list-page #solutions .text-content.dark {
            background-color: #23262d;
            color: #ffffff;
        }

            .category-list-page #solutions .text-content.dark a {
                color: #ffffff;
            }

@media screen and (max-width: 767px) {
    .category-list-page #solutions .text-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

@media screen and (max-width: 767px) {
    .category-list-page #solutions .text-content .content {
        padding-left: 0;
        padding-right: 0;
    }
}

.category-list-page #solutions .text-content .content p {
    color: #999999;
    margin: 20px 0;
}

.category-list-page #solutions .list-content {
    padding-top: 50px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .category-list-page #solutions .list-content {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

.category-list-page #solutions .list-content .header {
    padding-left: 40%;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2em;
    color: #000000;
    display: none;
}

@media screen and (max-width: 767px) {
    .category-list-page #solutions .list-content .header {
        padding-left: 0;
        font-size: 26px;
    }
}

.category-list-page #solutions .list-content .header b,
.category-list-page #solutions .list-content .header strong {
    font-weight: 700;
}

.category-list-page #solutions .list-content .subtitle {
    padding-left: 40%;
    margin-top: 30px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2em;
    color: #000000;
    display: none;
}

@media screen and (max-width: 767px) {
    .category-list-page #solutions .list-content .subtitle {
        padding-left: 0;
        font-size: 22px;
        text-align: center;
    }
}

.category-list-page #solutions .list-content ul {
    width: 100%;
    margin-top: 70px;
}

@media screen and (max-width: 767px) {
    .category-list-page #solutions .list-content ul {
        margin-top: 10px;
    }
}

.category-list-page #solutions .list-content ul li {
    width: 100%;
    margin-bottom: 60px;
    display: flex;
    align-items: center;
    align-content: center;
    padding: 80px 30px;
    background-size: cover;
    background-position: center center;
    border-radius: 8px;
    transition: background-image 0.8s ease-in-out;
}

@media screen and (max-width: 767px) {
    .category-list-page #solutions .list-content ul li {
        flex-wrap: wrap;
        padding: 20px;
        margin-bottom: 40px;
    }
}

.category-list-page #solutions .list-content ul li .title {
    width: 40%;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.2em;
    color: #000000;
}

    .category-list-page #solutions .list-content ul li .title b,
    .category-list-page #solutions .list-content ul li .title strong {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2em;
        color: #000000;
    }

@media screen and (max-width: 767px) {
    .category-list-page #solutions .list-content ul li .title {
        width: 100%;
        font-size: 24px;
        margin-bottom: 30px;
    }

        .category-list-page #solutions .list-content ul li .title b,
        .category-list-page #solutions .list-content ul li .title strong {
            font-size: 24px;
        }
}

.category-list-page #solutions .list-content ul li .desc {
    width: 40%;
    padding-right: 50px;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
    color: #5b5b5b;
}

@media screen and (max-width: 767px) {
    .category-list-page #solutions .list-content ul li .desc {
        width: 100%;
        padding-right: 0;
    }
}

.category-list-page #solutions .list-content ul li .action {
    width: 20%;
}

@media screen and (max-width: 767px) {
    .category-list-page #solutions .list-content ul li .action {
        width: 100%;
        margin-top: 30px;
    }
}

.category-list-page #solutions .list-content ul li .action a {
    font-size: 16px;
    font-weight: 500;
    line-height: 45px;
    color: #23262d;
    border: solid 1px #000000;
    display: inline-block;
    background-color: #ffffff;
    height: 45px;
    padding: 0 15px;
    border-radius: 25px;
    transition: all 0.2s ease-in-out;
}

    .category-list-page #solutions .list-content ul li .action a svg {
        margin-left: 10px;
        stroke: #ffffff;
        transition: all 0.3s ease-in-out;
    }

    .category-list-page #solutions .list-content ul li .action a:hover {
        background-color: #38b6ff;
        border-color: #38b6ff;
        color: #fff;
    }

        .category-list-page #solutions .list-content ul li .action a:hover svg {
            transform: translate(5px, -5px);
        }

.category-list-page #solutions .list-content ul li:hover {
    background-image: var(--bg-image);
}

    .category-list-page #solutions .list-content ul li:hover .title {
        color: #ffffff;
    }

        .category-list-page #solutions .list-content ul li:hover .title b,
        .category-list-page #solutions .list-content ul li:hover .title strong {
            color: #ffffff;
        }

    .category-list-page #solutions .list-content ul li:hover .desc {
        color: #ffffff;
    }

.category-list-page #solutions .list-content.dark {
    color: #ffffff;
}

    .category-list-page #solutions .list-content.dark .header {
        color: #ffffff;
    }

        .category-list-page #solutions .list-content.dark .header b,
        .category-list-page #solutions .list-content.dark .header strong {
            color: #ffffff;
        }

    .category-list-page #solutions .list-content.dark .subtitle {
        color: #ffffff;
    }

    .category-list-page #solutions .list-content.dark ul li .title {
        color: #ffffff;
    }

        .category-list-page #solutions .list-content.dark ul li .title b,
        .category-list-page #solutions .list-content.dark ul li .title strong {
            color: #ffffff;
        }

    .category-list-page #solutions .list-content.dark ul li .desc {
        color: #999999;
    }

.home-page .page-content .stats {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

    .home-page .page-content .stats .box {
        border: solid 1px #e5e5e5;
        border-radius: 10px;
        padding: 20px;
        background-color: #fef3f3;
    }

        .home-page .page-content .stats .box:first-child {
            background-color: #efffff;
        }

        .home-page .page-content .stats .box:last-child {
            background-color: #f3ecfe;
        }

.home-page .page-content .data-list {
    padding: 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1em;
    color: #222;
}

    .home-page .page-content .data-list .table-content {
        border: 1px solid #e7eaf1;
        border-radius: 10px;
        overflow: hidden;
    }

        .home-page .page-content .data-list .table-content table {
            border-radius: 10px;
        }

            .home-page .page-content .data-list .table-content table .process {
                text-align: center;
            }

                .home-page
                .page-content
                .data-list
                .table-content
                table
                .process
                button.edit-btn {
                    border: solid 1px transparent;
                    background-color: transparent;
                    margin: 0 5px;
                    padding: 5px;
                    border-radius: 5px;
                }

                    .home-page
                    .page-content
                    .data-list
                    .table-content
                    table
                    .process
                    button.edit-btn
                    svg {
                        stroke: #0284c7;
                    }

                    .home-page
                    .page-content
                    .data-list
                    .table-content
                    table
                    .process
                    button.edit-btn:hover {
                        background-color: #f1f1f1;
                        border: solid 1px #e7eaf1;
                    }

                .home-page
                .page-content
                .data-list
                .table-content
                table
                .process
                button.delete-btn {
                    border: solid 1px transparent;
                    background-color: transparent;
                    margin: 0 5px;
                    padding: 5px;
                    border-radius: 5px;
                }

                    .home-page
                    .page-content
                    .data-list
                    .table-content
                    table
                    .process
                    button.delete-btn
                    svg {
                        stroke: #ff6060;
                    }

                    .home-page
                    .page-content
                    .data-list
                    .table-content
                    table
                    .process
                    button.delete-btn:hover {
                        background-color: #f1f1f1;
                        border: solid 1px #e7eaf1;
                    }

.search-page {
    width: 100%;
}

    .search-page #page-cover {
        width: 100%;
    }

        .search-page #page-cover .page-cover {
            width: 100%;
            height: 300px;
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            position: relative;
        }

            .search-page #page-cover .page-cover .container {
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                position: relative;
                z-index: 11;
                flex-wrap: wrap;
                align-content: center;
            }

                .search-page #page-cover .page-cover .container h1 {
                    font-size: 40px;
                    font-weight: 700;
                    line-height: 1.2em;
                    color: #ffffff;
                    width: 60%;
                    margin-top: 30px;
                }

                .search-page #page-cover .page-cover .container p {
                    font-size: 22px;
                    font-weight: 500;
                    line-height: 1.2em;
                    color: #ffffff;
                    width: 70%;
                    margin-top: 20px;
                }

                .search-page #page-cover .page-cover .container img {
                    width: 100%;
                }

@media screen and (max-width: 767px) {
    .search-page #page-cover .page-cover .container h1 {
        width: 100%;
        font-size: 24px;
    }

    .search-page #page-cover .page-cover .container p {
        width: 100%;
        font-size: 18px;
    }
}

.search-page #page-cover .page-cover::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    left: 0;
    top: 0;
    z-index: 10;
}

.search-page > section {
    width: 100%;
}

.search-page .dark {
    background-color: #23262d;
    color: #ffffff;
}

    .search-page .dark a {
        color: #ffffff;
    }

.search-page .result-content {
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 100px;
}

@media screen and (max-width: 767px) {
    .search-page .result-content {
        padding-left: 0;
        padding-right: 0;
    }
}

.search-page .result-content .container .results {
    padding-left: 100px;
    padding-right: 100px;
    overflow: hidden;
}

    .search-page .result-content .container .results .item {
        margin: 20px 0;
    }

        .search-page .result-content .container .results .item h4 {
            font-size: 18px;
            font-weight: 500;
            line-height: 1em;
            color: #ffffff;
        }

        .search-page .result-content .container .results .item p {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5em;
            color: #999999;
            margin: 20px 0;
        }

        .search-page .result-content .container .results .item .action {
            width: 20%;
        }

@media screen and (max-width: 767px) {
    .search-page .result-content .container .results .item .action {
        width: 100%;
        margin-top: 30px;
    }
}

.search-page .result-content .container .results .item .action a {
    font-size: 16px;
    font-weight: 500;
    line-height: 45px;
    color: #23262d;
    border: solid 1px #000000;
    display: inline-block;
    background-color: #ffffff;
    height: 45px;
    padding: 0 15px;
    border-radius: 25px;
    transition: all 0.2s ease-in-out;
}

    .search-page .result-content .container .results .item .action a svg {
        margin-left: 10px;
        stroke: #23262d;
        transition: all 0.3s ease-in-out;
    }

    .search-page .result-content .container .results .item .action a:hover {
        background-color: #54c1dc;
        border-color: #54c1dc;
    }

        .search-page .result-content .container .results .item .action a:hover svg {
            transform: translate(5px, -5px);
        }

.search-page .result-content .container .results .separator {
    padding-top: 30px;
    padding-bottom: 30px;
}

.search-page .separator {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #ffffff;
    width: 100%;
}

    .search-page .separator div {
        background-color: #23262d;
        height: 1px;
    }

    .search-page .separator.dark {
        background-color: #23262d;
    }

        .search-page .separator.dark div {
            background-color: rgba(116, 116, 116, 0.6392156863);
        }

html {
    font-size: 8px !important;
}

body {
    font-family: "Inter", sans-serif, Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;
}

*:focus {
    outline: none;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

@media screen and (max-aspect-ratio: 13/9) and (min-width: 991px) {
    .container {
        width: 100%;
        margin: 0;
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media screen and (max-width: 767px) {
    .container {
        width: 100%;
        margin: 0;
        padding-left: 20px;
        padding-right: 20px;
    }
}

.table-thin th {
    padding: 15px 10px;
}

.table-thin td {
    padding: 6px 10px;
}

.icon {
    vertical-align: middle;
}

.icon-btn {
    font-size: 24px;
    display: inline-block;
    background: none;
    vertical-align: middle;
    margin: 0 5px;
    margin: 0 5px;
    padding: 5px;
    border-radius: 5px;
    border: none;
}

    .icon-btn:hover {
        background-color: #f1f1f1;
    }

main {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
}

    main > aside {
        width: 250px;
    }

    main > .site-content {
        width: calc(100% - 250px);
    }

    main .page-content {
        min-height: calc(100vh - 128px);
        background-color: #f8f8f8;
        padding: 20px;
    }

        main .page-content .page-header-action {
            display: table;
            width: 100%;
            padding: 10px 20px;
        }

            main .page-content .page-header-action > div {
                display: table-cell;
            }

                main .page-content .page-header-action > div h2 {
                    font-size: 16px;
                    font-weight: 600;
                    line-height: 1.5em;
                    color: #000000;
                }

                main .page-content .page-header-action > div a svg {
                    vertical-align: middle;
                    margin-right: 5px;
                    fill: #ffffff;
                }

                main .page-content .page-header-action > div a:hover svg {
                    fill: #000000;
                }

button {
    cursor: pointer;
}

.white-popup {
    position: relative;
    background: #fff;
    padding: 60px;
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
}

@media screen and (max-width: 767px) {
    .white-popup {
        padding: 20px;
    }
}

.html-content {
    color: #4e4e4e;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5em;
}

    .html-content ul {
        list-style: inside;
        list-style-type: disc;
    }

    .html-content h1 {
        font-size: 32px;
        font-weight: 700;
        line-height: 1.5em;
        margin-bottom: 15px;
    }

    .html-content h2 {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.5em;
        margin-bottom: 10px;
    }

    .html-content h3 {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.5em;
        margin-bottom: 10px;
    }

    .html-content h4 {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5em;
        margin-bottom: 10px;
    }

    .html-content h5 {
        font-size: 18px;
        font-weight: 700;
        line-height: 1.5em;
        margin-bottom: 5px;
    }

    .html-content h6 {
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5em;
        margin-bottom: 5px;
    }

    .html-content p {
        font-size: 18px;
        font-weight: 400;
        line-height: 1.5em;
        margin-bottom: 10px;
    }

    .html-content .highlight {
        font-size: 1.2em;
        margin-bottom: 10px;
    }

    .html-content strong,
    .html-content b {
        font-weight: 700;
    }

    .html-content i {
        font-style: italic;
    }

    .html-content u {
        text-decoration: underline;
    }

.swal2-container.swal2-center > .swal2-popup {
    font-size: 16px;
}

@media screen and (max-width: 767px) {
    html {
        font-size: 8px !important;
    }
}

@media screen and (max-aspect-ratio: 13/9) and (min-width: 991px) {
    html {
        font-size: 8px !important;
    }
}

@keyframes anim-rotate {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.page-loader {
    text-align: center;
    padding: 200px 0;
}

    .page-loader.thin {
        padding: 50px 0;
    }

.loader {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: #eaeaea;
    color: #197bbd;
    text-align: center;
    line-height: 100vh;
    font-size: 70px;
    z-index: 9999;
}

    .loader i {
        display: inline-block;
        animation: anim-rotate 1s infinite steps(8);
    }

/* HTML: <div class="loader"></div> */
.loader-text {
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: radial-gradient(circle closest-side, #000 94%, rgba(0, 0, 0, 0)) right/calc(200% - 1em) 100%;
    animation: l24 1s infinite alternate linear;
}

    .loader-text::before {
        content: attr(data-loader-text);
        line-height: 1em;
        color: rgba(0, 0, 0, 0);
        background: inherit;
        background-image: radial-gradient(circle closest-side, #fff 94%, #000);
        -webkit-background-clip: text;
        background-clip: text;
    }

/* HTML: <div class="loader"></div> */
.loader-dots {
    height: 15px;
    aspect-ratio: 5;
    background: radial-gradient( closest-side at 37.5% 50%, #000 94%, rgba(0, 0, 0, 0) ) 0/26.6666666667% 100%;
    animation: l48 0.75s infinite linear;
}

@keyframes l48 {
    100% {
        background-position: 36.36%;
    }
}

.loader-line {
    width: 60px;
    height: 20px;
    display: grid;
    color: #046d8b;
}

    .loader-line:before,
    .loader-line:after {
        content: "";
        grid-area: 1/1;
        --c: #0000 calc(100% / 3), #046d8b 0 calc(2 * 100% / 3), #0000 0;
        --c1: linear-gradient(90deg, var(--c));
        --c2: linear-gradient(0deg, var(--c));
        background: var(--c1), var(--c2), var(--c1), var(--c2);
        background-size: 300% 4px, 4px 300%;
        background-repeat: no-repeat;
        animation: l15 1.5s infinite;
    }

    .loader-line:after {
        animation-delay: -0.75s;
    }

/* */
.loader-text {
    display: inline-block;
    width: fit-content;
    font-weight: bold;
    font-family: monospace;
    font-size: 30px;
    background: radial-gradient(circle closest-side, #000 94%, rgba(0, 0, 0, 0)) right/calc(200% - 1em) 100%;
    animation: l24 1s infinite alternate linear;
}

    .loader-text::before {
        content: "Yükleniyor...";
        line-height: 1em;
        color: rgba(0, 0, 0, 0);
        background: inherit;
        background-image: radial-gradient(circle closest-side, #fff 94%, #000);
        -webkit-background-clip: text;
        background-clip: text;
    }

@keyframes l24 {
    100% {
        background-position: left;
    }
}

.form {
    padding: 20px 30px;
    background-color: #fff;
    border: solid 1px #f0f0f0;
    border-radius: 10px;
}

    .form .form-area {
        margin: 10px 0;
    }

        .form .form-area label {
            display: block;
            font-size: 14px;
            font-weight: 500;
            color: #000;
            margin-bottom: 5px;
        }

        .form .form-area textarea,
        .form .form-area input[type="text"],
        .form .form-area input[type="email"],
        .form .form-area input[type="number"],
        .form .form-area input[type="date"] {
            height: 35px;
            line-height: 35px;
            padding: 0 10px;
            width: 100%;
            color: #333;
            border: solid 1px #f0f0f0;
            font-size: 14px;
        }

        .form .form-area select {
            height: 35px;
            line-height: 35px;
            padding: 0 10px;
            width: 100%;
            color: #333;
            border: solid 1px #f0f0f0;
            font-size: 14px;
        }

        .form .form-area input[type="radio"] {
            display: none;
        }

            .form .form-area input[type="radio"] + label {
                display: inline-block;
                vertical-align: middle;
                font-size: 12px;
                font-weight: 400;
                line-height: 1em;
                color: #000000;
                vertical-align: middle;
                margin-right: 20px;
                cursor: pointer;
            }

                .form .form-area input[type="radio"] + label::before {
                    content: "";
                    display: inline-block;
                    width: 15px;
                    height: 15px;
                    border: solid 1px #197bbd;
                    border-radius: 50%;
                    background-color: #fff;
                    vertical-align: middle;
                    margin-right: 5px;
                }

            .form .form-area input[type="radio"]:checked + label::before {
                border: solid 1px #197bbd;
                background-color: #197bbd;
            }

        .form .form-area.error {
            color: red;
        }

            .form .form-area.error label {
                color: red;
            }

            .form .form-area.error textarea,
            .form .form-area.error input[type="text"],
            .form .form-area.error input[type="email"],
            .form .form-area.error input[type="number"],
            .form .form-area.error input[type="date"] {
                border: solid 1px red;
                color: red;
            }

            .form .form-area.error select {
                border: solid 1px red;
                color: red;
            }

            .form .form-area.error input[type="radio"] {
                display: none;
            }

                .form .form-area.error input[type="radio"] + label {
                    font-size: 12px;
                    font-weight: 400;
                    line-height: 1em;
                    color: red;
                }

                    .form .form-area.error input[type="radio"] + label::before {
                        border: solid 1px red;
                        color: red;
                    }

.lmsmodal {
    position: fixed;
    z-index: 1060;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: table;
    transition: opacity 0.3s ease;
    font-size: 14px;
    /*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
   * by Vue.js.
   *
   * You can easily play with the modal transition by editing
   * these styles.
   */
}

    .lmsmodal .modal-wrapper {
        display: table-cell;
        vertical-align: middle;
        padding: 20px;
    }

    .lmsmodal .modal-container {
        width: 100%;
        max-width: 1000px;
        margin: 0px auto;
        padding: 20px 30px;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
        transition: all 0.3s ease-in-out;
    }

    .lmsmodal .modal-header {
        display: table;
        width: 100%;
    }

        .lmsmodal .modal-header h3 {
            font-size: 2.6rem;
            font-weight: 700;
            display: table-cell;
            vertical-align: middle;
            width: calc(100% - 30px);
        }

        .lmsmodal .modal-header .header-close {
            display: table-cell;
            width: 30px;
            height: 30px;
        }

            .lmsmodal .modal-header .header-close span {
                font-size: 2.2rem;
                border: none;
                background: none;
                display: inline-block;
                text-align: center;
                cursor: pointer;
                width: 30px;
                height: 30px;
                line-height: 30px;
                transition: all 0.3s ease-in-out;
                aspect-ratio: 1;
            }

                .lmsmodal .modal-header .header-close span:hover {
                    transform: rotate(-90deg);
                    transform-origin: center center;
                }

    .lmsmodal .modal-body {
        margin: 20px 0;
        max-height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
    }

    .lmsmodal .modal-default-button {
        float: right;
    }

    .lmsmodal .modal-enter-from,
    .lmsmodal .modal-leave-to {
        opacity: 0;
    }

    .lmsmodal .modal-enter-active .modal-container,
    .lmsmodal .modal-leave-active .modal-container {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
/*# sourceMappingURL=site.css.map */