.mob{
    display: none;
}

@media (max-width: 767px) {
   .mob{
    display: block;
   }
   .desk{
    display: none;
   }
}
.bg-obsidian{
    background: #141A39;
}
#userMenuButton{
    padding: 0;
}

#userDropdown{

width:100%;
display: flex;
margin-top: 20px;
}
.userDropdown{
    width: 100%;
}
#userDropdown .p-4{

width: 50%;
}
#userDropdown .border-b{
    border-bottom-width: 0;
}
.black{
    color: #000;
}
.js-show-when-logged-in { display: none; }
.js-show-when-logged-out { display: flex; }

body.is-logged-in .js-show-when-logged-in { display: block; }
body.is-logged-in .js-show-when-logged-out { display: none; }
@media (max-width: 767px) {
    #userDropdown{

        flex-direction: column;
        margin-bottom: 20px;
        }
        #authButtons{
            margin-bottom: 20px;
  
        }
        #userDropdown .p-4{

            width: 100%;
            }
    .hero{
        padding-bottom: 0;
    }
    .hero-content .h1{
        margin-bottom: 20px;
    }
    .start-row{
        padding: 0 36px !important;
    }
    #userDropdown .border-b{
        border-bottom-width: 1px;
    }
 }
[data-show-when-logged-in] {
    display: none;
}
[data-hide-when-logged-in] {
    display: block; 
}

.is-logged-in [data-show-when-logged-in] {
    display: block; 
}
.is-logged-in [data-hide-when-logged-in] {
    display: none;
}
#frame{
    padding-top: 10px;
}
.start-row{
    padding: 119px 0;
}
@media only screen and (max-width: 1023px) {
    .start {
        padding-top: 40px;
    }
}
@media only screen and (max-width: 767px) {
    .start {
        padding-top: 54px;
        padding-bottom: 70px;
    }
}
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.popup-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.popup-window {
    background: #111;
    padding: 25px 30px;
    border-radius: 10px;
    max-width: 380px;
    width: 90%;
    color: #fff;
    position: relative;
    animation: popupScale .35s ease forwards;
}

@keyframes popupScale {
    0% { transform: scale(.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.popup-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
}

.popup-btn {
    display: block;
    margin-top: 30px;
    background: #ffcc00;
    border: none;
    padding: 10px 18px;
    width: 100%;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    width: 100%;
    text-align: center;
    color: #000;
}
.iframe-wrapper {
    position: relative;
    width: 100%;

}
.arrow-hide{
    position: absolute;
    width: 100%;
    height: 70px;
    background-color: #0e1124;
    z-index: 2;
}

#triggerZone {
    position: absolute;
    bottom:30px;   
    right: 40px;
    width: 170px;  
    height: 85px;  
    cursor: pointer;
    background: rgba(255,0,0,0); /* прозорий */
    z-index: 9999;
}
.button-mob{
    width: 100%;
    position: relative;
    z-index: 30;
}
.iframe-wrapper{
    margin-top: -60px;
}
@media (max-width: 767px) {
    #triggerZone {
        position: absolute;
        bottom: -70px;   
        right: 0px;
        width: 250px;  
        height: 45px;  
        cursor: pointer;
        background: rgba(255,0,0,0); /* прозорий */
        z-index: 9999;
    }
    .hero-content-container{
        margin-top: 20px;
    }
.button-container{
    padding: 0 15px;
}
 
.container-frame{
    padding: 0 !important;
}
.start-frame iframe{
    width: calc(100% + 35px);
    padding-left: 36px;
}

 .userDropdown{
    width: 100%;
    padding: 0 20px;
 }
 #userDropdown{
    width: 100%;
 }
 }

.popup-title{
    margin-bottom: 10px;
    font-weight: 900;
}
#popupOverlay {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease;
}

#popupOverlay.pre-show {
    display: flex; /* якщо потрібно */
}

#popupOverlay.show {
    opacity: 1;
    visibility: visible;
}
.yellow{
    background-color: #ffcc00;
    color: #000;
}
#loginModal, #registerModal{
    color: #fff;
}
.footer-list li a{
    text-transform: uppercase;
}