:root {
  --white: #fff;
  --blue: #0071bc;
  --blue-2: #00aaff;
  --border-blue: rgba(0, 170, 255, 0.7);
  --black: #000000;
  --white_02: rgba(255, 255, 255, 0.2);
  --input-border: #00aaff;
  --black_04: rgba(0, 0, 0, 0.4);
  --blue_09: rgba(0, 113, 188, 0.9);
  --error: #ff4d4d;
}

html {
    height: 100%; margin: 0; font-family: "Roboto", sans-serif; color: var(--white); background: var(--black); background-repeat: no-repeat;
    background-size: cover;
}

body {
    height: 100%; margin: 0; 
}

video {
    position: fixed; right: 0; bottom: 0; min-width: 100%; min-height: 100%;
}

a {
    text-decoration: none; color: var(--white);
}

p {
    margin: 0;
}

h1, h2, h3 {
    margin: 0;
}

.header {
    margin-top: 90px; display: flex; align-items: center;
}

.header .separator {
    height: 48px; width: 1px; background: var(--white); margin: 0 58px;
}

.header .ai_powered_technology {
    font-size: 20px; text-transform: uppercase;
}

.header .language {
    margin-left: auto; position: relative; 
}

.header .language img {
    width: 20px;
}

.header .language .current {
    display: flex; align-items: center; gap: 8px;
}

.header .language .current:hover {
    transition: 0.3s; cursor: pointer;
}

.header .language .list {
    display: none; position: absolute; top: -6px; flex-direction: column; width: 100px; margin-top: 26px; width: 100%;
}

.header .language .list a {
    padding: 4px 0; border-bottom: 1px solid var(--white_02); font-size: 13px; color: var(--white); padding: 8px 0; display: block; background: var(--header-bg);
    display: flex; align-items: center; gap: 12px;
}

.header .language .list a:last-child {
    border-bottom: none;
}

.header .language .down {
    margin-left: 20px;
}

.site {
    position: absolute; width: 100%; top: 0; left: 50%; max-width: 1305px; transform: translateX(-50%);
}

.site .boxes {
    display: flex; gap: 12px; margin-top: 168px;
}

