@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
  --MainFont:"Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --BG:"";
  --InLine:3;
  --InPLine:3;
  --color-black:#364153;
  --color-white:#fff;
  --color-white90:rgba(255, 255, 255, 0.9);
  --color-white95:rgba(255, 255, 255, 0.95);
  --color-light-gray:#D1D5DC;
  --color-medium-gray:#9CA3AF;
  --color-gray:#6B7280;
  --color-light-blue30:rgba(13, 135, 239, 0.3);
  --color-light-l-blue:#0D87EF;
  --color-light-blue:#155DFC;
  --main-gap:calc(var(--30));
  --paragraph-gap:var(--16);
  --events-gap:var(--24);
  --list-gap:var(--10);
  --list-padding:var(--33);
  --list-item-gap:var(--15);
  --list-marker-size:var(--3);
  --header-padding:var(--20);
  --header-gap:var(--16);
  --logo-size:var(--234);
  --h-r-gap:var(--24);
  --menu-gap:var(--5);
  --shadow-y:var(--20);
  --shadow-s:var(--60);
  --font-size-ultra-small:var(--10);
  --font-size-ultra-small-lh:var(--14);
  --font-size-xx-small:var(--12);
  --font-size-xx-small-lh:var(--18);
  --font-size-small:var(--13);
  --font-size-small-lh:var(--19);
  --font-size-small-ls:0.256px;
  --font-size-normal:var(--16);
  --font-size-normal-lh:var(--24);
  --font-size-normal-lh1:var(--26);
  --font-size-medium:var(--14);
  --font-size-medium-lh:var(--20);
  --font-size-medium1:var(--18);
  --font-size-medium-ls1:var(--26);
  --font-size-large:var(--20);
  --font-size-large-lh:var(--32);
  --font-size-big:var(--48);
  --font-size-big-lh:var(--48);
  --font-size-h1:var(--28);
  --font-size-h1-lh:var(--42);
  --border-radius:var(--10);
  --border-radius-b:var(--16);
  --border-width:var(--1);
  --border-color:rgba(13, 135, 239, 0.20);
  --menu-min-width:var(--95);
  --menu-padding:var(--9);
  --menu-tb-padding:var(--32);
  --menu-border-radius:var(--14);
  --body-width:var(--768);
  --ornament-size:var(--256);
  --ornament-left:var(--64);
  --ornament-top:var(---90);
  --ornament-size1:var(--160);
  --ornament-left1:var(--48);
  --ornament-size3:var(--336);
  --ornament-left3:var(---230);
  --ornament-bottom3:calc(var(---120) - var(--336));
  --ornament-size4:var(--144);
  --ornament-left4:calc(100% + var(--64));
  --ornament-bottom4:calc(100% + var(--120));
  --quote-ornament-width1:var(--131);
  --quote-ornament-height1:var(--179);
  --quote-ornament-width2:var(--141);
  --quote-ornament-height2:var(--123);
  --ornament-info-width1:var(--158);
  --ornament-info-height1:var(--192);
  --ornament-info-width2:var(--162);
  --ornament-info-height2:var(--133);
  --event-item-width:var(--256);
  --event-ornament-size:var(--179);
  --event-ornament-right:var(---60);
  --content-padding:var(--12);
  --event-item-c-size:var(--40);
  ---230:-230px;
  ---120:-120px;
  ---90:-90px;
  ---60:-60px;
  --1:1px;
  --3:3px;
  --5:5px;
  --8:8px;
  --9:9px;
  --10:10px;
  --12:12px;
  --13:13px;
  --14:14px;
  --15:15px;
  --16:16px;
  --17:17px;
  --18:18px;
  --19:19px;
  --20:20px;
  --22:22px;
  --24:24px;
  --26:26px;
  --28:28px;
  --30:30px;
  --32:32px;
  --33:33px;
  --35:35px;
  --40:40px;
  --42:42px;
  --48:48px;
  --60:60px;
  --64:64px;
  --95:95px;
  --120:120px;
  --123:123px;
  --131:131px;
  --133:133px;
  --141:141px;
  --144:144px;
  --158:158px;
  --160:160px;
  --162:162px;
  --179:179px;
  --192:192px;
  --200:200px;
  --234:234px;
  --256:256px;
  --336:336px;
  --768:768px;
}

