/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0
Author:	UpSolution
Theme URI: http://impreza.us-themes.com/
Author URI: http://us-themes.com/
*/

/*Add your own styles here:*/



/* Masaüstü Görünümü */
.hero-vertical-decor {
    position: absolute;
    right: 0px; /* Sağdan uzaklık */
    bottom: 0px; /* Alttan uzaklık */
    z-index: 1;
}

.decor-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Çizgi ile yazı arasındaki boşluk */
}

/* Yukarıdaki İnce Sarı Çizgi */
.decor-line {
    width: 1px;
    height: 120px; /* Çizgi uzunluğu */
    background-color: #f7b817; /* bg-primary rengin */
}

/* Dikey Yazı Ayarları */
.decor-text {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 10px;
    font-weight: 700;
    color: #e2e8f0; /* text-slate-200 rengin */
    text-transform: uppercase;
    letter-spacing: 0.5em;
    white-space: nowrap;
}

/* MOBİL GİZLEME (Kritik Bölüm) */
@media (max-width: 1024px) {
    .hero-vertical-decor {
        display: none !important;
    }
}




.homedesteklogo img {
    filter: brightness(0) invert(1) !important;
    /* Bazı tarayıcılar için (Safari vb.) */
    -webkit-filter: brightness(0) invert(1) !important; 
}

.homelogolar {
	opacity: 0.6;
	transition-duration: 500ms;
	transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.homelogolar:hover {
	opacity: 1;
}


/* Yanıp Sönen Badge Stili */
.hero-badge-pulse {
    display: inline-block;
    background-color: #f7b817 !important; /* Birincil sarı renk */
    color: #000000 !important; /* İkincil siyah renk */
    padding: 4px 24px !important;
    border-radius: 2px !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.4em !important;
    text-transform: uppercase !important;
    animation: custom-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Yanıp Sönme Animasyonu */
@keyframes custom-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .5;
    }
}

.headtextstroke {
	-webkit-text-stroke: 2px #f7b817;
    color: transparent;
}


.slidertarih .w-iconbox-title {
	font-weight: 700!important;
	font-style: italic;
	padding: 0;
}



/* 1. Slider Alanı Hazırlığı */
.resimsol {
    position: relative !important;
    overflow: visible !important;
    z-index: 10;
}

/* 2. Hareketli Çerçeve (Sol Üste Sabitlendi) */
.resimsol::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 20px solid rgba(247, 184, 23, 0.1); /* Sarı transparan border */
    z-index: -1; /* Resmin arkasında kalsın */
    box-sizing: border-box;
    
    /* SOL ÜSTE doğru pozisyonlama (-48px sol, -48px üst) */
    transform: translate(-48px, -48px);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Üzerine gelince resme doğru geri inme efekti */
.resimsol:hover::before {
    /* Daha az taşma: Yaklaşma efekti */
    transform: translate(-24px, -24px);
}

/* 3. Siyah Beyaz ve Renkli Geçişi */
.resimsol .rsImg {
    filter: grayscale(100%) contrast(1.2) brightness(0.8) !important;
    transition: filter 0.8s ease-in-out !important;
}

.resimsol:hover .rsImg {
    filter: grayscale(0%) contrast(1.2) brightness(1) !important;
}

/* 4. Navigasyon Noktaları (Sol Alt Yerleşim) */
.resimsol .rsNav.rsBullets {
    position: absolute !important;
    left: 40px !important;    /* SAĞ yerine SOLA sabitlendi */
    right: auto !important;
    bottom: 40px !important;
    width: auto !important;
    display: flex !important;
    gap: 12px !important;
    z-index: 50;
    background: transparent !important;
}




@media (max-width: 991px) {
    .resimsag::before,
    .resimsol::before {
        display: none !important;
    }
}


