@import '../css/navbar.css';
@import '../css/hero.css';
@import '../css/arbic.css';
@import '../css/inner-pages.css';
@import '../css/history.css';
@import '../css/partnership.css';
@import '../css/partner.css';
@import '../css/about.css';
@import '../css/contact.css';

.text_arial {font-family: Arial, Helvetica, sans-serif; font-style: normal;}
/* Translate button */
.translate_btn {display: flex; text-align: right;}
.translate_btn a {width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; line-height: 1; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; border: 1px solid var(--light-grey-color); text-transform: uppercase; color: var(--white-color); padding: 10px .80rem; text-align: center; font-weight: 600; font-size: 1rem; opacity: .7; }
.translate_btn a.active {
  background: var(--light-grey-color);
  color: var(--dark-green-color);
}
@media (min-width:1200px){
  .translate_btn a {font-size: 1.125rem;}
}

/* Counters */
.counters_div {padding-left: 40px; margin-bottom: 55px; justify-content: space-between;}
.counters_div .col {position: relative;}
.counters_div .h3 {margin: 0; display:block; text-align: left; }
.counters_div .h3+span {position: absolute; top: 100%; min-width: 80px; color: var(--light-grey-color);}
.counters_div .h3 ins {text-decoration: none; line-height: 1; display: inline-block; position: relative;}
.counters_div .h3 .counter {font-family: Arial, sans-serif; font-weight: 700; color: var(--light-grey-color);}
.counters_div .counter span:not(.counter){
  font-size:0.875rem; color: inherit;
}
@media (min-width:1280px){
  .counters_div .h3+span  {white-space: nowrap;}
}
@media (min-width:1600px){
  .counters_div .h3 {font-size: 2.5rem;}
  .counters_div .h3 ins {font-size: 3rem; margin-left: -8px; top: 2px; }
}
@media (max-width:1600px){
  .counters_div .h3 ins {font-size: 2.5rem; margin-left: -5px; top: 4px;}
}
@media (max-width:1200px){
  .counters_div {padding:0 20px;  flex-wrap: wrap;}
  .counters_div .h3 ins {font-size: 2.2rem; margin-left: 0px; top: 2px;}
  .counters_div .col { margin-bottom: 40px; }
  .counters_div .h3 {font-size: 1.90rem; display: flex; flex-wrap: nowrap;}
}

/* Websites */
.bottom_box { max-width: 940px; pointer-events: auto; margin-top: 70px;}
@media (min-width:1600px) and (max-height:700px){
  .bottom_box {margin-top: 40px;}
}
.other_websites {position: absolute; bottom: 0; left: 0; width: 100%; border:1px solid var(--dark-grey-color-400); border-bottom: 0; z-index: 11;}
.web_box {background:var(--dark-green-color-600); padding: 15px 35px; width: 50%; flex: auto; text-align: center; isolation: isolate; overflow: hidden; border-right: 1px solid var(--dark-grey-color-400); }
.web_box:last-child {
  border-right: 0;
}
@media (min-width:1600px) {
  .web_box {height:120px;}
  .main_menu {height:calc(100% - 122px);}
}
@media (max-width:1600px) {
  .web_box {height:100px;}
}

.web_box em {position: absolute; right:-22px; bottom: 0px;}
.web_box a {position: relative; z-index: 11; width: 100%; line-height: 1; height: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; }
.logo_web {display: block; }
.drizoro_box .logo_web {width: 91px;}
.material_box .logo_web {width: 210px;}
.logo_web img {width: 100%;}
.web_box a em {transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out;}
.web_box:hover a em {
  transform: translateX(10px);
  -webkit-transform: translateX(10px);
}

@media (min-width:1200px){
  .bottom_box {width: 740px;}
}

@media (min-width:1600px){
  .web_box em {bottom: -9px;}
  .bottom_box {width: 940px;}
}

@media (max-width:1600px){
  .translate_btn a {width: 40px; height: 40px; font-size: .90rem;}
}

@media (max-width:1200px){
  .bottom_box {max-width: 100%; margin-top: 80px; margin-bottom: 15px;}
  .counters_div .h3+span {position: static; margin-top: -5px; display: block}
}

@media (max-width:991px){
  .bottom_box { width: 100%;}
  .counters_div {padding: 0 40px;}
  .counters_div .col {min-width: inherit; padding: 20px 0; margin-bottom: 0px; width: 50%;}
  .translate_btn a {width: 32px; height: 32px; font-size: .80rem;}
  .theme-btn {display: none;}
  .material_box .logo_web {width: 180px;}
}

@media (max-width:840px){
  .other_websites {position: static; margin-top: 30px; flex-wrap: wrap;}
  .web_box {width: 100%; border-top: 1px solid var(--dark-grey-color-400);}
}

@media (max-width:575px){
  .counters_div {margin-bottom:0px;}
  .counters_div .h3 {font-size: 1.4rem;}
  .counters_div .h3 ins {font-size: 2rem; line-height: 1; top: -3px;}
  .counters_div .col .h3 + span {font-size: .80rem; top: calc(100% - 30px);}
  .drizoro_box .logo_web {width: 100px;}
  .material_box .logo_web {max-width: 100%;}
  .web_box em {right: -20px; bottom: -10px;}
  .drizoro_box .logo_web {width: 80px;}
  .material_box .logo_web {width: 160px;}
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}