.elementor-widget-theme-site-logo .widget-image-caption{color:var( --e-global-color-text );}.elementor-13256 .elementor-element.elementor-element-843b492{width:var( --container-widget-width, 108.656% );max-width:108.656%;--container-widget-width:108.656%;--container-widget-flex-grow:0;}.elementor-widget-animated-headline .elementor-headline-dynamic-wrapper path{stroke:var( --e-global-color-accent );}.elementor-widget-animated-headline .elementor-headline-plain-text{color:var( --e-global-color-secondary );}.elementor-widget-animated-headline{--dynamic-text-color:var( --e-global-color-secondary );}.elementor-13256 .elementor-element.elementor-element-aa13f46{--iteration-count:infinite;}.elementor-13256 .elementor-element.elementor-element-aa13f46 .elementor-headline{text-align:center;font-family:"Montserrat", Sans-serif;font-size:30px;}.elementor-13256 .elementor-element.elementor-element-42b53d1 > .elementor-background-overlay{background-color:var( --e-global-color-5d6184bc );opacity:1;}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:var( --e-global-color-text );fill:var( --e-global-color-text );}.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.highlighted,
					.elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:var( --e-global-color-accent );fill:var( --e-global-color-accent );}.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:var( --e-global-color-accent );}.elementor-widget-nav-menu .e--pointer-framed .elementor-item:before,
					.elementor-widget-nav-menu .e--pointer-framed .elementor-item:after{border-color:var( --e-global-color-accent );}.elementor-widget-nav-menu{--e-nav-menu-divider-color:var( --e-global-color-text );}.elementor-13256 .elementor-element.elementor-element-cc03713 .elementor-menu-toggle{margin:0 auto;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:768px){.elementor-13256 .elementor-element.elementor-element-b097242{width:22.807%;}.elementor-13256 .elementor-element.elementor-element-aedf330{width:77.193%;}}/* Start custom CSS for animated-headline, class: .elementor-element-aa13f46 *//* Настраиваем статический текст (название колледжа) */
.elementor-13256 .elementor-element.elementor-element-aa13f46 .elementor-headline-plain-text {
    text-transform: uppercase; /* Делаем все буквы заглавными, если нужно */
    color: #333333; /* Цвет названия */
}

/* Настраиваем печатающийся текст (девиз) */
.elementor-13256 .elementor-element.elementor-element-aa13f46 .elementor-headline-dynamic-text {
    font-family: 'Courier Prime', 'Courier New', monospace !important;
    letter-spacing: 3px; /* Добавляем "печатный" интервал между буквами */
    font-weight: bold;
    color: #4a4a4a; /* Делаем цвет чуть бледнее, как у настоящих чернил */
}

/* Кастомизируем мигающий курсор */
.elementor-13256 .elementor-element.elementor-element-aa13f46 .elementor-headline-dynamic-wrapper::after {
    background-color: #b71c1c !important; /* Цвет курсора (сделал темно-красным для акцента) */
    width: 4px !important; /* Делаем курсор потолще */
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-3f7dfb7 */<div class="typewriter-container">
  <span class="typewriter-text"></span><span class="cursor">|</span>
</div>

<style>
  /* Настройки шрифта и внешнего вида */
  .typewriter-container {
    /* Тот самый шрифт печатной машинки. Courier Prime или Courier New */
    font-family: 'Courier Prime', 'Courier New', monospace; 
    font-size: 60px; /* Размер текста (можешь изменить) */
    font-weight: bold;
    color: #333333; /* Цвет текста */
    line-height: 1.2;
    text-transform: uppercase;
  }
  
  /* Настройки мигающего курсора */
  .cursor {
    font-weight: normal;
    animation: blink 0.7s infinite; /* Скорость мигания */
  }
  
  @keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
  }
</style>

<script>
  // Настройки анимации
  const textArray = ["OPERA ET STUDIO"]; // Если хочешь, через запятую в кавычках можно добавить другие фразы
  const typingDelay = 150; // Скорость печатания (мс)
  const erasingDelay = 100; // Скорость стирания (мс)
  const newTextDelay = 2000; // Сколько ждать перед тем, как начать стирать (мс)
  
  let textArrayIndex = 0;
  let charIndex = 0;

  const typedTextSpan = document.querySelector(".typewriter-text");

  function type() {
    if (charIndex < textArray[textArrayIndex].length) {
      typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
      charIndex++;
      setTimeout(type, typingDelay);
    } else {
      setTimeout(erase, newTextDelay);
    }
  }

  function erase() {
    if (charIndex > 0) {
      typedTextSpan.textContent = textArray[textArrayIndex].substring(0, charIndex - 1);
      charIndex--;
      setTimeout(erase, erasingDelay);
    } else {
      textArrayIndex++;
      if(textArrayIndex >= textArray.length) textArrayIndex = 0;
      setTimeout(type, typingDelay + 500);
    }
  }

  document.addEventListener("DOMContentLoaded", function() {
    if(textArray.length) setTimeout(type, newTextDelay + 250);
  });
