@import "/external/gozha-nav/gozha-nav.css";

@media (min-width: 768px) {
    #floating-button {
        display: none;
    }

    .step-arrow::after {
        top: 50%;
        left: 100%;
        transform: translateY(-50%);
        border-color: transparent transparent transparent #3b82f6;
    }

    #container-header {
        height: 100px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #contact-header {
        float: right !important;
        width: auto;
    }

    #rounded-button-header {
        background-color: #5DD561; /* 背景颜色 */
        border: none; /* 无边框 */
        color: white; /* 文字颜色 */
        padding: 5px 25px; /* 内边距 */
        text-align: center; /* 文本居中 */
        text-decoration: none; /* 文本装饰 */
        display: inline-block; /* 显示为内联块 */
        font-size: 20px; /* 字体大小 */
        margin: 4px 2px; /* 外边距 */
        cursor: pointer; /* 鼠标悬停时的光标样式 */
        border-radius: 8px; /* 圆角半径 */
        transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
    }

    ul#navigation > li:hover > ul {
        position: absolute;
        top: 75px;
        left: 0;
        z-index: 200;
        display: block;
        min-width: 200px;
        padding: 0 15px;
        background: rgba(19,28,59,.8);
        -webkit-transform-origin: left top;
        -moz-transform-origin: left top;
        -ms-transform-origin: left top;
        transform-origin: left top;
        -webkit-animation: anime 500ms;
        -o-animation: anime 500ms;
        animation: anime 500ms;
    }

    #contact-footer {
        display: none;
    }
}

@media (max-width: 767px) {
    /* 悬浮按钮的基本样式 */
    #floating-button {
        position: fixed; /* 固定定位 */
        bottom: 20px; /* 距离底部20px */
        right: 20px; /* 距离右边20px */
        /* width: 60px; 按钮宽度 */
        /* height: 60px; 按钮高度 */
        background-color: #5DD561; /* 背景颜色 */
        color: white; /* 文字颜色 */
        display: flex; /* 使用Flex布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        cursor: pointer; /* 鼠标悬停时显示为手指形状 */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 添加阴影 */
        z-index: 1000; /* 确保按钮在其他内容之上 */
        border: none; /* 无边框 */
        border-radius: 20px; /* 圆角半径 */
        /* border-radius: 50%; 圆形按钮 */
        transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
        padding: 40px 15px; /* 内边距 */
        text-align: center; /* 文本居中 */
        text-decoration: none; /* 文本装饰 */
        font-size: 12px; /* 字体大小 */
        margin: 4px 2px; /* 外边距 */
    }

    #container-header {
        height: 100px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        justify-content: flex-end;
    }

    #contact-header {
        display: none;
    }

    #rounded-button-header {
        display: none;
    }

    ul#navigation > li > a {
        padding: 12px 0 16px;
        color: #53bcfd;
    }

    ul#navigation > li > a:hover {
        background: transparent;
        color: #63f5ff;
    }

    ul#navigation > li:hover {
        padding-bottom: 0;
    }

    ul#navigation > li:after {
        display: none;
    }

    ul#navigation {
        top: 120px;
        right: 0;
        min-width: 230px;
        background: rgba(33, 44, 67, 0.8);
    }

    ul#navigation a {
        padding: 7px 17px 8px;
        color: #53bcfd;
    }

    ul#navigation a:hover {
        color: #63f5ff;
    }
}

@media only screen and (min-width: 0px) and (max-width: 479px) {
    .logobg {
        display: block;
        background: url(../images/logol.png) no-repeat center;
        background-size: contain;
    }

    .logobg img {
       display: none;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .logobg {
        display: block;
        background: url(../images/logol.png) no-repeat center;
        background-size: contain;
    }

    .logobg img {
        display: none;
    }
}

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
}

.main-nav {
    height: 85px;
    background: #fff;
}

.logo {
    padding-top: 12px;
    padding-left: 2px;
    padding-right: 10px;
}

.logo-img {
    margin-bottom: 26px;
}

.divider-circle {
    position: relative;
    padding-top: 1px;
    border-top: 1px solid #0d1629;
    border-bottom: 1px solid #0d1629;
}

.pull-right {
    float: right !important;
}

#navigation-box {
    padding: 0;
    margin: 0;
    background-color: transparent;
}

#navigation-toggle {
    width: 50px;
    height: 50px;
    margin-top: 14px;
    background-color: #53bcfd;
    border-color: #131c3b;
}

.sub-nav-toggle {
    background-color: #131c3b;
}

.sub-nav-toggle.plus {
    background-color: #131c3b;
}

#navigation-toggle.open-menu {
    background-color: #f29090;
    border-color: #f29090;
}

ul#navigation ul {
    background-color: #131c3b;
}

ul#navigation li {
    padding: 7px 0 8px;
    border-bottom-color: #131c3b;
}

ul#navigation a:hover {
    color: #63f5ff;
}

ul#navigation .active-item > a {
    color: #f75c2f;
}

ul#navigation > li > a {
    padding: 29px 12px 27px;
    color: #53bcfd;
}

ul#navigation > li > a:hover {
    background: rgba(19,28,59, 0.5);
}

ul#navigation > li {
    position: relative;
    padding: 0;
    line-height: 20px;
}

ul#navigation > li:hover {
    padding-bottom: 1px;
}

ul#navigation > li:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    background: #131c3b;
    -webkit-transition: all 0 ease-in;
    -moz-transition: all 0 ease-in;
    -o-transition: all 0 ease-in;
    transition: all 0 ease-in;
    -webkit-transform: translateY(-17px);
    -moz-transform: translateY(-17px);
    -o-transform: translateY(-17px);
    -ms-transform: translateY(-17px);
    transform: translateY(-17px);
    opacity: 0;
    filter: alpha(opacity=0);
}

ul#navigation > li:hover:after {
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    -o-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -o-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    filter: alpha(opacity=100);
}

.presentation {
    height: 120px;
}