/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Section Layout */
section {
    width: 100%;
    position: relative;
}

.owned_ips_section-content {
    max-width: 1708px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}
h2.owned_ips_section-title{
    color:#fff;
}
/* Typography */
.owned_ips_section-title {
    font-size: 59px;
    font-weight: 700;
    margin-bottom: 0;
    padding-top: 115px;
}

.owned_ips_title-white {
    color: #ffffff;
}

.owned_ips_title-blue {
    color: #00afef;
}

.owned_ips_subsection-title {
    font-size: 44px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 60px;
    padding-top: 60px;
}
.text-center{
    text-align:center;
}
.code-source{
    background:#000;
}
/* Hero Section */
.owned_ips_hero-section {
    background: #000000;
    position: relative;
    display: flex;
    align-items: center;
    background: #000 url('http://www.viking-lab.com/theme/vikinglab/img/cont-img/owned_bg01.png') no-repeat;
    background-size: cover;
    background-position: center;
}

.owned_ips_hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 110px 90px;
}

.owned_ips_hero-title-container{
    display:flex;
    gap: 15px;
    align-items: center;
}
.owned_ips_hero-accent-bar {
    width: 71px;
    height: 107px;
    background-color: #4cc9f0;
    margin-left: -91px;
    margin-bottom: 30px;
}

