main .flex-box2 { display: flex; flex-wrap: wrap }
main .flex-box2 > * { display: flex; flex-direction: column; flex: 0 0 25%; padding: 0 10px; margin: 10px 0 }
main .flex-box2 > *:nth-child(1) { align-items: flex-end }
main .flex-box2 > *:nth-child(2) { align-items: flex-start }
.team-detail p { font-family: 'Playfair Display', sans-serif; font-weight: lighter; line-height: 25px; font-size: 1.1875rem; text-align: justify; }
.project-p { color: #fff; margin-bottom: 1.5rem !important; margin-top: 1rem !important; }


.language-box { position: relative; margin-left: 6px; min-width: 52px; text-align: center; padding: 5px; cursor: pointer; }

.language-box ul { position: absolute; top: 100%; width: 100%; left: 0; padding: 5px; background: #1f2126; z-index: 11; list-style: none; opacity: 0; pointer-events: none; -webkit-transition: all ease .3s; transition: all ease .3s; }

.language-box ul li { -webkit-transition: all ease .3s; transition: all ease .3s; width:100%; }

.language-box ul li a { color: #fff; }

.language-box ul li:hover { background: #717173; }
.language-box:hover ul.list-group { opacity: 1; pointer-events: visible; }

main .flex-box2 .card-box { max-width: 13vw; min-width:250px; }

@keyframes stroke {
    100% { stroke-dashoffset: 0 }
}

@keyframes stroke-opacity {
    100% { opacity: .85; transform: translateY(0) }
}

@media (max-width: 1199.98px) {
    .-f15 { font-size: .73rem }
    .-f16, .-f17, .form-control:not([class*=-f]), .btn:not([class*=-f]) { font-size: 0.9375rem }
    .-f18, h6 { font-size: 1rem }
    .-f19, .swiper-button-custom:after { font-size: 1.0625rem }
    .-f22, .lead { font-size: 1.175rem }
    .h5, h5 { font-size: 1.2rem }
    .h4, h4 { font-size: 1.3rem }
    .h3, h3 { font-size: 1.4rem }
    .h2, h2 { font-size: 1.5rem }
    .h1, h1 { font-size: 1.7rem }
    .display-4 { font-size: 2rem }
    main .flex-box2 > * { flex: 0 0 33.33333% }
    main .flex-box2 .card-box { max-width: 18.2vw }
    main .flex-box2 .card-box .-f15 { font-size: .75rem }
    main .flex-box2 .card-box .-f14 { font-size: .65rem; line-height: 1.2 }
}

@media (max-width: 991.98px) {
    header.site-head { position: fixed !important }
    header.site-head nav { position: fixed; top: 97px; width: 85%; min-width: 320px; max-width: 496px; bottom: 0; left: -100%; background-color: #1d1c1f; opacity: 0; user-select: none; pointer-events: none; padding-top: 12vh; padding-bottom: 5vh; transition: all ease .5s .1s; z-index: 1 }
    header.site-head nav > ul { overflow: auto; padding-left: 45px }
    header.site-head nav > ul li { width: 100%; opacity: 0; align-items: flex-start; transform: translateX(-30px); transition-timing-function: ease; transition-property: all; transition-duration: .3s }
    header.site-head nav > ul li a { font-size: 1rem; font-weight: bold; color: #fff !important; padding: 12px 0 }
    header.site-head nav > ul li a.active:after { bottom: 6px; width: 100%; border-bottom-width: 3px; background-color: #ffdd00 }
    header.site-head nav > ul li .mega-menu { background-color: transparent !important }
    header.site-head nav > ul li .mega-menu a { font-size: .85rem; font-weight: 300 }
    header.site-head nav > ul li.ddown > a:before { content: '\f054'; font-family: FontAwesome; position: absolute; left: -20px; font-size: 80%; top: 50%; transform: translateY(-50%); transition: all ease .3s }
    header.site-head nav > ul li.ddown > a.active:before { transform: translateY(-50%) rotate(90deg) }
    header.site-head nav.active { opacity: 1; user-select: auto; pointer-events: auto; left: 0; transition: all ease .5s 0s }
    header.site-head nav.active ul { color: #000 }
    header.site-head nav.active ul li { display: flex; flex-direction: column; transform: translateX(0); transition-delay: 0s; opacity: 1 }
    header.site-head nav.active ul li .mega-menu { position: static; display: none; opacity: 1; min-height: auto; pointer-events: auto; user-select: auto; box-shadow: none; transform: none; transition: none }
    header.site-head nav.active ul li .mega-menu a { transition: all ease .3s }
    header.site-head nav.active ul li .mega-menu a:hover { color: rgba(255,255,255,0.6) !important }
    header.site-head nav.active:before { opacity: 1; transition: opacity .3s .25s }
    header.site-head nav:before { content: ''; position: absolute; width: 100%; left: 100%; background: rgba(29,28,31,0.9); height: 100%; opacity: 0; top: 0; z-index: -1; transition: opacity .2s 0s }
    header.site-head nav ~ * { min-width: 100px }
    header.site-head .menu-btn { display: inline-flex; align-items: center; flex-direction: column; justify-content: center; border-left: 0 }
    main .slider-area .swiper-container img { min-height: 400px }
    main .about-us [clamp-height="true"] { height: auto !important }
    main .flex-box2 .card-box { max-width: 28.2vw }
}
@media (min-width: 1199.98px) {
	.popup{width:700px;}
}

.content-wp {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: 9;
}
#loading22 {
    -webkit-animation: rotation 2s infinite linear;
}
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}