:root{
  --line: rgba(0,0,0,.12);
  --side: 8%;
  --nav-gap: 18px;

  --header-h: 85px;
  --ticker-h: 50px;
  --gap: 2px;

  /* разстояние между ticker и Sticky */
  --sticky-gap: 2px;

  /* позиция на Sticky: header + gap + ticker + sticky-gap */
  --sticky-top: calc(var(--header-h) + var(--gap) + var(--ticker-h) + var(--sticky-gap));

  --page-bg: rgb(240, 242, 245);
  --ticker-bg: rgb(10, 36, 80);

  --text-size: 22px;
  --dot-size: 10px;
  --ticker-speed: 60s;
}

@keyframes marquee{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-50%,0,0); }
}

@keyframes marqueePx{
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(calc(-1px * var(--marquee-distance, 0)),0,0); }
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
 height:100%;
}

body{
  background: var(--page-bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top: calc(var(--header-h) + var(--ticker-h) + (2 * var(--gap)));
  font-size: 20px;
}

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

.main{
  flex:1;
  padding: 0 0 22px 0;
}

header{ margin-bottom:0 !important; }
.main, main{ margin-top:0 !important; padding-top:0 !important; }

/* =========================
   FIXED TOP COMPOSITION
========================= */

.top-fixed{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:2000;
  background:var(--page-bg);
  overflow:visible;
}

.top-gap{
  height:var(--gap);
  background:var(--page-bg);
  margin:0;
  padding:0;
  line-height:0;
  border:0;
}

.site-header{
  height:var(--header-h);
  overflow:visible;
}

.ticker-wrap{
  height:var(--ticker-h);
  margin:0;
  padding:0;
  overflow:hidden;
}

/* =========================
   HEADER
========================= */

.head{
  height:var(--header-h);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  border-bottom:1px solid var(--line);
  position:relative;
  overflow:visible;
}

.bar{
  height:var(--header-h);
  display:flex;
  align-items:center;
  position:relative;
  z-index:2;
  overflow:visible;
}

.bar .wrap{
  width:100%;
  max-width:none;
  margin:0;
  padding-left:var(--side);
  padding-right:var(--side);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  overflow:visible;
}

/* =========================
   LOGO
========================= */

.brand{
  display:flex;
  align-items:center;
  margin:0;
  text-decoration:none;
  flex-shrink:0;
}

.logo{
  height:70px;
  width:auto;
  flex-shrink:0;
}

/* =========================
   NAVIGATION
========================= */

.nav{
  margin-left:25px;
}

.list{
  list-style:none;
  display:flex;
  align-items:center;
  gap:18px;
  margin:0;
  padding:0;
}

.list > li:last-child{
  margin-left:30px;
}

.link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  background:transparent;
  border:1px solid transparent;
  cursor:pointer;
  font-size:20px;
  font-weight:700;
  color:#ffffff;
  padding:8px 0;
  white-space:nowrap;
}

.link:hover,
.link.on{
  border-color:rgba(255,255,255,.60);
}

.link,
.link:link,
.link:visited,
button.link{
    font-family:inherit;
    font-size:20px;
    font-weight:700;
    color:#fff;
}

/* =========================
   DROPDOWN
========================= */

.drop{
  position:relative;
}

.chev{
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:6px solid #ffffff;
}

.menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:320px;
  background:rgba(6,20,46,.96);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  padding:10px;
  display:none;
  z-index:9999;
  font-size:20px;
}

.menu.r{
  right:0;
  left:auto;
  min-width:180px;
}

.sub{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:10px;
  text-decoration:none;
  color:#ffffff;
  font-size:20px;
  font-weight:300;
}

.sub:hover{
  background:rgba(255,255,255,.08);
}

.flag{
  width:28px;
  height:auto;
}

.drop.open > .menu{
  display:block;
}

/* =========================
   TICKER
========================= */

.ticker-bar{
  width:100%;
  height:var(--ticker-h);
  background:var(--ticker-bg);
  overflow:hidden;
  display:flex;
  align-items:center;
  margin:0;
  padding:0;
}

.ticker-track{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  will-change:transform;
  animation:marquee var(--ticker-speed) linear infinite;
}

.ticker-track.marquee-ready{
  animation:marqueePx var(--ticker-duration, var(--ticker-speed)) linear infinite;
}