body, html {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  font-size: 0;
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  width: 100%;
  min-height: 100vh;
  color: var(--color-black);
  font-style: normal;
  position: relative;
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  gap: var(--main-gap);
  padding: 0;
  margin: 0;
  font-size: 0;
}
body:has(.popupBox.visible) {
  overflow: hidden;
}
body > div.mb {
  width: 100%;
}
body.loading > * {
  opacity: 0;
  transition: opacity 0.3s linear;
}
body.loading:after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  color: #6646D5;
  --c:radial-gradient(farthest-side,currentColor 92%,#0000);
  background: var(--c) 50% 0/12px 12px, var(--c) 50% 100%/12px 12px, var(--c) 100% 50%/12px 12px, var(--c) 0 50%/12px 12px, var(--c) 50% 50%/12px 12px, linear-gradient(to bottom, currentColor 0%, transparent 100%) 50% 50%/4px 100%, linear-gradient(to bottom, currentColor 0%, transparent 100%) 50% 50%/100% 4px;
  background-repeat: no-repeat;
  animation: s8 1s infinite linear;
}

input[type=button],
input[type=submit],
input[type=reset] {
  -webkit-appearance: none;
}

img {
  height: auto;
  max-width: 100%;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select::-ms-expand {
  display: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
main,
nav,
section,
summary {
  display: block;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  clear: both;
}

option {
  color: var(--color-white);
}

textarea {
  -webkit-appearance: none;
}

*,
*:before,
*:after {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  scroll-behavior: smooth;
  box-sizing: border-box;
  transform-style: flat;
  backface-visibility: hidden;
}

.body {
  margin: 0 auto;
  max-width: var(--body-width);
  padding: var(--main-gap);
  display: flex;
  flex-direction: column;
  gap: var(--main-gap);
  position: relative;
}
.body > div, .body > section, .body > blockquote {
  box-shadow: 0 var(--shadow-y) var(--shadow-s) 0 rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
  border-radius: var(--border-radius-b);
  overflow: hidden;
}
.body > blockquote {
  box-shadow: 0 var(--shadow-y) var(--shadow-s) 0 rgba(66, 133, 244, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2);
}
.body:before {
  content: "";
  display: block;
  background: url("/images/GlassOrnament2.png") center center/contain no-repeat;
  width: var(--ornament-size3);
  height: var(--ornament-size3);
  position: absolute;
  left: var(--ornament-left3);
  bottom: var(--ornament-bottom3);
  pointer-events: none;
}
.body:after {
  content: "";
  display: block;
  background: url("/images/RealKazakhOrnament3.png") center center/contain no-repeat;
  width: var(--ornament-size4);
  height: var(--ornament-size4);
  position: absolute;
  left: var(--ornament-left4);
  top: var(--ornament-bottom4);
  pointer-events: none;
}

#mb {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--main-gap);
  position: relative;
}
#mb:before {
  content: "";
  display: block;
  background: url("/images/GlassOrnament.png") center center/contain no-repeat;
  width: var(--ornament-size);
  height: var(--ornament-size);
  position: absolute;
  left: var(--ornament-left);
  top: var(--ornament-top);
  pointer-events: none;
}
#mb:after {
  content: "";
  display: block;
  background: url("/images/GlassOrnament1.png") center center/contain no-repeat;
  width: var(--ornament-size1);
  height: var(--ornament-size1);
  position: absolute;
  left: var(--ornament-left1);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.description > * + * {
  margin-top: var(--paragraph-gap);
}
.description ul,
.description ol {
  display: flex;
  flex-direction: column;
  gap: var(--list-gap);
  margin-top: 0;
  margin-bottom: 0;
}
.description ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.description ul > li {
  position: relative;
  padding-left: var(--list-padding);
}
.description ul > li:before {
  content: "";
  display: block;
  position: absolute;
  left: var(--list-item-gap);
  top: var(--list-item-gap);
  width: var(--list-marker-size);
  height: var(--list-marker-size);
  background: var(--color-black);
  border-radius: 50%;
}
.description > p + ol, .description > p + ul {
  margin-top: var(--list-gap);
}
.description:empty {
  display: none;
}

