/* Styles for takeover and top-scroll ad */
.takeover-ad-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 9998;
}

@media (max-width: 768px) {
    .takeover-ad-section {
        height: 60vh;
    }
}

.takeover-ad-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Styles for panorama and mid-scroll ad */
.panorama-ad-section {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin: 40px 0;
}

@media (max-width: 768px) {
    .panorama-ad-section {
        height: 320px;
    }
}

.panorama-ad-viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .panorama-ad-viewport {
        background-attachment: scroll;
    }
}