.ticker-content{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

.phrase{
  font-size:var(--text-size);
  color:#ffffff;
  font-weight:600;
  padding-right:var(--gap);
}

.dot{
  width:var(--dot-size);
  height:var(--dot-size);
  background:#ffffff;
  border-radius:50%;
  display:inline-block;
  margin:0 16px;
}


/* =========================
   EXAM TIMER BAR
========================= */

.exam-timer-bar{
  width:100%;
  height:50px;
  background:var(--ticker-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:2px 0 0 0;
  padding:0 20px;
  color:#ffffff;
  font-family:Arial, Helvetica, sans-serif;
  font-size:22px;
  font-weight:600;
}

.exam-timer-value{
  font-size:24px;
  font-weight:700;
  letter-spacing:1px;
}

/* =========================
   MOBILE BUTTON
========================= */

.btn{
  border:1px solid #fff;
  padding:8px 10px;
  background:rgba(0,0,0,.25);
  align-items:center;
  gap:5px;
  margin-left:auto;
  margin-right:20px;
  display:none;
  cursor:pointer;
}

.txt{
  font-size:20px;
  font-weight:600;
  color:#fff;
}

.ham{
  width:26px;
  height:18px;
  position:relative;
  background:none;
}

.ham::before,
.ham::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:3px;
  background:#fff;
  border-radius:2px;
}

.ham::before{
  top:0;
  box-shadow:0 7px 0 #fff;
}

.ham::after{
  bottom:0;
}

/* ==========================================================
   Картинка "Създай своя профил"
   ========================================================== */

.network-register{
    position:relative;
    width:88%;
    margin:15px auto;
}

.network-register a{
    position:relative;
    display:block;
    text-decoration:none;
    overflow:hidden;
}

.network-register img{
    display:block;
    width:100%;
    height:auto;
}

/* Контейнерът съвпада с екрана на лаптопа */
.laptop-screen-text{

    position:absolute;

    left:41.60%;
    top:54.70%;

    width:16.69%;
    height:26.30%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    color:#ffffff;

    font-family:Arial,Helvetica,sans-serif;

    font-size:18px;

    font-weight:700;

    line-height:1.15;

    pointer-events:none;

    user-select:none;
}

/* Текстът */

.register-text{

    display:block;

    width:100%;

    text-align:center;

    white-space:normal;

    word-break:keep-all;
}

/* Курсор */

.typing-cursor {
    display: block;
    width: 2px;
    height: 1em;
    margin-top: 4px;
    background: #ffffff;
    animation: cursor-blink 0.8s steps(1, end) infinite;
}

.typing-cursor.typing-finished {
    opacity: 0;
    animation: none;
}

@keyframes cursor-blink {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

/* ==========================================================
   БУТОН „КЪМ ВИДЕОТО“
   ========================================================== */

.register-button-wrap{
  width:100%;
  margin:35px auto;
  display:flex;
  justify-content:center;
  align-items:center;
  animation:registerButtonBounce 5s ease-in-out infinite;
}

.register-video-btn{
  display:inline-block;
  width:auto;
  max-width:100%;
  padding:10px 26px;

  border:none;
  border-radius:12px;

  color:#ffffff;
  text-decoration:none;
  text-align:center;
  white-space:nowrap;

  font-size:24px;
  line-height:1.15;
  font-weight:700;
  letter-spacing:.25px;

  background:
    linear-gradient(
      to top,
      #061126 0%,
      #0b2558 12%,
      #245ec6 32%,
      #7eb2ff 47%,
      #ffffff 50%,
      #7eb2ff 53%,
      #245ec6 68%,
      #0b2558 88%,
      #061126 100%
    );

  text-shadow:
    0 2px 3px rgba(0,0,0,.9),
    0 0 7px rgba(255,255,255,.35);

  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.7),
    inset 0 -5px 10px rgba(0,0,0,.65),
    0 7px 18px rgba(0,0,0,.32);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.register-video-btn:hover,
.register-video-btn:active,
.register-video-btn:focus-visible{
  outline:none;
  transform:translateY(-5px) scale(1.018);

  box-shadow:
    inset 0 4px 8px rgba(255,255,255,.9),
    inset 0 -7px 14px rgba(0,0,0,.75),
    0 20px 36px rgba(0,0,0,.55);
}

@keyframes registerButtonBounce{
  0%,
  82%,
  100%{
    transform:translateY(0);
  }

  87%{
    transform:translateY(-7px);
  }

  91%{
    transform:translateY(0);
  }

  95%{
    transform:translateY(-3px);
  }

  98%{
    transform:translateY(0);
  }
}

/* =========================
   БУТОН: 801px–1200px
========================= */

@media (max-width:1200px) and (min-width:801px){

  .register-button-wrap{
    margin:30px auto;
  }

  .register-video-btn{
    padding:10px 30px;
    font-size:20px;
  }
}

/* =========================
   БУТОН: 481px–800px
========================= */

@media (max-width:800px) and (min-width:481px){

  .register-button-wrap{
    margin:25px auto;
  }

  .register-video-btn{
    padding:9px 24px;
    font-size:18px;
  }
  
  .network-register{
    width:100%;
    overflow:hidden;

    margin:2px auto 15px;
}
}

/* =========================
   БУТОН: 0px–480px
========================= */

@media (max-width:480px){

  .register-button-wrap{
    margin:10px auto;
  }
  
  .network-register{
    width:100%;
    overflow:hidden;

    margin:2px auto 15px;
}

  .register-video-btn{
    padding:8px 20px;
    border-radius:10px;
    font-size:16px;
  }
}

@media (prefers-reduced-motion:reduce){

  .register-button-wrap{
    animation:none;
  }
}



/* =========================
   MEDIA: 801px – 1200px
========================= */

@media (max-width:1200px) and (min-width:801px){

  :root{
    --header-h:75px;
    --ticker-h:45px;
    --text-size:19px;
  }

  body{
    padding-top:calc(var(--header-h) + var(--ticker-h) + (2 * var(--gap)));
  }

  .top-fixed,
  .site-header,
  .head,
  .bar{
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  .ticker-wrap,
  .ticker-bar{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .site-header,
  .head,
  .bar{
    height:var(--header-h);
  }

  .bar .wrap{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    overflow:visible;
  }

  .top-fixed .brand{
    flex:0 0 auto;
  }

  .logo{
    height:65px;
  }

  .top-fixed .btn{
    display:inline-flex;
    align-items:center;
    gap:5px;
    margin:0;
    padding:5px 8px;
    border:1px solid #ffffff;
    background:rgba(0,0,0,.25);
    flex:0 0 auto;
    cursor:pointer;
  }

  .top-fixed .txt{
    font-size:18px;
    font-weight:600;
  }

  .top-fixed .ham{
    width:22px;
    height:15px;
  }

  .top-fixed .ham::before,
  .top-fixed .ham::after{
    height:2px;
  }

  .top-fixed .ham::before{
    box-shadow:0 6px 0 #fff;
  }

  .nav{
    display:none;
    position:absolute;
    top:var(--header-h);
    left:0;
    right:0;
    margin-left:0;
    background:rgba(6,20,46,.96);
    border-top:1px solid rgba(255,255,255,.15);
    z-index:9999;
    padding:10px 0 16px;
  }

  .nav.open{
    display:block;
  }

  .list{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    margin:0;
    padding:0 16px;
  }

  .list > li:last-child{
    margin-left:0;
  }

  .nav .link,
  .nav .trig{
    width:100%;
    justify-content:space-between;
    padding:12px 10px;
    font-size:18px !important;
  }

  .nav .menu{
    position:static;
    display:none;
    min-width:0;
    margin-top:6px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    font-size:16px;
  }

  .nav .menu.r{
    right:auto;
    left:auto;
    min-width:0;
  }

  .nav .menu .sub{
    font-size:16px !important;
    line-height:1.25;
    padding:8px 10px;
  }

  .drop.open > .menu{
    display:block;
  }

  .ticker-wrap,
  .ticker-bar{
    height:var(--ticker-h);
  }

  .foot .fcontact,
  .foot .finfo,
  .foot .citem,
  .foot .fcopy,
  .foot .fcopy p{
    font-size:16px !important;
  }

  .foot .footer-links-nav{
    width:100%;
    display:flex;
    justify-content:center;
    margin:10px auto 30px auto;
  }

  .foot .footer-links-list{
    width:80%;
    margin:20px auto;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:24px;
  }

  .foot .footer-links-list .fitem{
    flex:0 0 auto;
  }

  .foot .footer-links-list .flink,
  .foot .footer-links-list a,
  .foot .footer-links-list button,
  .foot .footer-links-list button.flink,
  .foot .footer-links-list button.trig{
    font-family:inherit !important;
    font-size:19px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:nowrap;
    color:#ffffff;
  }
  
 
.foot .footer-links-list .menu{
  position:absolute;
  top:auto;
  bottom:calc(100% + 8px);
  left:0;
  transform:none;
  width:520px;
  min-width:0;
  max-width:calc(100vw - 80px);
  margin-top:0;
  background:rgba(6,20,46,.96);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  z-index:9999;
}

    .laptop-screen-text {
        left: 41.80%;
        font-size: 14px;
        line-height: 1.12;
    }

    .register-text {
        white-space: nowrap;
    }
}





@media (max-width:800px) and (min-width:481px){

  :root{
    --header-h:65px;
    --ticker-h:40px;
    --text-size:17px;
  }

  body{
    padding-top:calc(var(--header-h) + var(--ticker-h) + (2 * var(--gap)));
  }

  .top-fixed,
  .site-header,
  .head,
  .bar{
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  .ticker-wrap,
  .ticker-bar{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .site-header,
  .head,
  .bar{
    height:var(--header-h);
  }

  .bar .wrap{
    width:100%;
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    overflow:visible;
  }

  .top-fixed .brand{
    flex:0 0 auto;
  }

  .logo{
    height:55px;
  }

  .top-fixed .btn{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:0;
    padding:4px 7px;
    border:1px solid #ffffff;
    background:rgba(0,0,0,.25);
    flex:0 0 auto;
    cursor:pointer;
  }

  .top-fixed .txt{
    font-size:16px;
    font-weight:500;
  }

  .top-fixed .ham{
    width:20px;
    height:14px;
  }

  .top-fixed .ham::before,
  .top-fixed .ham::after{
    height:2px;
  }

  .top-fixed .ham::before{
    box-shadow:0 5px 0 #fff;
  }

  /* ===== HEADER DROPDOWN NAV ===== */

  .nav{
    display:none;
    position:absolute;
    top:var(--header-h);
    left:0;
    right:0;
    margin-left:0;
    background:rgba(6,20,46,.96);
    border-top:1px solid rgba(255,255,255,.15);
    z-index:9999;
    padding:8px 0 14px;
  }

  .nav.open{
    display:block;
  }

  .list{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    margin:0;
    padding:0 14px;
  }

  .list > li:last-child{
    margin-left:0;
  }

  .nav .link,
  .nav .trig{
    width:100%;
    justify-content:space-between;
    padding:10px 8px;
    font-size:16px !important;
    font-weight:600 !important;
  }

  .nav .menu{
    position:static;
    display:none;
    min-width:0;
    margin-top:5px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    font-size:14px;
  }

  .nav .menu.r{
    right:auto;
    left:auto;
    min-width:0;
  }

  .nav .menu .sub{
    font-size:14px !important;
    font-weight:300 !important;
    line-height:1.25 !important;
    padding:7px 9px !important;
  }

  .drop.open > .menu{
    display:block;
  }

  .ticker-wrap,
  .ticker-bar{
    height:var(--ticker-h);
  }

  /* ===== FOOTER ===== */

  .foot .fcontact,
  .foot .finfo,
  .foot .citem,
  .foot .fcopy,
  .foot .fcopy p{
    font-size:14px !important;
  }

  .foot .cicon{
    font-size:17px !important;
  }

  .foot .footer-links-nav{
    width:100%;
    display:flex;
    justify-content:center;
    margin:-6px auto 20px auto;
  }

  .foot .footer-links-list{
    width:86%;
    margin:18px auto;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 22px;
  }

  .foot .footer-links-list .fitem{
    flex:0 0 calc(50% - 11px);
    display:flex;
    justify-content:center;
  }

  .foot .footer-links-list .flink,
  .foot .footer-links-list a,
  .foot .footer-links-list button,
  .foot .footer-links-list button.flink,
  .foot .footer-links-list button.trig{
    font-family:inherit !important;
    font-size:16px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:nowrap;
    color:#ffffff;
  }

  .foot .footer-links-list .menu{
    position:absolute;
    top:auto;
    bottom:calc(100% + 6px);
    left:50%;
    transform:translateX(-50%);
    width:calc(100vw - 40px);
    min-width:0;
    max-width:calc(100vw - 40px);
    margin-top:0;
    background:rgba(6,20,46,.96);
    border:1px solid rgba(255,255,255,.15);
    border-radius:10px;
    z-index:9999;
  }

  .foot .footer-links-list .menu .sub{
    font-size:14px !important;
    font-weight:300 !important;
    line-height:1.25 !important;
    padding:7px 9px !important;
  }

  .foot .fcopy{
    margin-top:8px;
  }

  .foot .fcopy p{
    margin:6px 0;
  }

  .foot .fdev{
    font-size:14px;
    margin:8px 0 6px;
  }

  .foot .finfo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
    margin:6px 0 0;
  }
  
  @media (min-width: 481px) and (max-width: 800px) {

    .network-register {
        width: 100%;
        margin: 40px auto;
        overflow: hidden;
    }

    .network-register > a {
        position: relative;

        width: 750px;
        max-width: none;

        left: 50%;
        transform: translateX(-50%);

        margin: 0;
    }

    .network-register img {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
    }

    .laptop-screen-text {
        left: 41.65%;
        top: 54.70%;
        width: 16.69%;
        height: 26.30%;

        font-size: 14px;
        line-height: 1.10;
    }
}
}


/* =========================
   MEDIA: 0px – 480px
========================= */

@media (max-width:480px){

  :root{
    --header-h:55px;
    --ticker-h:35px;
    --text-size:15px;
  }

  body{
    padding-top:calc(var(--header-h) + var(--ticker-h) + (2 * var(--gap)));
  }

  .top-fixed,
  .site-header,
  .head,
  .bar{
    width:100%;
    max-width:100%;
    overflow:visible;
  }

  .ticker-wrap,
  .ticker-bar{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  .site-header,
  .head,
  .bar{
    height:var(--header-h);
  }

  .bar .wrap{
    width:100%;
    max-width:100%;
    padding-left:12px;
    padding-right:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    overflow:visible;
  }

  .top-fixed .brand{
    flex:0 0 auto;
  }

  .logo{
    height:45px;
  }

  .top-fixed .btn{
    display:inline-flex;
    align-items:center;
    gap:4px;
    margin:0;
    padding:4px 6px;
    border:1px solid #ffffff;
    background:rgba(0,0,0,.25);
    flex:0 0 auto;
    cursor:pointer;
  }

  .top-fixed .txt{
    font-size:14px;
    font-weight:400;
  }

  .top-fixed .ham{
    width:18px;
    height:13px;
  }

  .top-fixed .ham::before,
  .top-fixed .ham::after{
    height:2px;
  }

  .top-fixed .ham::before{
    box-shadow:0 5px 0 #fff;
  }

  .nav{
    display:none;
    position:absolute;
    top:var(--header-h);
    left:0;
    right:0;
    margin-left:0;
    background:rgba(6,20,46,.96);
    border-top:1px solid rgba(255,255,255,.15);
    z-index:9999;
    padding:7px 0 12px;
  }

  .nav.open{
    display:block;
  }

  .list{
    flex-direction:column;
    align-items:stretch;
    gap:5px;
    margin:0;
    padding:0 12px;
  }

  .list > li:last-child{
    margin-left:0;
  }

  .nav .link,
  .nav .trig{
    width:100%;
    justify-content:space-between;
    padding:9px 8px;
    font-size:14px !important;
    font-weight:600 !important;
  }

  .nav .menu{
    position:static;
    display:none;
    min-width:0;
    margin-top:5px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    font-size:12px;
  }

  .nav .menu.r{
    right:auto;
    left:auto;
    min-width:0;
  }

  .nav .menu .sub{
    font-size:12px !important;
    font-weight:300 !important;
    line-height:1.25 !important;
    padding:6px 8px !important;
  }

  .drop.open > .menu{
    display:block;
  }

  .ticker-wrap,
  .ticker-bar{
    height:var(--ticker-h);
  }

  /* ===== FOOTER ===== */

  .foot .fcontact,
  .foot .finfo,
  .foot .citem,
  .foot .fcopy,
  .foot .fcopy p,
  .foot .fdev{
    font-size:12px !important;
  }

  .foot .cicon{
    font-size:13px !important;
  }

  .foot .fcontact{
    gap:18px;
    margin:6px 0 14px 0;
  }

  .foot .footer-links-nav{
    width:100%;
    display:flex;
    justify-content:center;
    margin:-4px auto 18px auto;
  }

  .foot .footer-links-list{
    width:94%;
    margin:18px auto;
    padding:0;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:6px 14px;
  }

  .foot .footer-links-list .fitem{
    flex:0 0 calc(50% - 7px);
    display:flex;
    justify-content:center;
  }

  .foot .footer-links-list .flink,
  .foot .footer-links-list a,
  .foot .footer-links-list button,
  .foot .footer-links-list button.flink,
  .foot .footer-links-list button.trig{
    font-family:inherit !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    white-space:nowrap;
    color:#ffffff;
  }

 .foot .footer-links-list .menu{
  position:absolute;
  top:auto;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  width:calc(100vw - 24px);
  min-width:0;
  max-width:calc(100vw - 24px);
  margin-top:0;
  background:rgba(6,20,46,.96);
  border:1px solid rgba(255,255,255,.15);
  border-radius:10px;
  z-index:9999;
}

  .foot .footer-links-list .menu .sub{
    font-size:12px !important;
    font-weight:300 !important;
    line-height:1.25 !important;
    padding:6px 8px !important;
  }

  .foot .fcopy{
    margin-top:8px;
  }

  .foot .fcopy p{
    margin:6px 0;
  }

  .foot .fdev{
    margin:6px 0 5px;
  }

  .foot .finfo{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin:5px 0 0;
    flex-wrap:wrap;
  }
  
  @media (max-width: 480px) {

    .network-register {
        width: 100%;
        overflow: hidden;
    }

    .network-register > a {
        position: relative;

        width: 620px;
        max-width: none;

        left: 50%;
        transform: translateX(-50%);
    }

    .laptop-screen-text {
        left: 41.65%;
        top: 54.70%;
        width: 16.69%;
        height: 26.30%;

        font-size: 12px;
        line-height: 1.08;
    }
}
}




/* =========================
   FOOTER
========================= */

.foot{
  background-image: url('images/footer.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 30px 0 50px 0;
  position: relative;
  color: #ffffff;
}

.fwrap{
  width: 100%;
}

/* Контактни блокове */
.fcontact{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  margin:10px 0 30px 0;
}

.finfo{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:40px;
  margin:20px 0 15px 0;
}

/* Контактни елементи */
.citem{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
}

/* Икони */
.cicon{
  font-size:20px;
  color:#ffffff;
}

/* =========================
   FOOTER NAVIGATION
========================= */

.fnav{
  display:flex;
  justify-content:space-between;
  width:80%;
  margin:10px auto 30px auto;
  flex-wrap:wrap;
  font-size:20px;
  font-weight:bold;
}

.flist{
  list-style:none;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px 22px;
  width:80%;
  margin:20px auto;
  padding:0;
}

.fitem{
  position:relative;
}

.flink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:transparent;
  border:0;
  padding:6px 0;
  cursor:pointer;
  text-decoration:none;
  color:#ffffff;
  font-family:inherit !important;
  font-size:18px !important;
  font-weight:700;
}

/* Footer links */
.fnav a{
  font-size:20px !important;
  color:#ffffff;
  text-decoration:none;
}

.fnav a:hover{
  color:#ff4d4d;
}

/* dropdown items */
.sub{
  font-size:20px !important;
}

/* Footer dropdown */
.foot .menu.up{
  top:auto;
  bottom:calc(100% + 10px);
  left:0;
}

.foot .menu{
  z-index:9999;
}

/* =========================
   COPYRIGHT
========================= */

.fcopy{
  text-align:center;
  margin:0;
  font-size:16px;
}

.fcopy p{
  margin:10px 0;
  font-size:19px;
  font-weight:500;
}

/* =========================
   COLORS RESET
========================= */

.foot,
.foot p,
.foot span,
.foot div{
  color:#ffffff;
}

/* =========================
   PHONE ANIMATION
========================= */

.animated-icon{
  animation:ring 1s infinite;
}

@keyframes ring{
  0% { transform: rotate(0deg); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-10deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
  60% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* =========================
   LINKS
========================= */

.foot .phone-link,
.foot .email-link{
  color:#ffffff;
  text-decoration:none;
}

.foot .phone-link:hover,
.foot .email-link:hover{
  text-decoration:underline;
}

/* =========================
   SAFE FIX FOR HEADER CONFLICT
========================= */

.top-fixed .site-header{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  width:100% !important;
}

.top-fixed .ticker-wrap{
  position:relative !important;
}

.top-fixed .top-gap{
  height:var(--gap) !important;
}

.main{
  padding-top:0 !important;
}

.big-banner{
  margin-top:0 !important;
}

.big-banner img{
  display:block;
}

.fdev{
    text-align:center;
    font-size:19px;
    font-weight:500;
    color:#ffffff;
    margin:12px 0 8px;
}

.foot{
  clear:both !important;
}

main,
.main{
  flex:1 0 auto;
  width:100%;
}

.foot{
  flex-shrink:0;
}

@media (max-width:1200px){

  body{
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  main,
  .main,
  .page-80,
  .learning-page{
    flex:1 0 auto;
  }

  .foot{
    flex-shrink:0;
    margin-top:10px;
    position:relative;
    z-index:1;
  }

}

/* =========================================================
   ЕДИННИ ШРИФТОВЕ: HEADER, FOOTER И DROPDOWN
   Добавя се в самия край на app.css
========================================================= */

/* Общ шрифт за хедера и футера */
.site-header,
.site-header a,
.site-header button,
.site-header .link,
.site-header .menu,
.site-header .sub,
.foot,
.foot a,
.foot button,
.foot .flink,
.foot .menu,
.foot .sub,
.foot .citem,
.foot .fcopy,
.foot .fdev {
    font-family: Arial, Helvetica, sans-serif !important;
}

/* =========================================================
   НАД 1200 px
========================================================= */

/* Header – основни връзки */
.site-header .link,
.site-header button.link,
.site-header .trig {
    font-size: 20px !important;
}

/* Header – падащи менюта */
.site-header .menu .sub {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

/* Footer – основни връзки */
.foot .footer-links-list .flink,
.foot .footer-links-list a,
.foot .footer-links-list button,
.foot .footer-links-list button.flink,
.foot .footer-links-list button.trig,
.foot .fnav a {
    font-size: 20px !important;
}

/* Footer – контакти, с 2 px по-дребни */
.foot .fcontact,
.foot .finfo,
.foot .citem,
.foot .phone-link,
.foot .email-link {
    font-size: 18px !important;
}

/* Footer – падащи менюта */
.foot .footer-links-list .menu .sub,
.foot .menu .sub {
    font-size: 18px !important;
    line-height: 1.25 !important;
}

/* =========================================================
   801 px – 1200 px
========================================================= */

@media (max-width: 1200px) and (min-width: 801px) {

    /* Header – основни връзки */
    .site-header .nav .link,
    .site-header .nav .trig {
        font-size: 18px !important;
    }

    /* Header – падащи менюта */
    .site-header .nav .menu .sub {
        font-size: 16px !important;
    }

    /* Footer – основни връзки */
    .foot .footer-links-list .flink,
    .foot .footer-links-list a,
    .foot .footer-links-list button,
    .foot .footer-links-list button.flink,
    .foot .footer-links-list button.trig,
    .foot .fnav a {
        font-size: 18px !important;
    }

    /* Footer – контакти */
    .foot .fcontact,
    .foot .finfo,
    .foot .citem,
    .foot .phone-link,
    .foot .email-link {
        font-size: 16px !important;
    }

    /* Footer – падащи менюта */
    .foot .footer-links-list .menu .sub,
    .foot .menu .sub {
        font-size: 16px !important;
    }
}

/* =========================================================
   481 px – 800 px
========================================================= */

@media (max-width: 800px) and (min-width: 481px) {

    /* Header – основни връзки */
    .site-header .nav .link,
    .site-header .nav .trig {
        font-size: 16px !important;
    }

    /* Header – падащи менюта */
    .site-header .nav .menu .sub {
        font-size: 14px !important;
    }

    /* Footer – основни връзки */
    .foot .footer-links-list .flink,
    .foot .footer-links-list a,
    .foot .footer-links-list button,
    .foot .footer-links-list button.flink,
    .foot .footer-links-list button.trig,
    .foot .fnav a {
        font-size: 16px !important;
    }

    /* Footer – контакти */
    .foot .fcontact,
    .foot .finfo,
    .foot .citem,
    .foot .phone-link,
    .foot .email-link {
        font-size: 14px !important;
    }

    /* Footer – падащи менюта */
    .foot .footer-links-list .menu .sub,
    .foot .menu .sub {
        font-size: 14px !important;
    }
}

/* =========================================================
   ДО 480 px
========================================================= */

@media (max-width: 480px) {

    /* Header – основни връзки */
    .site-header .nav .link,
    .site-header .nav .trig {
        font-size: 14px !important;
    }

    /* Header – падащи менюта */
    .site-header .nav .menu .sub {
        font-size: 12px !important;
    }

    /* Footer – основни връзки */
    .foot .footer-links-list .flink,
    .foot .footer-links-list a,
    .foot .footer-links-list button,
    .foot .footer-links-list button.flink,
    .foot .footer-links-list button.trig,
    .foot .fnav a {
        font-size: 14px !important;
    }

    /* Footer – контакти */
    .foot .fcontact,
    .foot .finfo,
    .foot .citem,
    .foot .phone-link,
    .foot .email-link {
        font-size: 12px !important;
    }

    /* Footer – падащи менюта */
    .foot .footer-links-list .menu .sub,
    .foot .menu .sub {
        font-size: 12px !important;
    }
}

/* =========================================================
   PROFILE BUTTON И HEADER SPACING
   Променя само профилната икона и разстоянията в хедера
========================================================= */

/* ---------- Над 1200 px ---------- */

.site-header .bar .wrap{
    justify-content:flex-start;
}

.site-header .brand{
    margin-right:auto;
}

.site-header .nav{
    margin-left:0;
}

/* По-голямо разстояние между „Регистрация“ и „Езици“ */
.site-header .list > li:last-child{
    margin-left:34px;
}

.site-header .profile-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;
    flex:0 0 40px;

    margin-left:18px;
    margin-right:0;
    padding:0;

    background:transparent;
    border:none;

    color:#ffffff !important;
    text-decoration:none;

    transition:
        background-color .2s ease,
        transform .2s ease;
}

.site-header .profile-btn i{
    font-size:28px;
    line-height:1;
    color:#ffffff !important;
}

.site-header .profile-btn:hover,
.site-header .profile-btn:focus-visible{
    background:rgba(255,255,255,.15);
    border-radius:50%;
}

.site-header .profile-btn:focus-visible{
    outline:2px solid #ffffff;
    outline-offset:2px;
}

/* ---------- 801 px – 1200 px ---------- */

@media (max-width:1200px) and (min-width:801px){

    .site-header .profile-btn{
        width:38px;
        height:38px;
        flex-basis:38px;

        /* Бутонът „Меню“ е по-близо до профила, отколкото до логото */
        margin-left:10px;
    }

    .site-header .profile-btn i{
        font-size:26px;
    }

    /* В отвореното мобилно меню „Езици“ не получава страничен отстъп */
    .site-header .list > li:last-child{
        margin-left:0;
    }
}

/* ---------- 481 px – 800 px ---------- */

@media (max-width:800px) and (min-width:481px){

    .site-header .profile-btn{
        width:36px;
        height:36px;
        flex-basis:36px;
        margin-left:8px;
    }

    .site-header .profile-btn i{
        font-size:25px;
    }

    .site-header .list > li:last-child{
        margin-left:0;
    }
}

/* ---------- До 480 px ---------- */

@media (max-width:480px){

    .site-header .profile-btn{
        width:34px;
        height:34px;
        flex-basis:34px;
        margin-left:6px;
    }

    .site-header .profile-btn i{
        font-size:23px;
    }

    .site-header .list > li:last-child{
        margin-left:0;
    }
}

/* =========================================================
   EXAM TIMER — FINAL LAYOUT OVERRIDE
   Само за страници, на които има изпитен часовник
========================================================= */
body:has(.exam-timer-bar){
  padding-top:calc(
    var(--header-h) + var(--ticker-h) + (2 * var(--gap)) + 88px
  );
}