.site .boxes .box {
    border-bottom-left-radius: 32px; border-top-right-radius: 32px; padding: 50px 50px 40px 50px; box-sizing: border-box; border: solid 1px var(--border-blue);
    background: linear-gradient(180deg, rgba(0, 113, 188, 0) 0%, #001726 100%), linear-gradient(180deg, rgba(0, 170, 255, 0.27) 0%, rgba(0, 170, 255, 0.473958) 24.79%, rgba(0, 170, 255, 0.53) 51.79%, #00aaff 100%);
}

.site .boxes .box h1 {
    background: linear-gradient(180deg, #71d0ff 0%, #c6ecff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 60px; line-height: 60px; 
    margin-bottom: 25px;
}

.site .boxes .box img {
    display: block;
}

.site .boxes .box img.line {
    margin-left: 6px;
}

.site .boxes .box .btn_contact_us {
    background: var(--blue); color: var(--white); padding: 14px 38px; display: inline-block; border-bottom-left-radius: 28px; border-top-right-radius: 28px; margin-top: 40px;
    font-size: 20px; font-weight: 700;
}

.site .boxes .box:nth-child(1) {
    width: 53%; 
}
.site .boxes .box:nth-child(2) {
    width: 47%; padding: 0 30px; display: flex;
}

.site .boxes .box .links {
    display: flex; width: 100%; align-items: center;
}

.site  .boxes .box .links .inner {
    display: flex; width: 100%; justify-content: space-between;
}

.site .boxes .box .links .inner .l {
    width: calc(25% - 16px);
}

.site .boxes .box .links .inner .l .circle {
    width: 100%; border: solid 1px var(--border-blue); border-radius: 50%; box-shadow: 0px 0px 10px 4px rgba(0, 170, 255, 0.22); position: relative; cursor: pointer; transition: 0.3s;
    display: block;
}

.site .boxes .box .links .inner .l .circle::before {
    content: ""; display: block; padding-bottom: 100%;
}

.site .boxes .box .links .inner .l .circle img {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 0.3s;
}

.site .boxes .box .links .inner .l .circle .link {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--blue-2); width: 64px; height: 36px; border-radius: 12px; opacity: 0; transition: 0.3s;
}

.site .boxes .box .links .inner .l .circle_on {
    box-shadow: 0px 0px 10px 4px rgba(0, 170, 255, 0.60); transition: 0.3s;
}

.site .boxes .box .links .inner .l .circle_on .link {
    opacity: 1; transition: 0.3s;
}

.site .boxes .box .links .inner .l .circle_on img.icon {
    opacity: 0.4; transition: 0.3s;
}

.site .boxes .box .links .inner .l p {
    font-size: 12px; line-height: 14.5px; text-align: center; margin-top: 18px;
}

.footer {
    margin-top: 100px; display: flex; justify-content: space-between; font-size: 20px; padding-bottom: 40px;
}

.footer a {
    color: var(--white);
}

.footer .box {
    display: flex; gap: 12px; align-items: center;
}

.site form {
    width: 780px; margin: 110px auto 0 auto;
}

.site .contact_us {
    background: linear-gradient(132.31deg, rgba(0, 25, 42, 0.6) 15.83%, rgb(0, 25, 42, 0.5) 65.05%); padding: 40px 0; margin-top: 40px;
    border-bottom-left-radius: 32px; border-top-right-radius: 32px; backdrop-filter: blur(12px);
}

.site .contact_us .container {
    width: 630px; margin: 0 auto;
}

.site .contact_us .container .row {
    display: flex; gap: 46px; width: 100%;
}

.site .contact_us .container .row .group {
    width: 50%; margin-bottom: 26px; max-width: 290px;
}

.site .contact_us .container .row .group_extended {
    width: 100%; margin-bottom: 26px; max-width: 626px;
}

.site .contact_us .container .row .group p {
    padding-bottom: 18px; font-size: 14px; font-weight: 700;
}

.site .contact_us .container .row input {
    border: solid 1px var(--input-border); background: var(--black_04); border-radius: 4px; padding: 13px 12px; box-sizing: border-box; width: 100%; outline: none; color: var(--white);
    font-size: 16px; font-weight: 400;
}

.site .contact_us .container .row select {
    border: solid 1px var(--input-border); background: var(--black_04); border-radius: 4px; padding: 13px 12px; box-sizing: border-box; width: 100%; outline: none; color: var(--white);
    font-size: 16px; font-weight: 400;
}

.site .contact_us .container .row select option {
    color: var(--black); background: var(--white);
}

.site .contact_us .container .row textarea {
    border: solid 1px var(--input-border); background: var(--black_04); color: var(--white); font-size: 14px; width: 100%; padding: 14px 12px; border-radius: 4px; box-sizing: border-box;
    outline: none;
}

.site .contact_us .container button {
    background: var(--blue); color: var(--white); padding: 14px 58px; display: inline-block; border-bottom-left-radius: 28px; border-top-right-radius: 28px;
    font-size: 20px; font-weight: 700; outline: none; border: none; cursor: pointer;
}

.site .contact_us .container .error p {
    color: var(--error);
}

.site .contact_us .container .error input, .site .contact_us .container .error textarea, .site .contact_us .container .error select {
    border: solid 1px var(--error);
}

.site .h {
    display: flex; align-items: center;
}

.site .h .back {
    color: var(--white); font-weight: 700; display: flex; gap: 6px; align-items: center; text-decoration: none; position: absolute;
}

.site .h .title {
    margin: 0 auto; font-size: 20px; font-weight: 700;
}

.thank_you {
    text-align: center; width: 100%; display: none;
}

.thank_you .circle {
    width: 146px; height: 146px; border-radius: 100%; box-shadow: 0px 0px 10px 4px rgba(0, 170, 255, 0.22); border: solid 1px var(--blue-2); display: flex; justify-content: center; 
    align-items: center; margin: 0 auto;
}

.thank_you h3 {
    font-size: 36px; font-weight: 700; color: var(--blue-2); text-transform: uppercase; margin: 20px 0;
}

.thank_you .text {
    font-size: 32px; color: var(--white);
}

.thank_you .button {
    background: var(--blue); color: var(--white); padding: 14px 100px; display: inline-block; border-bottom-left-radius: 28px; border-top-right-radius: 28px;
    font-size: 20px; font-weight: 700; outline: none; border: none; cursor: pointer; margin-top: 40px;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--black);
}