header.header {
  display: flex;
  flex-direction: column;
  padding: var(--header-padding);
  gap: var(--header-gap);
  position: sticky;
  top: 0;
  z-index: 3;
  background: linear-gradient(90deg, #1D293D 0%, #0F172B 50%, #101828 100%);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
header.header .h {
  display: flex;
  gap: var(--main-gap);
  justify-content: space-between;
  align-items: center;
}
header.header .h .kt {
  flex: 0 0 var(--logo-size);
}
header.header .h .kt a {
  display: block;
}
header.header .h .r {
  display: flex;
  align-items: center;
  gap: var(--h-r-gap);
}
header.header .h .r .ll {
  display: flex;
  align-items: center;
  gap: var(--header-padding);
}
header.header .h .r .ll .l {
  display: inline-block;
  text-transform: uppercase;
  color: var(--color-light-gray);
  font-size: var(--font-size-medium);
  line-height: var(--font-size-medium-lh);
  text-decoration: none;
}
header.header .h .r .ll .l:hover {
  text-decoration: underline;
}
header.header .h .r .today {
  background: var(--color-light-blue);
  padding: var(--menu-gap) var(--header-padding);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  cursor: default;
  color: var(--color-white);
  font-size: var(--font-size-normal);
}
header.header menu.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: var(--menu-tb-padding) var(--list-gap);
  margin: 0;
  list-style: none;
  gap: var(--menu-gap);
  counter-reset: menu;
  background: var(--color-white95);
  border-radius: var(--menu-border-radius);
  position: relative;
}
header.header menu.menu:has(.current), header.header menu.menu:has(:hover) {
  --padding:calc((var(--menu-tb-padding) - var(--1) + var(--menu-padding))/2);
  padding-top: var(--padding);
  padding-bottom: calc(var(--padding) + var(--1));
}
header.header menu.menu:after {
  content: "";
  display: block;
  pointer-events: none;
  height: var(--1);
  width: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  background: var(--color-light-gray);
  z-index: 0;
  transform: translateY(var(--9));
}
header.header menu.menu .item a:hover, header.header menu.menu .item.current a {
  color: var(--color-light-l-blue);
  font-size: var(--font-size-ultra-small-lh);
  line-height: var(--font-size-medium-lh);
  min-width: var(--120);
  padding: var(--menu-padding);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
}
header.header menu.menu .item a:hover:before, header.header menu.menu .item.current a:before {
  width: calc(var(--list-gap) * 1.2);
  height: calc(var(--list-gap) * 1.2);
  background: var(--color-light-l-blue);
}
header.header menu.menu .item a:hover:after, header.header menu.menu .item.current a:after {
  color: var(--color-light-l-blue);
}
header.header menu.menu .item a {
  display: flex;
  flex-direction: column;
  text-transform: lowercase;
  text-decoration: none;
  align-items: center;
  gap: var(--list-gap);
  min-width: var(--menu-min-width);
  counter-increment: menu;
  color: var(--color-gray);
  text-align: center;
  font-size: var(--font-size-small);
  font-weight: 500;
  line-height: var(--font-size-small-lh);
  letter-spacing: var(--font-size-small-ls);
  /*transition:all .3s linear,padding 0s;*/
}
header.header menu.menu .item a:before {
  content: "";
  display: block;
  width: var(--list-gap);
  height: var(--list-gap);
  border-radius: 50%;
  background: var(--color-light-gray);
  order: -2;
  /*transition:all .3s linear;*/
}
header.header menu.menu .item a:after {
  content: counter(menu, decimal-leading-zero);
  font-size: var(--font-size-ultra-small);
  line-height: var(--font-size-ultra-small-lh);
  letter-spacing: 1.04px;
  color: var(--color-medium-gray);
  order: -1;
  /*transition:all .3s linear;*/
}
header.header menu.menu .item a span {
  display: inline-block;
}
header.header menu.menu .item a span:before {
  content: attr(data-title);
}

blockquote.quote {
  margin: 0;
  padding: var(--main-gap);
  background: #284AEB url("/images/quote.png") left top;
  display: flex;
  flex-direction: column;
  gap: var(--h-r-gap);
  position: relative;
}
blockquote.quote:before {
  content: '"';
  color: var(--color-white90);
  font-size: var(--font-size-big);
  line-height: var(--font-size-big-lh);
  z-index: 1;
}
blockquote.quote:after {
  content: "";
  display: block;
  background: url("/images/QuoteGlassOrnament2.png") center center/contain;
  width: var(--quote-ornament-width2);
  height: var(--quote-ornament-height2);
  position: absolute;
  right: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0.2;
}
blockquote.quote .description {
  color: var(--color-white);
  font-size: var(--font-size-large);
  font-style: italic;
  line-height: var(--font-size-large-lh);
}
blockquote.quote .description p {
  margin: 0;
}
blockquote.quote .description > * + * {
  margin-top: var(--paragraph-gap);
}
blockquote.quote .author {
  color: var(--color-white90);
  font-size: var(--font-size-normal);
  line-height: var(--font-size-normal-lh);
}
blockquote.quote .author:before {
  content: "— ";
}
blockquote.quote .author:after {
  content: "";
  display: block;
  background: url("/images/QuoteGlassOrnament1.png") center center/contain;
  left: 0;
  top: 0;
  width: var(--quote-ornament-width1);
  height: var(--quote-ornament-height1);
  position: absolute;
  pointer-events: none;
  opacity: 0.2;
}

.cover {
  position: relative;
  z-index: 1;
}
.cover .logo {
  position: absolute;
  left: var(--h-r-gap);
  top: var(--h-r-gap);
  background: var(--color-white90);
  border-radius: var(--border-radius);
  padding: var(--content-padding);
}

.info {
  padding: var(--main-gap);
  display: flex;
  flex-direction: column;
  gap: var(--main-gap);
  position: relative;
}
.info:before {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  background: url("/images/InfoGlassOrnament.png") center center/contain;
  right: 0;
  opacity: 0.25;
  top: 0;
  width: var(--ornament-info-width1);
  height: var(--ornament-info-height1);
}
.info:after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  background: url("/images/InfoGlassOrnament1.png") center center/contain;
  left: 0;
  bottom: 0;
  opacity: 0.25;
  width: var(--ornament-info-width2);
  height: var(--ornament-info-height2);
}
.info h1.title {
  color: var(--color-light-l-blue);
  font-size: var(--font-size-h1);
  font-weight: 600;
  line-height: var(--font-size-h1-lh);
  margin: 0;
}
.info .description {
  color: var(--color-black);
  font-size: var(--font-size-normal);
  line-height: var(--font-size-normal-lh1);
  display: flex;
  flex-direction: column;
  gap: var(--paragraph-gap);
}
.info .description p {
  font-size: var(--font-size-normal);
  line-height: var(--font-size-normal-lh1);
  margin: 0;
}
.info .events {
  display: flex;
  flex-wrap: wrap;
  gap: var(--events-gap);
}
.info .events .item {
  flex: 0 0 var(--event-item-width);
  overflow: hidden;
  position: relative;
  border-radius: var(--border-radius-b);
  border: 1px solid var(--color-light-blue30);
  background: linear-gradient(135deg, rgba(13, 135, 239, 0.15) 0%, rgba(13, 135, 239, 0.08) 50%, rgba(13, 135, 239, 0.12) 100%);
  box-shadow: 0 8px 32px 0 rgba(13, 135, 239, 0.2), 0 1px 0 0 rgba(255, 255, 255, 0.4) inset, 0 -1px 0 0 rgba(13, 135, 239, 0.2) inset;
  display: flex;
  align-items: center;
  gap: var(--content-padding);
  padding: var(--header-padding);
}
.info .events .item:after {
  content: "";
  display: block;
  background: url("/images/EventOrnament.png") center center/contain;
  width: var(--event-ornament-size);
  height: var(--event-ornament-size);
  position: absolute;
  right: var(--event-ornament-right);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.4;
}
.info .events .item .c {
  flex: 0 0 var(--event-item-c-size);
  width: var(--event-item-c-size);
  height: var(--event-item-c-size);
  border-radius: 50%;
  background: linear-gradient(135deg, #0D87EF 0%, #0A6BC7 100%);
  box-shadow: 0 4px 12px 0 rgba(13, 135, 239, 0.4), 0 1px 0 0 rgba(255, 255, 255, 0.3) inset;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info .events .item .i {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.info .events .item .i .d {
  color: var(--color-light-l-blue);
  font-size: var(--font-size-xx-small);
  font-weight: 500;
  line-height: var(--font-size-xx-small-lh);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.info .events .item .i .t {
  color: var(--color-light-l-blue);
  font-size: var(--font-size-medium1);
  font-weight: 600;
  line-height: var(--font-size-medium-ls1);
}

@media (width < 1275px) {
  body, html {
    overflow-x: hidden;
  }
  header.header menu.menu {
    justify-content: flex-start;
  }
}
@media (width < 560px) {
  :root {
    --logo-size:var(--123);
    --h-r-gap:var(--20);
    --menu-min-width:auto;
    --list-gap:var(--5);
  }
  body {
    padding-top: calc(var(--main-gap) + 141px);
  }
  header.header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }
  header.header .h .kt a {
    background: url("/images/KazakhTelecomBusiness.svg") center center/contain no-repeat;
  }
  header.header .h .kt a img {
    opacity: 0;
  }
  header.header .h .r .today {
    display: none;
  }
  header.header menu.menu {
    justify-content: flex-start;
    padding: var(--10);
  }
  header.header menu.menu:has(.current), header.header menu.menu:has(:hover) {
    padding: var(--10);
  }
  header.header menu.menu .item {
    min-width: var(--22);
    max-width: var(--35);
    flex: 1 0 0;
  }
  header.header menu.menu .item.current a,
  header.header menu.menu .item a:hover {
    border: 0;
    padding: 0;
    min-width: auto;
    font-size: var(--8);
    line-height: normal;
  }
  header.header menu.menu .item.current a:before,
  header.header menu.menu .item a:hover:before {
    width: var(--8);
    height: var(--8);
  }
  header.header menu.menu .item a {
    border: 0;
    padding: 0;
    font-size: var(--8);
    letter-spacing: 0.288px;
    line-height: normal;
  }
  header.header menu.menu .item a:before {
    width: var(--8);
    height: var(--8);
  }
  header.header menu.menu .item a:after {
    font-size: var(--10);
    font-weight: 600;
    line-height: var(--17);
    letter-spacing: 1.12px;
  }
  header.header menu.menu .item a span:before {
    content: attr(data-short-title);
  }
  .body {
    padding-top: 0;
    overflow: hidden;
  }
  blockquote.quote .description {
    line-height: normal;
  }
}
.info h1.title {
  font-size: var(--24);
  font-weight: 600;
  line-height: normal;
}
.info .description {
  line-height: normal;
}
.info .description p {
  line-height: normal;
}

/*# sourceMappingURL=main.css.map */