.owned_ips_hero-title {
    font-size: 59px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

h2.owned_ips_hero-subtitle {
    font-size: 27px;
    font-weight: 500;
    color: #ffff00;
    margin-bottom: 40px;
}

.owned_ips_hero-intro {
    font-size: 17px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 30px;
    max-width: 851px;
}

.owned_ips_hero-text-content {
    max-width: 1043px;
}

.owned_ips_hero-text-content p {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: 20px;
}

.owned_ips_hero-background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.2;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Defining Spin-offs Section */
.owned_ips_defining-section {
    background: #000000;
    padding: 60px 90px;
}

.owned_ips_flowchart-container {
    position: relative;
    width: 100%;
    height: auto;
    margin-top: 150px;
}

/* Classic IPs Circle */
.owned_ips_flowchart-left {
    position: absolute;
    left: 90px;
    top: 0;
    width: 300px;
    height: 289px;
}

.owned_ips_classic-ips-circle {
    position: relative;
    width: 198px;
    height: 198px;
    border: 8px solid #4dcaf1;
    border-radius: 50%;
    background: #000000;
    margin: 36px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.owned_ips_classic-ips-images {
    position: absolute;
    width: 300px;
    height: 289px;
    top: -144px;
    left: -150px;
}

.owned_ips_ip-image {
    position: absolute;
    background-size: cover;
    background-position: center;
}

.owned_ips_ip-image-1 {
    width: 101px;
    height: 101px;
    top: 27px;
    left: 0;
    background-color: #333;
}

.owned_ips_ip-image-2 {
    width: 88px;
    height: 88px;
    top: 0;
    left: 212px;
    background-color: #444;
}

.owned_ips_ip-image-3 {
    width: 102px;
    height: 103px;
    top: 186px;
    left: 53px;
    background-color: #555;
}

.owned_ips_ip-image-4 {
    width: 76px;
    height: 76px;
    top: 186px;
    left: 214px;
    background-color: #666;
}

.owned_ips_classic-ips-title {
    font-size: 29px;
    font-weight: 700;
    color: #4bc9ef;
    text-align: center;
    line-height: 1.5;
    z-index: 2;
}

/* Process Flow */
.owned_ips_process-flow {
    position: absolute;
    left: 299px;
    top: 78px;
    width: 903px;
    height: 518px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}

.owned_ips_process-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.owned_ips_step-circle {
    width: 214px;
    height: 64px;
    border: 3px solid;
    border-radius: 32px;
    background: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.owned_ips_purple-border {
    border-color: #723fe3;
}

.owned_ips_pink-border {
    border-color: #e6096f;
}

.owned_ips_step-number {
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 5px;
}

.owned_ips_step-title {
    font-size: 19px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
}

.owned_ips_purple-border .owned_ips_step-title {
    color: #713fe3;
}

.owned_ips_pink-border .owned_ips_step-title {
    color: #e5096f;
}

.owned_ips_step-description {
    margin-top: 15px;
    background: #262626;
    padding: 20px;
    border-radius: 5px;
    width: 212px;
    min-height: 83px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.owned_ips_step-description p {
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 1.8;
    margin: 0;
}

/* Flow Lines */
.owned_ips_flow-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.owned_ips_flow-line {
    position: absolute;
    background: #e6096f;
}

.owned_ips_diagonal-1 {
    width: 556px;
    height: 2px;
    top: 159px;
    left: 469px;
    transform: rotate(23deg);
    transform-origin: left center;
}

.owned_ips_horizontal-1 {
    width: 769px;
    height: 2px;
    top: 135px;
    left: 249px;
}

.owned_ips_horizontal-2 {
    width: 769px;
    height: 2px;
    top: 425px;
    left: 473px;
}

/* IP Extension Circle */
.owned_ips_flowchart-right {
    position: absolute;
    right: 88px;
    top: 78px;
    width: 290px;
    height: 290px;
}

.owned_ips_ip-extension-circle {
    width: 288px;
    height: 288px;
    border: 8px solid #ffff00;
    border-radius: 50%;
    background: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.owned_ips_extension-title {
    font-size: 24px;
    font-weight: 700;
    color: #ffff00;
    line-height: 1.6;
    margin-bottom: 20px;
}

.owned_ips_extension-description {
    font-size: 15px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.8;
}

/* IP Showcase Sections */
.owned_ips_ip-showcase {
    background: #000000;
    padding: 60px 90px;
}

.owned_ips_rayphie-section .owned_ips_ip-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 60px;
    margin-top: 100px;
}

.owned_ips_ip-image-left {
    flex: 0 0 265px;
}

.owned_ips_rayphie-image {
    width: 265px;
    height: 457px;
    background-color: #333;
    background-size: cover;
    background-position: center;
}

.owned_ips_ip-details {
    flex: 1;
    padding-top: 50px;
}

.owned_ips_series-title {
    font-size: 29px;
    font-weight: 500;
    color: #f72585;
    margin-bottom: 40px;
}

.owned_ips_series-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.owned_ips_series-item {
    padding: 15px 20px;
    border: 1px solid #fd3992;
    background: transparent;
    color: #f72585;
    font-size: 18px;
    font-weight: 500;
    width: 320px;
}

.owned_ips_ip-image-right {
    position: absolute;
    right: 0;
    bottom: -50px;
}

.owned_ips_character-image {
}

.owned_ips_ip-description {
    margin-top: 0;
    max-width: 970px;
}

.owned_ips_ip-description p {
    font-size: 18px;
    font-weight: 500;
    color: #fefefe;
    margin-bottom: 15px;
    line-height: 1.6;
}

/* Character Gallery Section */
.owned_ips_character-gallery-section {
    background: #000000;
    padding: 60px 90px;
}

.owned_ips_character-gallery {
    margin-top: 100px;
    display: flex;
    justify-content: center;
}

.owned_ips_character-lineup {
    width: 1362px;
}

/* Terror Man Section */
.owned_ips_terror-section {
    min-height: 1089px;
}

.owned_ips_terror-content {
    position: relative;
    display: flex;
    gap: 60px;
    /* margin: 100px 0; */
}

.owned_ips_terror-image-left {
    flex: 0 0 570px;
}

.owned_ips_terror-poster {
    width: 570px;
    height: 594px;
    background-color: #333;
    background-size: cover;
    background-position: center;
}

.owned_ips_terror-details {
    flex: 1;
    padding-top: 0;
}

.owned_ips_terror-logo {
    width: 417px;
    height: 104px;
    background-size: cover;
    background-position: center;
    margin-bottom: 50px;
}

.owned_ips_movie-title {
    font-size: 23px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 30px;
}

.owned_ips_movie-description {
    margin-bottom: 40px;
}

.owned_ips_movie-description p {
    font-size: 18px;
    font-weight: 500;
    color: #fefefe;
    margin-bottom: 0;
    line-height: 1.6;
}

.owned_ips_terror-gallery {
    position: relative;
    bottom: 0;
}

.owned_ips_terror-character-1 {
    background-size: cover;
    background-position: center;
}

.owned_ips_terror-character-1 {position: absolute;top: -120px;}

/* Strategy Section */
.owned_ips_strategy-section {
    background: #000000;
    min-height: 972px;
    padding: 60px 90px;
}

.owned_ips_strategy-content {
    display: flex;
    gap: 30px;
    margin-top: 50px;
    justify-content: space-between;
    align-items: center;
}

.owned_ips_strategy-left {
    flex: 0 0 400px;
}

.owned_ips_promote-section {
    background: transparent;
    padding: 40px 20px;
}

.owned_ips_promote-title {
    background: #f74e9c;
    color: #ffffff;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    padding: 25px;
    border-radius: 45px;
    margin-bottom: 40px;
}

.owned_ips_promote-title__white {
    background: #ffffff;
    color: #262626;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    padding: 25px;
    border-radius: 45px;
    margin: 40px 0;
}

.owned_ips_target-audience {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.owned_ips_audience-item {
    text-align: center;
}

.owned_ips_audience-title {
    font-size: 23px;
    font-weight: 700;
    color: #f74e9b;
    margin-bottom: 15px;
}

.owned_ips_audience-description {
    font-size: 18px;
    font-weight: 400;
    color: #fefefe;
    line-height: 1.5;
}

.owned_ips_strategy-center {
    /* flex: 0 0 396px; */
}

.owned_ips_strategy-image {
    width: auto;
    /* height: 636px; */
}

.owned_ips_strategy-right {
    flex: 0 0 401px;
}

.owned_ips_service-features {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.owned_ips_feature-item {
    background: #262626;
    padding: 25px;
    border-radius: 48px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owned_ips_feature-item p {
    font-size: 15px;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    line-height: 1.8;
    margin: 0;
}

/* Revenue Section */
.owned_ips_revenue-section {
    background: #000000;
    min-height: 876px;
    padding: 60px 90px;
}

.owned_ips_revenue-content {
    position: relative;
    margin: 120px;
    text-align: center;
}

.owned_ips_viking-lab-logo {
    width: 265px;
    height: 50px;
    background-color: #444;
    background-size: cover;
    background-position: center;
    margin-bottom: 80px;
}

.owned_ips_revenue-flow {
    display: flex;
    flex-direction: column;
    gap: 25px;
    max-width: 800px;
}

.owned_ips_revenue-step {
    display: flex;
    align-items: center;
    gap: 30px;
}

.owned_ips_step-box {
    background: #000000;
    border: 2px solid #f42584;
    padding: 20px;
    min-width: 274px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 36px;
}

.owned_ips_step-box.purple {
    border-color: #8b4eff;
}

.owned_ips_step-box .owned_ips_step-title {
    font-size: 19px;
    font-weight: 700;
    color: #f32583;
    text-align: center;
    line-height: 1.3;
}

.owned_ips_step-box.purple .owned_ips_step-title {
    color: #8b4dff;
}

.owned_ips_step-description {
    font-size: 17px;
    font-weight: 500;
    color: #fcfafa;
}

.owned_ips_revenue-arrows {
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
    height: 500px;
}

.owned_ips_arrow {
    position: absolute;
    width: 84px;
    height: 268px;
    background-color: #555;
    background-size: cover;
    background-position: center;
}

.owned_ips_arrow-1 {
    top: 0;
    right: 0;
}

.owned_ips_arrow-2 {
    top: 155px;
    right: 0;
}

.owned_ips_secondary-flow {
    position: absolute;
    right: 200px;
    top: 158px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.mobile-only{display:none}
/* Responsive Design - Desktop Down Approach */

/* Laptop (1366px and below) */
@media screen and (max-width: 1366px) {
    .mobile-only{display:none}
    .owned_ips_section-content {
        max-width: 1200px;
        padding: 0 30px;
    }
    
    .owned_ips_section-title {
        font-size: 48px;
    }
    
    .owned_ips_subsection-title {
        font-size: 36px;
    }
    
    .owned_ips_hero-title {
        font-size: 48px;
    }
    
    .owned_ips_flowchart-container {
    }
    
    .owned_ips_process-flow {
        width: 750px;
        gap: 15px;
    }
    
    .owned_ips_step-circle {
        width: 180px;
        height: 55px;
    }
    
    .owned_ips_step-description {
        width: 180px;
        min-height: 70px;
        padding: 15px;
    }
    
    .owned_ips_strategy-content {
        gap: 40px;
    }
    
    .owned_ips_strategy-left {
        flex: 0 0 320px;
    }
    
    .owned_ips_strategy-center {
        flex: 0 0 320px;
    }
    
    .owned_ips_strategy-image {
        width: 320px;
        height: 520px;
    }
    
    .owned_ips_strategy-right {
        flex: 0 0 340px;
    }
    .owned_ips_ip-showcase, .owned_ips_strategy-section, .owned_ips_revenue-section{
        padding: 0 15px 80px;
        min-height: 100%;
    }
    .owned_ips_revenue-content{
        margin: 50px 0;
    }
}

/* Tablet (768px and below) */
@media screen and (max-width: 1024px) {
    .pc-only{display:none}
    .mobile-only{display:block}
    .owned_ips_section-content {
        padding: 0 20px;
    }
    
    .owned_ips_section-title {
        font-size: 36px;
    }
    
    .owned_ips_subsection-title {
        font-size: 28px;
    }
    
    .owned_ips_hero-title {
        font-size: 36px;
        text-align: center;
    }
    
    .owned_ips_hero-subtitle {
        font-size: 22px;
        /* text-align: center; */
    }
    
    .owned_ips_hero-text-content p {
        font-size: 16px;
    }
    
    .owned_ips_flowchart-container {
    }
    
    .owned_ips_rayphie-section .owned_ips_ip-content {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        margin-top: 50px;
    }
    
    .owned_ips_ip-image-left,
    .owned_ips_ip-image-right {
        position: relative;
    }
    
    .owned_ips_ip-details {
        padding-top: 30px;
        text-align: center;
    }
    
    .owned_ips_series-items {
        align-items: center;
    }
    
    .owned_ips_series-item {
        width: 280px;
    }
    
    .owned_ips_terror-content {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    
    .owned_ips_terror-image-left {
        flex: none;
    }
    
    .owned_ips_terror-poster {
        width: 400px;
        height: 420px;
    }

    .owned_ips_terror-character-1 {
        position: relative;
        top: 0;
    }
    
    .owned_ips_terror-details {
        padding-top: 0;
        /* text-align: center; */
    }
    
    .owned_ips_terror-gallery {
        justify-content: center;
    }
    
    .owned_ips_strategy-content {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        margin-top: 20px;
    }
    
    .owned_ips_strategy-left,
    .owned_ips_strategy-center,
    .owned_ips_strategy-right {
        flex: none;
        width: 100%;
        max-width: 400px;
        margin-bottom: 30px;
    }
    .owned_ips_promote-section{
        padding: 20px;
    }
    
    .owned_ips_strategy-image {
        width: 100%;
        height: auto;
    }
    
    .owned_ips_character-lineup {
        width: 100%;
        max-width: 600px;
    }
    
    .owned_ips_revenue-flow {
        max-width: 100%;
    }
    
    .owned_ips_revenue-step {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .owned_ips_step-box {
        min-width: 250px;
    }
    
    .owned_ips_secondary-flow {
        position: static;
        margin-top: 40px;
    }
    
    .owned_ips_revenue-arrows {
        display: none;
    }
}

/* Mobile (480px and below) */
@media screen and (max-width: 480px) {
    .owned_ips_hero-content{
        padding: 0 15px 50px;
    }
    .owned_ips_hero-accent-bar{
        margin-left: -31px;
        width: 16px;
    }
    .owned_ips_section-content {
        padding: 0 15px 60px;
    }
    h2.owned_ips_section-title{
        font-size: 24px;
        text-align: left;
        padding-top: 50px;
        margin: 0;
    }
    .owned_ips_section-title {
        font-size: 28px;
    }
    
    .owned_ips_subsection-title {
        font-size: 20px;
        padding-top: 20px;
        margin-bottom: 0;
    }
    
    .owned_ips_hero-title {
        font-size: 28px;
    }    
    
    h2.owned_ips_hero-subtitle {
        font-size: 20px;
        margin-bottom: 0;
    }
    .owned_ips_defining-section{
    padding: 0;
    }
    .owned_ips_hero-text-content p {
        font-size: 14px;
    }

    .owned_ips_hero-intro {
        font-size: 15px;
    }
    
    .owned_ips_flowchart-container {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 50px;
    }
    
    .owned_ips_ip-image-left {
        display: flex;
        justify-content: center;
    }
    
    .owned_ips_rayphie-image {
        width: 200px;
        height: 350px;
    }
    
    .owned_ips_series-item {
        width: 100%;
        max-width: 280px;
        font-size: 16px;
    }
    
    .owned_ips_ip-image-right {
        position: relative;
        display: flex;
        justify-content: center;
        bottom: 0;
        padding-bottom: 40px;
    }
    
    .owned_ips_character-image {
    width: auto;
    }
    
    .owned_ips_terror-poster {
        width: 300px;
        height: 350px;
    }

    .owned_ips_character-gallery-section{
        padding: 0 15px 80px;
    }
    .owned_ips_character-gallery{
        margin-top:50px;
    }
    .owned_ips_terror-logo {
        width: 100%;
        max-width: 300px;
        height: 80px;
    }
    
    .owned_ips_movie-title {
        font-size: 20px;
    }
    
    .owned_ips_movie-description p {
        font-size: 16px;
    }
    
    .owned_ips_terror-gallery {
        flex-direction: column;
        align-items: center;
    }   
    
    .owned_ips_character-lineup {
    }
    
    .owned_ips_promote-title {
        font-size: 28px;
        padding: 20px;
    }
    
    .owned_ips_audience-title {
        font-size: 20px;
    }
    
    .owned_ips_audience-description {
        font-size: 16px;
    }
    
    .owned_ips_feature-item {
        padding: 20px;
        min-height: 80px;
    }
    
    .owned_ips_feature-item p {
        font-size: 14px;
    }
    
    .owned_ips_step-box {
        min-width: 200px;
        height: 60px;
        padding: 15px;
    }
    
    .owned_ips_step-box .owned_ips_step-title {
        font-size: 16px;
    }
    
    .owned_ips_step-description {
        font-size: 15px;
    }
    
    .owned_ips_viking-lab-logo {
        width: 200px;
        height: 40px;
    }
    
    .owned_ips_ip-description p {
        font-size: 16px;
    }
}

/* Extra small mobile (320px and below) */
@media screen and (max-width: 320px) {
    .owned_ips_section-title {
        font-size: 24px;
    }
    
    .owned_ips_subsection-title {
        font-size: 20px;
    }
    
    .owned_ips_hero-title {
        font-size: 24px;
    }
    
    .owned_ips_flowchart-container {
        transform: scale(0.3);
        height: 250px;
    }
    
    .owned_ips_rayphie-image {
        width: 180px;
        height: 300px;
    }
    
    .owned_ips_character-image {
        width: 200px;
        height: 250px;
    }
    
    .owned_ips_terror-poster {
        width: 250px;
        height: 300px;
    }
    
    .owned_ips_step-box {
        min-width: 180px;
        height: 50px;
    }
    
    .owned_ips_step-box .owned_ips_step-title {
        font-size: 14px;
    }
}