</script>/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-cc03713 *//* --- СТИЛЬ ВЫПАДАЮЩЕГО МЕНЮ (КАРТОЧКА) --- */

/* 1. Сам блок (Коробочка) */
.elementor-13256 .elementor-element.elementor-element-cc03713 .sub-menu,
.elementor-13256 .elementor-element.elementor-element-cc03713 .elementor-nav-menu--dropdown {
    background-color: #ffffff !important; /* Плотный белый фон (не прозрачный!) */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; /* Жирная тень, чтобы "оторвать" от фона */
    border: 1px solid #e0e0e0 !important; /* Тонкая серая рамка */
    border-radius: 8px !important; /* Скругленные углы */
    padding: 10px !important; /* Отступы внутри коробочки */
    min-width: 240px !important; /* Сделаем его чуть шире */
    margin-top: 15px !important; /* Чуть отодвинем от главного меню */
}

/* Делаем "Стрелочку" сверху (треугольник), указывающий на меню */
.elementor-13256 .elementor-element.elementor-element-cc03713 .sub-menu:before,
.elementor-13256 .elementor-element.elementor-element-cc03713 .elementor-nav-menu--dropdown:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 20px;
    width: 12px;
    height: 12px;
    background: #ffffff;
    transform: rotate(45deg); /* Поворачиваем квадрат, получается ромб */
    border-top: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
}

/* 2. Пункты внутри списка */
.elementor-13256 .elementor-element.elementor-element-cc03713 .sub-menu li a,
.elementor-13256 .elementor-element.elementor-element-cc03713 .elementor-nav-menu--dropdown li a {
    color: #333333 !important; /* Темно-серый текст */
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: none !important; /* Обычные буквы (не капс) */
    padding: 10px 15px !important;
    border-bottom: 1px solid #f5f5f5 !important; /* Тонкая линия между пунктами */
    background: transparent !important;
    transition: all 0.2s ease;
}

/* Убираем линию у последнего пункта */
.elementor-13256 .elementor-element.elementor-element-cc03713 .sub-menu li:last-child a {
    border-bottom: none !important;
}

/* 3. Эффект при наведении мышкой */
.elementor-13256 .elementor-element.elementor-element-cc03713 .sub-menu li a:hover,
.elementor-13256 .elementor-element.elementor-element-cc03713 .elementor-nav-menu--dropdown li a:hover {
    background-color: #FFF0F3 !important; /* Тот самый нежно-розовый */
    color: #9A1B2F !important; /* Бордовый текст */
    padding-left: 20px !important; /* Прикольный сдвиг вправо */
    border-radius: 6px !important;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-42b53d1 *//* --- ЛЕЧИМ ПРОЗРАЧНОСТЬ ВЫПАДАЮЩЕГО МЕНЮ --- */

/* 1. Делаем фон плотным и белым */
.elementor-13256 .elementor-element.elementor-element-42b53d1 .elementor-nav-menu--dropdown,
.elementor-13256 .elementor-element.elementor-element-42b53d1 .sub-menu {
    background-color: #ffffff !important; /* Белый цвет */
    opacity: 1 !important; /* Полная непрозрачность */
    z-index: 9999 !important; /* Поверх всего */
    
    /* Добавим тень, чтобы отделить от фоток снизу */
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2) !important;
    
    /* Добавим тонкую рамку */
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important; /* Скругление углов */
    padding: 15px !important; /* Отступы внутри */
}

/* 2. Чтобы текст внутри был читаемым */
.elementor-13256 .elementor-element.elementor-element-42b53d1 .sub-menu li a {
    background: #ffffff !important; /* У каждого пункта тоже белый фон */
    color: #333333 !important; /* Темно-серый текст */
}

/* 3. При наведении на пункт */
.elementor-13256 .elementor-element.elementor-element-42b53d1 .sub-menu li a:hover {
    background-color: #f7f7f7 !important; /* Серый фон при наведении */
    color: #9A1B2F !important; /* Бордовый текст */
}/* End custom CSS */