@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap');

html { font-size: 14px; }
body { font-size: 15px; line-height: 30px; font-weight: 400; color: #f8f9fa; font-family: 'Roboto', sans-serif; padding: 0; margin: 0; background-color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body, html { -moz-osx-font-smoothing: grayscale; }
a { text-decoration: none; }
a:hover, a:focus { text-decoration: none; outline: none; outline-offset:0; color: #fbfbfb; }
a, a.nav-link, a:active, a:focus { color: #ffffff; }
a, a.nav-link, .btn, input, textarea, select { transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; }
video { background-size: cover; display: table-cell; vertical-align: middle; width: 100%; }
/* p { margin: 0 0 25px; } */
b, strong { font-weight: 600; color: rgb(218, 218, 218); cursor: pointer; }
.alt-font strong { font-weight: 600; }
.last-paragraph-no-margin p:last-of-type { margin-bottom:0; }
ul, ol, dl { list-style-position: outside; margin-bottom: 25px; }
ul.fullscreen-hover-list.light {flex-shrink: 0;}
input, textarea, select { border: 1px solid #dfdfdf; padding: 10px 15px; width: 100%; margin: 0 0 15px 0; max-width: 100%; resize: none; outline: none; color: #828282; line-height: initial; word-break: initial; }
select { background-image: url(../images/down-arrow.png); background-position: right 14px center; background-repeat: no-repeat; background-size: 10px; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;}
input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; }

input[type="submit"] { width: auto; }
input[type="button"], input[type="text"], input[type="email"], input[type="search"], input[type="password"], textarea, input[type="submit"], input[type="tel"] { -webkit-appearance: none; }
input:focus, textarea:focus { border: 1px solid #b9b9b9; outline: none; }
input[type="submit"]:focus { outline: none; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;  }
input::-ms-clear { display: none; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active { transition: background-color 5000s; transition: all 0s 50000s;  -webkit-animation-name: autofill; -webkit-animation-fill-mode: both;  }
select::-ms-expand { display:none; }
iframe { border: 0; }
/* button, button:focus, button:hover { outline: none; } */
.main-content { z-index: 2; background-color: #fff; overflow: visible; position: relative; }

::selection { color: #000; background:#dbdbdb; }
::-moz-selection { color:#a6a6a6; background:#dbdbdb; }
::-webkit-input-placeholder { color: #a6a6a6; text-overflow: ellipsis; }
::-moz-placeholder { color: #a6a6a6; text-overflow: ellipsis; opacity:1; }
:-ms-input-placeholder { color: #a6a6a6; text-overflow: ellipsis; opacity:1; }

.placeholder-light::-webkit-input-placeholder { color: #fff; }
.placeholder-light::-moz-placeholder { color: #fff;}
.placeholder-light:-ms-input-placeholder { color: #fff;}

.placeholder-dark::-webkit-input-placeholder { color: #232323; }
.placeholder-dark::-moz-placeholder { color: #232323;}
.placeholder-dark:-ms-input-placeholder { color: #232323;}

.no-transition { transition: all 0s ease-in-out !important; -moz-transition: all 0s ease-in-out !important; -webkit-transition: all 0s ease-in-out !important; -ms-transition: all 0s ease-in-out !important; -o-transition: all 0s ease-in-out !important; }
.transition { transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; }

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { padding-right: 15px; padding-left: 15px; }
.row { margin-right: -15px; margin-left: -15px; }
.row>* { padding-right: 15px; padding-left: 15px; }
.row.g-0 { margin-right: 0; margin-left: 0; }
.row.g-0>* { padding-right: 0; padding-left: 0; }


.alt-font { font-family: 'Poppins', sans-serif; }
.main-font { font-family: 'Roboto', sans-serif !important; }

.font-size-0 { font-size: 0; }
.text-extra-small { font-size:12px; line-height:16px; }
.text-very-small { font-size:11px; line-height:14px; }
.text-small { font-size:13px; line-height:22px; }
.text-medium { font-size:14px; line-height:20px; }
.text-extra-medium { font-size:16px; line-height:28px; }
.text-large { font-size:18px; line-height:22px; text-align: center; }
.text-extra-large { font-size: 20px; line-height:28px; }
.title-extra-small { font-size: 30px; line-height: 32px; }
.title-small { font-size: 36px; line-height: 42px; }
.title-large { font-size: 100px; line-height:95px; }
.title-large-2 { font-size: 70px; line-height:80px; }
.title-large-3 { font-size: 67px; line-height:78px; }
.title-extra-large { font-size: 130px; line-height:120px; }
.title-extra-large-heavy { font-size: 11rem; line-height: 11rem; }
.text-big{ font-size: 200px; line-height: 200px;}
.text-extra-big{ font-size: 230px; line-height: 230px;}
.text-extra-big-2{ font-size: 300px; line-height: 260px;}
.parallax-title { padding: 16px 35px; display: inline-block }

.font-weight-100 { font-weight: 100 !important; }
.font-weight-200 { font-weight: 200 !important; }
.font-weight-300 { font-weight: 300 !important; }
.font-weight-400 { font-weight: 400 !important; }
.font-weight-500 { font-weight: 500 !important; }
.font-weight-600 { font-weight: 600 !important; }
.font-weight-700 { font-weight: 700 !important; }
.font-weight-800 { font-weight: 800 !important; }
.font-weight-900 { font-weight: 900 !important; }

/* text property */
.text-normal { text-transform: unset !important; }
.text-decoration-underline { text-decoration:underline; }
.text-decoration-none { text-decoration: none; }
.word-wrap { word-wrap: break-word; }
.text-transform-none { text-transform:none; }
.line-height-unset { line-height: unset; }
.line-height-normal { line-height: normal; }
.line-height-none { line-height: 0; }
.text-decoration-line-through { text-decoration:line-through; }
.text-decoration-underline-yellow { text-decoration: underline; text-decoration-color: #fee11c; -webkit-text-decoration-color: #fee11c; }
.text-highlight { padding: 4px 16px }

.background {display:none;}

/*04. Background color */
.bg-white { background-color:#FFF; }
.bg-black { --bs-bg-opacity: 1; background-color: rgba(var(--bs-black-rgb),var(--bs-bg-opacity))}
.bg-medium-gray { background-color:#e4e4e4; }


section { padding: 130px 0; overflow: hidden; flex-wrap: wrap; }
section.big-section { padding:160px 0; }
section.extra-big-section { padding:200px 0; }
section.half-section { padding:80px 0; }
.cursor-none { cursor: none; }
.cursor-default { cursor: default; }

.opacity-2-half { opacity:0.25; }
.opacity-2 { opacity:0.2; }
.opacity-7 { opacity:0.7; }
.opacity-7-half { opacity:0.75; }
.opacity-8 { opacity:0.8; }
.opacity-8-half { opacity:0.85; }
.opacity-9 { opacity:0.9; }
.opacity-9-half { opacity:0.95; }

.z-index-1 { z-index:1; }


.absolute-middle-center { left: 50%; top: 50%; position: absolute; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); }
.absolute-middle-center.move-top-bottom, .absolute-middle-center.move-bottom-top { margin-left: -10px; margin-top: -10px; }


.btn-linkthin { display:block; padding: 7px 0 2px; position: relative; text-align: center; text-decoration: none; background-color: transparent; color: bisque; }
.btn-link.thin:hover, .btn.btn-link-gradient:hover { opacity: .7; }


/* ===================================
    09. Background image
====================================== */
.cover-background { background-repeat: no-repeat !important; background-size:cover; overflow: hidden; position: relative; background-position: center; }
.fix-background { position: relative; background-size: cover;-webkit-animation-duration: 0s; -webkit-animation-fill-mode: none; overflow: hidden; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; }
.background-size-inherit { background-size: inherit; }
.background-attachment-inherit { background-attachment: inherit; }
.background-position-left { background-position: left center; }
.background-position-left-bottom { background-position: left bottom; }
.background-position-right { background-position: right center; }
.background-position-top { background-position: right top; }
.background-position-center-top { background-position: center top; }
.background-position-right-bottom { background-position: right bottom; }
.background-position-center-bottom { background-position: center bottom !important; }
.background-repeat { background-repeat:repeat; }
.background-no-repeat { background-repeat:no-repeat; }
.background-position-center { background-position: center; }
.up-down-ani { display:table; position: relative; -webkit-animation-name: down-arrow; -webkit-animation-duration:0.8s; -webkit-animation-timing-function: linear; -webkit-animation-delay:0.8s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-name: down-arrow; animation-duration:0.8s; animation-timing-function: linear; animation-delay:0.8s; animation-iteration-count: infinite; animation-direction: alternate; margin:0 auto; }
.cover-img { object-fit: cover; height: 100%; }

/* background parallax */
.parallax { position: relative !important; background-size: cover !important; overflow: hidden; background-attachment: fixed !important; transition-duration: 0s; -moz-transition-duration: 0s; -webkit-transition-duration: 0s; -o-transition-duration: 0s; }
.parallax-fix { background-attachment: fixed !important; background-position: center center; background-repeat: no-repeat; background-size: cover !important; overflow: hidden; position: relative; transition-duration: 0.2s; transition-timing-function: ease-in; }

/* interactive list style */


#boxlink2, #boxlink3, #boxlink4, #boxlink5 {
    display:none;
}
.card > div {
    text-align: center;
}
.card {
    /* width: 500px; */
    height: 630px;
    background-color: transparent;
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-radius: 30px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    padding: 20px;
    border: 1px solid;
    flex: 0 1 490px;
}

img {
    width: 70%;
    border-radius: 209px;
    position: relative;
}

.card h2 {
    font-size: 30px;
    text-align: center;
}
.card p {
    font-size: 20px;
    text-align: center;
}

.fullscreen-hover-list .wrap { display: flex; justify-content: space-around; align-items: center; padding-top:100px; padding-bottom:100px;}
.fullscreen-hover-list .hole { max-height: 100vh; overflow:hidden; }
.fullscreen-hover-list .hover-list-item { display: table; }
.fullscreen-hover-list .hover-list-item a { display: inline-block; }
.fullscreen-hover-list .hover-list-item .fullscreen-hover-image,
.header .click-list-tab .fullscreen-hover-image { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; }
.fullscreen-hover-list .hover-list-item.active .fullscreen-hover-image { opacity: 0.5; visibility: visible; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s;  }
.fullscreen-hover-list .hover-list-item .interactive-title { display: inline-block; vertical-align: middle; padding: 31px 35px; color: transparent; -webkit-text-stroke: 2px #000; text-stroke: 2px #000; position: relative; }
.fullscreen-hover-list.light .hover-list-item .interactive-title { color: #3e3e3e; -webkit-text-stroke: 2px #a2a2a2; text-stroke: 2px #4e4e4f; -webkit-text-fill-color: transparent; -webkit-background-clip: text; transition-duration: 0.5s; }
.fullscreen-hover-list.light .hover-list-item:hover .interactive-title {color:#fff; -webkit-text-stroke: 0 #4e4e4f; text-stroke: 0 #4e4e4f; transition-duration: 0.5s; transition-timing-function: ease-in-out;}
.fullscreen-hover-list .hover-list-item .interactive-title:after { content: attr(data-link-text); position: absolute; left: 35px; bottom: 30px; width: 0; height: calc(100% - 60px); -webkit-text-fill-color: #000; transition-duration: 0.4s; overflow: hidden; transition-timing-function: ease-in-out; }
.fullscreen-hover-list.light .hover-list-item .interactive-title:after { -webkit-text-fill-color: #fff; }
.fullscreen-hover-list .hover-list-item.active .interactive-title:after { width: calc(100% - 70px); transition-duration: 0.7s; transition-timing-function: ease-in-out; white-space: nowrap; }
.fullscreen-hover-list .hover-list-item .interactive-number { opacity: .3; display: inline-block; vertical-align: middle; transition-duration: 0.7s; transition-timing-function: ease-in-out; }
.fullscreen-hover-list .hover-list-item.active .interactive-number { opacity: 1; transform: translateX(65px); transition-duration: 0.7s; transition-timing-function: ease-in-out; }
.fullscreen-hover-list .hover-list-item .interactive-line { display: inline-block; vertical-align: middle; width: 30px; height: 1px; margin-left: 35px; transition-duration: 0.7s; transition-timing-function: ease-in-out; }
.fullscreen-hover-list .hover-list-item.active .interactive-line { transform: scale(0); opacity: 0; transition-duration: 0.7s; transition-timing-function: ease-in-out; }
.fullscreen-hover-list .hover-list-item.active .interactive-title {color:#fff; -webkit-text-stroke: 0 #4e4e4f; text-stroke: 0 #4e4e4f; }
.fullscreen-hover-list .hover-list-item .interactive-icon { vertical-align: middle; line-height: normal; font-size: 50px; position: relative; top: 6px; opacity: 0; visibility: hidden; transition-duration: .5s; transition-timing-function: ease-in-out; }

.english-btn {
    position: relative;
    padding: 10px 20px;
    border-radius: 7px;
    border: 1px solid rgb(61, 106, 255);
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 2px;
    background: transparent;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    /* left: 35%;
    top: 0%; */
}
  
.english-btn:hover {
    background: rgb(61, 106, 255);
    box-shadow: 0 0 30px 5px rgba(0, 142, 236, 0.815);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
  
.english-btn:hover::before {
    -webkit-animation: sh02 0.5s 0s linear;
    -moz-animation: sh02 0.5s 0s linear;
    animation: sh02 0.5s 0s linear;
}
  
.english-btn::before {
    content: '';
    display: block;
    width: 0px;
    height: 86%;
    position: absolute;
    top: 7%;
    left: 0%;
    opacity: 0;
    background: #fff;
    box-shadow: 0 0 50px 30px #fff;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
}
  
@keyframes sh02 {
    from {
      opacity: 0;
      left: 0%;
    }
  
    50% {
      opacity: 1;
    }
  
    to {
      opacity: 0;
      left: 100%;
    }
}
  
.english-btn:active {
    box-shadow: 0 0 0 0 transparent;
    -webkit-transition: box-shadow 0.2s ease-in;
    -moz-transition: box-shadow 0.2s ease-in;
    transition: box-shadow 0.2s ease-in;
}