/* Masaüstü Genel Ayarlar */
.trend-section { position: relative; font-family: 'Inter', sans-serif;   }
.trend-container { width: 100%; margin: 0 auto; display: flex; flex-direction: row; gap: 60px; align-items: center; box-sizing: border-box; }
.trend-static-col { flex: 1; min-width: 300px; }
.trend-accent-line { width: 80px; height: 4px; background: #f7b817; margin-bottom: 30px; }
.trend-upper-label { font-size: 12px; font-weight: 900; color: #f7b817; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; display: block; }
.trend-main-title { color: #fff; font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 900; line-height: 1; text-transform: uppercase; margin-bottom: 20px; }
.trend-main-title span { color: #f7b817; font-style: italic; }

/* Masaüstü Slider Alanı */
.trend-slider-col {
    flex: 1.2;
    height: 600px; /* Masaüstü yüksekliği */
    position: relative;
    background: rgba(255, 255, 255, 0.02);
    border-right: 2px solid rgba(247, 184, 23, 0.2);
    overflow: hidden; /* Burası dışarı taşanları gizleyen maske */
}

.trend-track {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        
        /* DEĞİŞTİRİLEN KISIM: Rayın boyunu sınırlama, içindekiler kadar uzasın */
        height: auto !important; 
        
        width: 100% !important;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

.trend-slide {
    height: 600px; /* Slayt yüksekliği maske ile aynı olmalı */
    flex: 0 0 600px; /* Slaytın boyunu koru, daralmasına izin verme */
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.trend-slide h4 { color: #f7b817; font-size: 10px; font-weight: 900; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 20px; border-bottom: 1px solid rgba(247, 184, 23, 0.2); padding-bottom: 8px; display: inline-block; align-self: flex-start; }
.trend-slide h2 { color: #fff; font-size: clamp(24px, 3vw, 48px); font-weight: 900; line-height: 1.1; margin-bottom: 20px; text-transform: uppercase; }
.trend-slide p { color: #e2e8f0; font-size: 18px; line-height: 1.6; max-width: 90%; }

.trend-indicators { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 12px; z-index: 10; }
.trend-dot { width: 3px; height: 32px; background: rgba(255, 255, 255, 0.1); cursor: pointer; transition: all 0.4s ease; }
.trend-dot.active { background: #f7b817; height: 48px; }



@media (max-width: 991px) {
    .trend-container { 
        flex-direction: column !important; 
        gap: 20px !important; 
    }
    
    /* 1. Kapsayıcı: Pencere (Maske) */
    .trend-slider-col { 
        height: 450px !important; /* Yüksekliği biraz optimize ettik */
        max-height: 450px !important;
        width: 100% !important; 
        border-right: none !important; 
        border-bottom: 2px solid rgba(247, 184, 23, 0.2); 
        overflow: hidden !important; 
        position: relative !important;
        display: block !important;
    }

    /* 2. Ray: Slaytları taşıyan ana şerit */
    .trend-track {
        display: flex !important;
        flex-direction: column !important; /* DİKEY DİZİLMEYİ ZORLA */
        flex-wrap: nowrap !important; /* Yan yana taşmayı engelle */
        height: 100% !important; /* Rayın yüksekliğini sınırla */
        width: 100% !important;
        transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* 3. Her Bir Slayt: Maske ile tam aynı boyda olmalı */
    .trend-slide { 
        height: 100% !important;
        min-height: 450px !important;
        max-height: 450px !important;
        width: 100% !important;
        flex: 0 0 100% !important; /* Her slaytın tam 1 birim yer kaplamasını zorla */
        padding: 40px 30px !important; 
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        /* Diğer slaytlarla arasına boşluk girmemesi için */
        margin: 0 !important; 
    }

    /* Yazı Boyutları (Sığması için) */
    .trend-slide h2 { font-size: font-size: clamp(2rem, 4vw, 2.5rem); !important; margin-bottom: 10px !important; }
    .trend-slide p { font-size: 14px !important; line-height: 1.5 !important; }

    /* İndikatörleri daha aşağıya veya merkeze alalım */
    .trend-indicators {
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}







 /* Ana Bölüm Ayarları */
.ist-section {
    position: relative;
    font-family: 'Inter', sans-serif;
}

.ist-container {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    gap: 50px;
    position: relative;
    z-index: 2;
    align-items: center;
    box-sizing: border-box;
}

/* Sol Metin Alanı */
.ist-text-col {
    flex: 1;
    /* Impreza 112:55 oranına göre yükseklik hesabı */
    aspect-ratio: 112 / 55;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
}

.ist-text-track {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

.ist-text-slide {
    height: 100%; /* Kapsayıcı yüksekliğine tam uyum */
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ist-line {
    width: 60px;
    height: 4px;
    background: #f7b817;
    margin-bottom: 25px;
}

.ist-label {
    color: #f7b817;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.ist-title {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.ist-desc {
    color: #ccc;
    font-size: 15px;
    line-height: 1.8;
    max-width: 500px;
}

/* Sağ Görsel Alanı */
.ist-img-col {
    flex: 1;
    position: relative;
    cursor: grab;
}

.ist-deco-border {
    position: absolute;
    inset: 0;
    border: 20px solid rgba(247, 184, 23, 0.1);
    transform: translate(-48px, -48px);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.ist-img-col:hover .ist-deco-border {
    transform: translate(-24px, -24px);
}

.ist-img-frame {
    width: 100%;
    /* Impreza ile birebir aynı oran */
    aspect-ratio: 112 / 55;
    overflow: hidden;
    position: relative;
    border-radius: 2px;
}

.ist-img-track {
    display: flex;
    height: 100%;
    width: 100%; 
    transition: transform 0.8s cubic-bezier(0.7, 0, 0.3, 1);
}

.ist-img-slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.ist-img-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) brightness(0.8);
    transition: filter 0.8s ease;
}

.ist-img-col:hover .ist-img-slide img {
    filter: grayscale(0%) brightness(1);
}

/* Navigasyon Dots */
.ist-dots {
    position: absolute;
    bottom: 30px;
    left: 30px;
    display: flex;
    gap: 12px;
    z-index: 10;
}

.ist-dot {
    display: block !important;
    width: 24px !important;
    height: 4px !important; /* Daha tok durması için 4px yapıyoruz */
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: none !important; /* Tema veya tarayıcı kenarlıklarını sıfırla */
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.4s ease !important;
}

.ist-dot.active {
    width: 40px !important;
    height: 4px !important; /* Yükseklik kesinlikle aynı kalmalı */
    background-color: #f7b817 !important;
}




/* HEADER & ICON EKSTRALARI */
.l-header.sticky .l-subheader.at_middle {
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.appicon img {
    transition: 300ms all;
}

.appicon img:hover {
    transform: scale(1.1);
}

/* MOBİL DÜZELTMELER */
@media (max-width: 900px) {
    .ist-container { 
        flex-direction: column !important; 
        gap: 20px !important; 
        padding: 0 20px !important; /* Kenar boşluklarını sabitle */
    }
    
    .ist-deco-border { display: none !important; }

    .ist-text-col { 
        height: auto !important; 
        min-height: 420px !important; /* Yazıların uzunluğuna göre artırılabilir */
        width: 100% !important;
        position: relative !important;
        display: block !important;
        overflow: visible !important;
    }
    
    .ist-text-track {
        transform: none !important;
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }

    .ist-text-slide {
        /* Üst üste binme için absolute, genişlik için 100% */
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100% !important; 
        box-sizing: border-box !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.5s ease-in-out !important;
        display: flex !important;
        flex-direction: column !important;
        z-index: 1;
    }

    /* Aktif olan slayt genişliği doldurmalı ve yüksekliği belirlemeli */
    .ist-text-slide.active-mobile {
        position: relative !important; /* Kapsayıcıyı iterek görünür yapar */
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 2;
    }

    /* Başlık ve açıklamaların genişliğini mobilde zorla */
    .ist-title, .ist-desc {
        width: 100% !important;
        max-width: 100% !important;
    }

    .ist-img-frame { 
        aspect-ratio: 112 / 65 !important; 
        width: 100% !important;
    }
    
    .ist-dots { 
        bottom: 20px !important; 
        left: 20px !important; 
    }
}





/* Haritayı gri tonlamalı yapar */
.map-karanlik {
    filter: grayscale(100%) invert(90%) contrast(150%);
    opacity: 0.6;
    transition: opacity 0.7s ease-in-out;
    border-radius: 2px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Mouse ile üzerine gelindiğinde netleşmesi için (isteğe bağlı) */
.map-karanlik:hover {
    opacity: 1;
}


.mapsagicon .w-iconbox-title {
	font-weight: 700!important;
	font-style: italic;
}


.parlak-ayrac {
    position: relative; /* İçindeki absolute çizgiyi tutması için */
}

.parlak-ayrac::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(247, 184, 23, 0.2), transparent);
    z-index: 10;
}



/* 1. Slider Alanı Hazırlığı */
.resimsag {
    position: relative !important;
    overflow: visible !important;
    z-index: 10;
}

/* 2. Hareketli Çerçeve (Sağ Üste Sabitlendi) */
.resimsag::before {
    content: '';
    position: absolute;
    /* Resmin tam üzerine oturması için 0 değerleri */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 20px solid rgba(247, 184, 23, 0.1); /* Sarı transparan border */
    z-index: -1; /* Resmin arkasında kalsın */
    box-sizing: border-box;
    
    /* İSTEDİĞİN: Sağ üste doğru pozisyonlama (48px sağ, 48px üst) */
    transform: translate(48px, -48px);
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* İSTEDİĞİN: Üzerine gelince resme doğru geri inme */
.resimsag:hover::before {
    /* Daha az taşma: Yaklaşma efekti */
    transform: translate(24px, -24px);
}

/* 3. Siyah Beyaz ve Renkli Geçişi */
.resimsag .rsImg {
    filter: grayscale(100%) contrast(1.2) brightness(0.8) !important;
    transition: filter 0.8s ease-in-out !important;
}

.resimsag:hover .rsImg {
    filter: grayscale(0%) contrast(1.2) brightness(1) !important;
}

/* 4. Navigasyon Noktaları (Tam Orijinal Yerleşim) */
.resimsag .rsNav.rsBullets {
    position: absolute !important;
    right: 30px !important;
    bottom: 30px !important;
    left: auto !important;
    width: auto !important;
    display: flex !important;
    gap: 12px !important;
    z-index: 50;
    background: transparent !important;
}

/* -----------------------------------------
   2. Impreza Slider Çizgileri (resimsag & resimsol)
----------------------------------------- */
/* Impreza'nın tıklama alanını (kapsayıcıyı) ortala ki çizgiler yukarı/aşağı zıplamasın */
.resimsag .rsNavItem.rsBullet,
.resimsol .rsNavItem.rsBullet {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

/* Çizgilerin (span) kendisi */
.resimsag .rsNavItem.rsBullet span,
.resimsol .rsNavItem.rsBullet span {
    display: block !important;
    width: 24px !important;
    height: 4px !important; /* HTML ile birebir aynı yükseklik */
    background-color: rgba(255, 255, 255, 0.3) !important;
    border: none !important; /* Impreza'nın gizli border'ını yok et */
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.4s ease !important;
}


/* Aktif Impreza Çizgisi */
.resimsag .rsNavItem.rsBullet.rsNavSelected span,
.resimsol .rsNavItem.rsBullet.rsNavSelected span {
    width: 40px !important;
    height: 0px !important; /* Yükseklik şişmesini engelle */
    background-color: #f7b817 !important;
}



/* Buton Genel Ayarları */
.custom-menu-btn {
    display: flex;
    align-items: center;
    gap: 16px; /* gap-4 */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    transition: all 0.3s ease;
}

/* Hamburger Çizgileri Kapsayıcısı */
.hamburger-container {
    display: flex;
    flex-direction: column;
    gap: 6px; /* gap-1.5 */
    width: 32px; /* w-8 */
}

/* Ortak Çizgi Stili */
.line {
    height: 2px; /* h-0.5 */
    transition: all 0.3s ease-in-out;
}

.line.full {
    width: 100%;
}

.line.short {
    width: 66.6%; /* w-2/3 */
}

.line.primary {
    background-color: #f7b817; /* bg-primary */
}

.line.white {
    background-color: #ffffff;
}

/* Yazı Stili */
.menu-text {
    font-size: 12px;
    font-weight: 900; /* font-black */
    text-transform: uppercase;
    letter-spacing: 0.4em;
    color: #ffffff;
    transition: color 0.3s ease;
}

/* HOVER (Üzerine Gelince) EFEKTLERİ */

/* Üst çizgi sarıdan beyaza döner */
.custom-menu-btn:hover .line.primary:first-child {
    background-color: #ffffff;
}

/* Alttaki kısa çizgi uzar ve beyaza döner */
.custom-menu-btn:hover .line.short {
    width: 100%;
    background-color: #ffffff;
}

/* Yazı sarıya döner */
.custom-menu-btn:hover .menu-text {
    color: #f7b817;
}



.sayfayol .g-breadcrumbs-item:first-of-type a {
    color: #f7b817!important;
}




/* 1. GENEL TASARIM full menu */
.custom-full-menu {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

.menu-item-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    width: fit-content;
}

.main-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-number {
    color: rgba(255,255,255,0.1);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(0.5rem, 4vw, 1.5rem);
    transition: color 0.3s;
}

.menu-title {
    color: white;
    font-size: clamp(1rem, 5vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.05em;
    display: inline-block;
    will-change: transform; 
    backface-visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

/* HOVER EFEKTLERİ */
.menu-item-wrapper:hover .menu-number { color: #f7b817; }
.menu-item-wrapper:hover .menu-title { 
    transform: translateX(30px) skewX(-10deg);
    color: #f7b817; 
}

/* AKTİF DURUMLAR */
.menu-item-wrapper.is-active .menu-title {
    color: #f7b817 !important;
    font-style: italic;
    transform: translateX(20px);
}

.sub-menu-custom li.is-active > .sub-link-wrapper > a,
.sub-menu-inner li.is-active > .sub-link-wrapper > a {
    color: #f7b817 !important;
    font-weight: 900;
}

/* 2. MASAÜSTÜ DÜZENİ (1024px+) */
@media (min-width: 1024px) {
    .submenu-toggle-btn { display: none !important; }

    .sub-menu-custom {
        position: absolute;
        left: 100%; top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.85);
        backdrop-filter: blur(10px);
        padding: 30px 40px;
        margin-left: 20px;
        opacity: 0; visibility: hidden;
        display: flex; flex-direction: column;
        min-width: 400px; z-index: 100;
        list-style: none;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .menu-item-wrapper:hover .sub-menu-custom {
        opacity: 1; visibility: visible;
        margin-left: 50px;
    }

    .sub-menu-custom li { 
		position: relative;
		margin: 0;
		list-style: none; 
	}

    .sub-menu-inner {
        position: absolute;
        left: 100%; top: 0;
        background: rgba(20, 20, 20, 0.95);
        padding: 20px;
        margin-left: 10px;
        min-width: 400px;
        opacity: 0; visibility: hidden;
        z-index: 110;
        list-style: none;
        transition: all 0.3s ease;
    }

    .sub-menu-custom li:hover > .sub-menu-inner {
        opacity: 1; visibility: visible;
        margin-left: 30px;
    }

    .sub-menu-custom li a { 
		font-size: 1.2rem;
		color: #fff; 
		font-weight: 900; 
		text-transform: uppercase; 
		text-decoration: none; 
		padding: 8px 0; display: block; }
 
	.sub-menu-inner li a { 
		font-size: 1.2rem; 
		color: rgba(255,255,255,0.7); 
		font-weight: 900; 
		text-transform: uppercase; 
		text-decoration: none; 
		padding: 5px 0; display: block; }
}

/* 3. MOBİL DÜZENİ (1023px VE ALTI) */
@media (max-width: 1023px) {
    .menu-item-wrapper { flex-wrap: wrap; width: 100%; }
    .main-link { flex: 1; padding-right: 50px; }

    .submenu-toggle-btn {
        background: transparent !important;
        border: none !important;
        color: #f7b817;
        font-size: 1.5rem;
        cursor: pointer;
        display: flex !important;
        transition: transform 0.3s ease;
    }

    .menu-item-wrapper > .submenu-toggle-btn { position: absolute; right: 0; top: -5px; }

    .sub-menu-custom, .sub-menu-inner {
        display: block !important;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        width: 100%;
        list-style: none;
        transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    }

    .sub-menu-custom { 
		padding-left: 0rem !important; 
	}
	.sub-menu-custom li { 
		margin: 0;
	}
    .sub-menu-inner { 
		max-width: 90%;
		padding-left: 0rem !important; 
		margin-left: 0;
	}
	
	.sub-menu-inner ul { 
		margin-left: 0!important;
	}

    .menu-item-wrapper.active > .sub-menu-custom,
    .sub-menu-custom li.active > .sub-menu-inner {
        max-height: 1200px;
        opacity: 1;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .menu-item-wrapper.active > .submenu-toggle-btn,
    .sub-menu-custom li.active .second-level-toggle {
        transform: rotate(180deg);
    }

    .sub-link-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; }
    
    .sub-menu-custom li a { 
		font-size: 1rem; 
		font-weight: 900; 
		text-transform: uppercase; 
		color: #fff; 
		text-decoration: none; 
		padding: 6px 0; 
		display: block; }
    .sub-menu-inner li a { 
		font-size: 1rem; 
		font-weight: 900; 
		text-transform: uppercase; 
		color: rgba(255,255,255,0.7); 
		text-decoration: none; 
		padding: 8px 0; 
		display: block; }
}