::-webkit-scrollbar-thumb {
  background: var(--blue);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--blue-2);
}

@media only screen and (max-width: 1350px) {
    .site .boxes {
        margin: 100px 12px 0 12px;
    }
    
    .site .boxes .box h1 {
        font-size: 50px; line-height: 50px;
    }
    
    .header {
        margin: 60px 12px 0 12px;
    }
    
    .footer {
        margin: 100px 12px 0 12px;
    }
}

@media only screen and (max-width: 1000px) {
    .site .boxes .box h1 {
        font-size: 40px; line-height: 40px;
    }
    
    .site .boxes .box {
        padding: 40px 12px 30px 12px;
    }
    
    .site .boxes .box:nth-child(2) {
        padding: 0 10px;
    }
    
    .site .boxes .box .links .inner .l .circle img {
        width: 60%;
    }
    
    .footer {
        font-size: 16px;
    }
}

@media only screen and (max-width: 900px) {
    .footer {
        margin: 60px 12px 0 12px; flex-direction: column; gap: 12px;
    }
    
    .header .separator {
        margin: 0 20px;
    }
    
    .header img.logo {
        width: 160px;
    }
    
    .header .ai_powered_technology {
        font-size: 16px;
    }
}

@media only screen and (max-width: 800px) {
    .site form {
        width: calc(100% - 24px);
    }
    
    .site .contact_us {
        padding: 20px;
    }
    
    .site .contact_us .container {
        width: 100%;
    }
    
    .site .contact_us .container .row {
        justify-content: center;
    }
}

@media only screen and (max-width: 760px) {
    .site .boxes {
        flex-direction: column;
    }
    
    .site .boxes .box:nth-child(1) {
        width: 100%;
    }
    
    .site .boxes .box:nth-child(2){
        width: 100%; padding: 40px 12px 30px 12px;
    }
    
    .site .boxes .box .links .inner {
        justify-content: space-evenly;
    }
    
    .site .boxes .box .links .inner .l {
        max-width: 140px;
    }
    
    html {
        background-image: url("../images/bg.jpg");
    }
    
    video {
        display: none;
    }
}

@media only screen and (max-width: 700px) {
    .header img.logo {
        width: 120px;
    }
        
    .header .separator {
        margin: 0 12px; height: 24px;
    }
    
    .header .ai_powered_technology {
        font-size: 14px;
    }
}

@media only screen and (max-width: 500px) {
    .header {
        justify-content: center; flex-direction: column; gap: 12px;
    }
    
    .header .separator {
        display: none;
    }
    
    .header img.logo {
        width: 160px;
    }
    
    .header .language {
        position: absolute; top: 12px; right: 12px;
    }
    
    .site .boxes {
        margin: 40px 12px 0 12px;
    }
    
    .site .boxes .box .links .inner {
        justify-content: space-between;
    }
    
    .site form {
        margin-top: 40px;
    }
}

@media only screen and (max-width: 460px) {
    .site .boxes .box {
        padding: 20px 12px;
    }
    
    .site .boxes .box:nth-child(2) {
        padding: 20px 12px;
    }
    
    .site .boxes .box h1 {
        font-size: 32px; line-height: 36px;
    }
    
    .site .contact_us {
        padding: 12px;
    }
    
    .site .contact_us .container .row {
        flex-direction: column; gap: 0;
    }
    
    .site .contact_us .container .row .group {
        width: 100%; max-width: 100%; margin-bottom: 8px;
    }
    
    .site .contact_us .container .row .group p {
        padding-bottom: 4px;
    }
    
    .footer {
        margin: 32px 12px 0 12px; padding-bottom: 20px;
    }
}