/* ============================================
   Mega Menu - Compel Styling (canlı site uyumu)
   Dosya: megamenu-fix.css
   Yükleme: head.tpl → <link> ile yükleniyor
   Sunucu: /home/compelc/deneme/themes/alysum/assets/css/megamenu-fix.css
   ============================================ */

/* === Wrapper z-index ===
   #megamenu-wrapper: header.tpl'de <header> etiketinin hemen altındaki div.
   Normal durumda z-index:1 → header dropdown'ları (kullanıcı menüsü, dil, para birimi)
   mega menünün üstünde görünür. Menü açıkken body.mm-menu-open class'ı eklenir
   ve z-index 9999'a çıkar → dropdown sayfanın üstünde kalır. */
#megamenu-wrapper {
    position: relative !important;
    z-index: 100 !important;
}
/* pointer-events artık gerekli değil — JS stopPropagation yeterli */

/* === Ana menü barı ===
   .ets_mm_megamenu: Tüm mega menüyü saran en dış container.
   Arka plan beyaz, border/shadow yok → sade görünüm.
   .ets_mm_megamenu_content: İç container, max-width:1140px ile CE header ile hizalı.
   .mm_menus_ul: Menü öğelerinin <ul> listesi, flexbox ile yatay diziliyor. */
.ets_mm_megamenu {
    background: #fff !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
/* Overlay karartma kapatma */
body .ets_mm_megamenu::before,
body.hover_menu .ets_mm_megamenu::before {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
.ets_mm_megamenu .ets_mm_megamenu_content {
    background: transparent !important;
    max-width: 1140px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.ets_mm_megamenu .ets_mm_megamenu_content > .container {
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
.ets_mm_megamenu .mm_menus_ul {
    background: transparent !important;
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* === Menü linkleri ===
   Ana Sayfa, Shop, vb. üst seviye menü öğelerinin <a> linkleri.
   Font: 16px, #7A7A7A gri, hover'da #3D90BF mavi.
   Padding ile yükseklik ve aralık kontrol ediliyor. */
.ets_mm_megamenu .mm_menus_li {
    list-style: none !important;
}
.ets_mm_megamenu .mm_menus_li > a {
    color: #7A7A7A !important;
    text-transform: none !important;
    font-size: 16px !important;
    font-weight: 500 !important;
/*    padding: 30px 18px !important; */
    padding-top: 40px !important;
    padding-bottom: 15px !important;  /* istediğin değer */
    padding-left: 18px !important;
    padding-right: 18px !important;
    letter-spacing: 0 !important;
    background: transparent !important;
    line-height: 1 !important;
    display: inline-block !important;
    box-sizing: border-box !important;
}
.ets_mm_megamenu .mm_menus_li > a:hover {
    color: #3D90BF !important;
    background: transparent !important;
}
.ets_mm_megamenu .mm_menus_li.active > a {
    color: #3D90BF !important;
    background: transparent !important;
}

/* === Kategoriler butonu - mavi ===
   Menünün en solundaki "☰ Kategoriler ▾" butonu.
   .mm_menus_li_tab: ETS modülünde "tab" tipindeki menü öğesi.
   Mavi arka plan (#3D90BF), üst köşeler yuvarlak, 260px genişlik.
   Hamburger ikonu (☰) ve chevron (▾) Font Awesome 5 ile ekleniyor. */
.ets_mm_megamenu .mm_menus_li.mm_menus_li_tab {
    position: relative !important;
    width: 260px !important;
}
.ets_mm_megamenu .mm_menus_li.mm_menus_li_tab > a {
    background-color: #3D90BF !important;
    color: #fff !important;
    border-radius: 10px 10px 0 0 !important;
    padding: 16px 20px 16px 20px !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    text-transform: none !important;
    line-height: 1 !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.ets_mm_megamenu .mm_menus_li.mm_menus_li_tab > a:hover {
    background-color: #3D90BF !important;
    color: #fff !important;
}
/* Hamburger icon fix - FA5 */
.ets_mm_megamenu .mm_menus_li.mm_menus_li_tab > a i.fa::before {
    content: "\f0c9" !important;
    font-family: "Font Awesome 5 Free", FontAwesome !important;
    font-weight: 500 !important;
}
.ets_mm_megamenu .mm_menus_li.mm_menus_li_tab > a i.fa {
    font-style: normal !important;
    margin-right: 8px !important;
    font-size: 16px !important;
}
/* Dropdown chevron */
.ets_mm_megamenu .mm_menus_li.mm_menus_li_tab > a .mm_menu_content_title::after {
    content: "\f107";
    font-family: "Font Awesome 5 Free", FontAwesome;
    font-weight: 400;
    margin-left: 55px;
    font-size: 14px;
}

/* === Menü başlık span ===
   .mm_menu_content_title: Her menü öğesinin içindeki başlık <span>'ı.
   Modül varsayılan olarak 60px min-height veriyor → kaldırıldı.
   inline display ile metin doğal akışta kalıyor. */
.ets_mm_megamenu .mm_menu_content_title {
    min-height: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: inline !important;
}

/* === Noktalar/bubble/arrow TAMAMEN gizle ===
   ETS modülünün otomatik eklediği "New", "Hot" gibi bubble etiketleri
   ve ok (arrow) ikonları. Compel tasarımında bunlar yok → gizleniyor. */
.ets_mm_megamenu .mm_bubble_text,
.ets_mm_megamenu .bubble_text,
.ets_mm_megamenu .mm_alert_text,
.ets_mm_megamenu .mm_menus_li > .arrow,
.ets_mm_megamenu .mm_menus_li > a .mm_arrow,
.ets_mm_megamenu .mm_menu_content_title .mm_arrow {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   Kategoriler Dropdown
   "Kategoriler" butonuna tıklayınca açılan dikey kategori listesi.
   .mm_columns_ul_tab: Dropdown'un ana <ul> container'ı.
   Varsayılan display:none, JS tıklama ile inline style ile açılıyor.
   Alt köşeler yuvarlak, hafif gölge, beyaz arka plan.
   ============================================ */
.mm_menus_li.mm_menus_li_tab .mm_columns_ul.mm_columns_ul_tab {
    display: none !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-top: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    max-height: none !important;
    padding: 5px 0 !important;
    border-radius: 0 0 10px 10px !important;
    margin-top: 0 !important;
    /* position, top, left, width, z-index — JS inline style ile kontrol ediliyor */
}
/* Hover ile açmayı engelle - sadece click */
.mm_menus_li.mm_menus_li_tab.hover:hover > .mm_columns_ul.mm_columns_ul_tab {
    display: none !important;
}
/* Tüm dropdown state (position, display, height, overflow) JS inline style ile kontrol ediliyor.
   CSS class'larına bağımlılık yok — specificity savaşı ortadan kaldırıldı. */

/* === Tab öğeleri (dropdown içindeki her kategori satırı) ===
   .mm_tabs_li: Dropdown'daki her bir kategori satırı (<li>).
   Modül bazılarını .ver_alway_hide ile gizliyor → override ile gösteriliyor.
   .mm_tab_li_content: Satırın içerik wrapper'ı.
   .mm_tab_name: Satır içindeki isim alanı. */
.mm_menus_li.mm_menus_li_tab .mm_columns_ul_tab .mm_tabs_li,
.mm_menus_li.mm_menus_li_tab .mm_columns_ul_tab .mm_tabs_li.ver_alway_hide {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-sizing: border-box !important;
}
.mm_menus_li.mm_menus_li_tab .mm_tab_li_content,
.mm_menus_li.mm_menus_li_tab .mm_tab_li_content.closed {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    float: none !important;
    border: none !important;
    border-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    position: relative !important;
    box-sizing: border-box !important;
}
.mm_menus_li.mm_menus_li_tab .mm_tab_name,
.mm_menus_li.mm_menus_li_tab .mm_tab_name.mm_tab_toggle,
.mm_menus_li.mm_menus_li_tab .mm_tab_name.mm_tab_has_child {
    display: block !important;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default !important;
    box-sizing: border-box !important;
}

/* === Tab ikonları (resim) ===
   Dropdown'daki kategori satırlarının solundaki küçük ikon resimleri.
   ETS admin'den her kategoriye atanan 22x22px thumbnail. Hover'da opacity artar. */
.mm_menus_li.mm_menus_li_tab .mm_tab_toggle_title img {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain !important;
    vertical-align: middle !important;
    margin-right: 10px !important;
    opacity: 0.75 !important;
}
.mm_menus_li.mm_menus_li_tab .mm_tab_toggle_title a:hover img {
    opacity: 1 !important;
}

/* === Kategori linkleri ===
   Dropdown'daki her kategori satırının tıklanabilir <a> linki.
   .mm_tab_toggle_title: Link wrapper div.
   a.ets_mm_url: Asıl link elementi — 13px, #333, hover'da mavi.
   Alt border ile satırlar birbirinden ayrılıyor. */
.mm_menus_li.mm_menus_li_tab .mm_tab_toggle_title {
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
}
.mm_menus_li.mm_menus_li_tab .mm_tab_toggle_title a.ets_mm_url {
    color: #333 !important;
    padding: 9px 35px 9px 15px !important;
    display: block !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    background: transparent !important;
    transition: color 0.15s !important;
    border-bottom: 1px solid #f5f5f5 !important;
    box-sizing: border-box !important;
}
.mm_menus_li.mm_menus_li_tab .mm_tab_toggle_title a.ets_mm_url:hover {
    color: #3D90BF !important;
    background: transparent !important;
}
.mm_menus_li.mm_menus_li_tab .mm_tabs_li:last-child .mm_tab_toggle_title a.ets_mm_url {
    border-bottom: none !important;
}

/* Hide arrow span inside tabs */
.mm_menus_li.mm_menus_li_tab .mm_tabs_li > .arrow {
    display: none !important;
}

/* Modülün kendi arrow'unu gizle (biz ::after kullanıyoruz) */
.mm_menus_li.mm_menus_li_tab .mm_tab_has_child::after {
    display: none !important;
    content: none !important;
}
/* mm_tab_name::before white border gizle */
.mm_menus_li.mm_menus_li_tab .mm_tab_li_content .mm_tab_name::before {
    display: none !important;
    content: none !important;
}

/* Item visibility (items 12+) artık JS inline style ile kontrol ediliyor */

/* === Sub kategoriler - sağa flyout ===
   Alt kategorisi olan satırların üzerine hover yapınca sağ tarafa açılan panel.
   .mm_columns_contents_ul: Flyout <ul> container'ı, position:absolute ile
   ana dropdown'un sağına yapışıyor (left:100%).
   body.mm-menu-open + :hover ile sadece menü açıkken görünür. */
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul {
    display: none !important;
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1) !important;
    min-width: 220px !important;
    max-width: 300px !important;
    padding: 5px 0 !important;
    z-index: 10000 !important;
    border-radius: 0 10px 10px 0 !important;
    margin-left: 0 !important;
    width: auto !important;
}
body.mm-menu-open .mm_menus_li.mm_menus_li_tab .mm_tabs_li:hover > .mm_columns_contents_ul,
body.mm-menu-open .mm_menus_li.mm_menus_li_tab .mm_tabs_li:hover .mm_columns_contents_ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Sub kategori linkleri */
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul li,
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .mm_columns_li,
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .mm_blocks_li {
    display: block !important;
    float: none !important;
    width: 100% !important;
    list-style: none !important;
}
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .mm_blocks_ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Category tree inside flyout */
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .ets_mm_categories {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .ets_mm_categories li {
    display: block !important;
    list-style: none !important;
}
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .ets_mm_categories a {
    color: #555 !important;
    padding: 4px 15px !important;
    display: block !important;
    font-size: 13px !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f5f5f5 !important;
}
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .ets_mm_categories a:hover {
    color: #3D90BF !important;
    background: transparent !important;
}
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .ets_mm_categories li:last-child > a {
    border-bottom: none !important;
}
/* Hide nested arrows in sub-categories */
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .arrow {
    display: none !important;
}

/* Flyout alt boşluk fix — kolon/blok wrapper padding/margin sıfırlama */
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .mm_columns_li {
    padding: 0 !important;
    margin: 0 !important;
}
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .mm_blocks_li {
    padding: 0 !important;
    margin: 0 !important;
}
.mm_menus_li.mm_menus_li_tab .mm_columns_contents_ul .ets_mm_block_content {
    padding: 0 !important;
    margin: 0 !important;
}

/* === Flyout ok ikonu (>) ===
   Alt kategorisi olan satırların sağ tarafında ">" oku gösterir.
   .mm_tabs_has_content: JS tarafından alt kategorisi olan satırlara eklenen class.
   Font Awesome \f105 (angle-right) ile ::after pseudo-element. */
.mm_menus_li.mm_menus_li_tab .mm_tabs_li.mm_tabs_has_content .mm_tab_toggle_title {
    position: relative !important;
}
.mm_menus_li.mm_menus_li_tab .mm_tabs_li.mm_tabs_has_content .mm_tab_toggle_title::after {
    content: "\f105" !important;
    font-family: "Font Awesome 5 Free", FontAwesome !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #999 !important;
    font-size: 14px !important;
    display: block !important;
}

/* === Müşteri Hizmetleri kutusu ===
   Menü barının en sağında kulaklık ikonu + telefon numarası + "Müşteri Hizmetleri" yazısı.
   ETS admin'de Custom Link tipinde eklendi, class: mm-customer-service.
   margin-left:auto ile flexbox'ta sağa yaslanıyor.
   a::before ile kulaklık PNG ikonu, .mm_menu_content_title::after ile telefon numarası.
   column-reverse ile telefon üstte, "Müşteri Hizmetleri" yazısı altta görünüyor. */
.ets_mm_megamenu .mm_menus_li.mm-customer-service {
    margin-left: auto !important;
}
.ets_mm_megamenu .mm_menus_li.mm-customer-service > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    color: #333 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    cursor: default !important;
}
/* Kulaklık ikonu (resim) — a seviyesinde, column-reverse'den etkilenmez */
.ets_mm_megamenu .mm_menus_li.mm-customer-service > a::before {
    content: '';
    display: inline-block;
    width: 36px;
    height: 36px;
    background: url('https://compel.com.tr/themes/theme_safira1/assets/img/musteri-hizmetleri.png') no-repeat center / contain;
    flex-shrink: 0;
}
/* Yazı alanı: "Müşteri Hizmetleri" orijinal metin + ::after telefon */
.ets_mm_megamenu .mm_menus_li.mm-customer-service > a .mm_menu_content_title {
    display: flex !important;
    flex-direction: column-reverse !important;
    /* Orijinal metin "Müşteri Hizmetleri" stili (altta görünür) */
    font-size: 11px !important;
    font-weight: 300 !important;
    color: #777 !important;
    line-height: 1.2 !important;
}
/* Telefon numarası (üstte, ::after + order ile) */
.ets_mm_megamenu .mm_menus_li.mm-customer-service > a .mm_menu_content_title::after {
    content: '0 212 224 32 01';
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 1.3;
}

/* === "Daha Fazla" ikonları FA5 fix ===
   Kategoriler dropdown'unda 12+ öğe olunca görünen "Daha Fazla ▼" / "Daha Az ▲" butonu.
   Modül FA4 kullanıyor → FA5 font-family ile düzeltiliyor. */
.mm_tab_more_toggle .mm-more-link i.fa::before {
    font-family: "Font Awesome 5 Free", FontAwesome !important;
    font-weight: 900 !important;
}

/* ============================================
   Normal Mega Dropdown (Hakkımızda vb.)
   ============================================ */
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_columns_ul:not(.mm_columns_ul_tab) {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-top: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
    padding: 15px 10px !important;
    z-index: 9999 !important;
    display: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab).menu_hover .mm_columns_ul:not(.mm_columns_ul_tab) {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Kolonlar yan yana, içeriğe göre genişlik */
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_columns_ul:not(.mm_columns_ul_tab) .mm_columns_li {
    float: none !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 20px !important;
    text-align: center !important;
    list-style: none !important;
}

/* Markalar menü (6th child) — full width dropdown with white bg */
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li:nth-child(6) > .mm_columns_ul {
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08) !important;
}

/* Fırsatlar menü (7th child) — genişlik + kolonları eşit dağıt */
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li:nth-child(7) > .mm_columns_ul {
    width: 860px !important;
}
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li:nth-child(7) .mm_columns_ul .mm_columns_li:not(:last-child) {
    flex: 1 1 0% !important;
    width: 0 !important;
    text-align: center !important;
}
.ets_mm_megamenu .mm_menus_ul > .mm_menus_li:nth-child(7) .mm_columns_ul .mm_columns_li:last-child {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 15px !important;
}

/* Bullet noktaları kaldır */
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_columns_ul:not(.mm_columns_ul_tab) li {
    list-style: none !important;
}
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_blocks_ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_blocks_li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* Block title */
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .ets_mm_block_title {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
    margin-bottom: 5px !important;
}

/* Block content links */
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .ets_mm_block_content a {
    color: #555 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: block !important;
    padding: 3px 0 !important;
}
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .ets_mm_block_content a:hover {
    color: #3D90BF !important;
}

/* Tab yapısı kalıntılarını gizle (DEFAULT tipinde gereksiz) */
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_tabs_li,
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_tab_li_content,
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_tab_name,
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_tab_toggle_title {
    display: none !important;
}
.ets_mm_megamenu .mm_menus_li:not(.mm_menus_li_tab) .mm_columns_contents_ul {
    display: none !important;
}

/* === Responsive ===
   1024px ve altında (tablet/mobil): Kategoriler butonunun köşe yuvarlaması kaldırılıyor,
   content padding sıfırlanıyor. */
@media (max-width: 1024px) {
    .ets_mm_megamenu .mm_menus_li.mm_menus_li_tab > a {
        border-radius: 0 !important;
    }
    .ets_mm_megamenu .ets_mm_megamenu_content {
        padding: 0 !important;
    }
    .compel-phone-link {
        display: none !important;
    }
}

/* ============================================
   Menü Barı — Müşteri Hizmetleri Telefon
   ============================================ */
.compel-phone-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    padding: 0 15px !important;
    white-space: nowrap !important;
    font-family: 'Montserrat', sans-serif !important;
}
.compel-phone-link .phone-icon {
    display: inline-block !important;
    width: 28px !important;
    height: 28px !important;
    color: #3990bf !important;
}
.compel-phone-link .phone-icon::before {
    content: '\e830' !important;
    font-family: 'Linearicons-Free' !important;
    font-size: 24px !important;
    color: #3990bf !important;
    line-height: 1 !important;
}
.compel-phone-link a {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
}
.compel-phone-link .phone-number {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #333 !important;
}
.compel-phone-link .phone-label {
    font-size: 11px !important;
    color: #999 !important;
    font-weight: 400 !important;
    letter-spacing: 0.4px !important;
}
.compel-phone-link a:hover .phone-number {
    color: #3990bf !important;
}