/*Hero*/
.media-and-entertainment-page .hero{ background: var(--black) url("../../img/media-and-entertainment/hero-bg.jpg"); background-position: top center; background-attachment: fixed; background-size: 1600px auto; background-repeat: no-repeat; height: 900px; padding-top: 140px; border-radius: 0 0 40px 40px; position: relative; z-index: 10; color: var(--white); overflow: hidden; }
.media-and-entertainment-page .hero .text{ max-width: 800px; }
.media-and-entertainment-page .hero .text .pill{ background: var(--black); color: var(--white); border: 1px solid var(--white); padding: 10px 25px 10px 20px; border-radius: 50px; display: inline-flex; margin-bottom: 30px; text-transform: uppercase; font-size: 13px; align-items: center; }
.media-and-entertainment-page .hero .text .pill figure{ width: 16px; margin-right: 10px; position: relative; top: 2px; }
.media-and-entertainment-page .hero .text .pill figure img{ width: 100%; }
.media-and-entertainment-page .hero .text .title{ line-height: 1.1; font-weight: 600; margin-bottom: 30px; font-size: 56px; }
.media-and-entertainment-page .hero .text .title span{ display: block; }
.media-and-entertainment-page .hero .text .description{ line-height: 1.6; font-size: 15px; margin-bottom: 60px; max-width: 550px; }
.media-and-entertainment-page .hero .text .description a{ color: var(--white); text-decoration: underline; }
.media-and-entertainment-page .hero .text .description a:hover{ text-decoration: none; }
.media-and-entertainment-page .hero .text .button{}

/* Our Experience */
.media-and-entertainment-page .our-experience{ background: var(--black); color: var(--white); padding: 120px 0 150px; margin-top: -40px; }
.media-and-entertainment-page .our-experience .content{ display: flex; justify-content: space-between; }
.media-and-entertainment-page .our-experience .title{ text-align: center; font-size: 38px; color: var(--white); margin-bottom: 80px; font-weight: 400; }
.media-and-entertainment-page .our-experience .right{ width: 100%; }
.media-and-entertainment-page .our-experience .right ul{ display: flex; width: 100%; justify-content: space-between; gap: 100px; }
.media-and-entertainment-page .our-experience .right ul li{}
.media-and-entertainment-page .our-experience .right ul li .value{ background: linear-gradient(255.94deg, #4050FF 46.08%, #E7F6FF 98.83%); background-clip: text; color: transparent; font-size: 132px; font-weight: 200; font-family: var(--hanken); border-bottom: 1px solid #535353; padding-bottom: 0; margin-bottom: 20px; height: 160px; }
.media-and-entertainment-page .our-experience .right ul li .description{ font-weight: 300; line-height: 1.4; font-size: 16px; }
.media-and-entertainment-page .our-experience .right ul li .description span{ display: block; }
.media-and-entertainment-page .our-experience .right ul li.third .value{ font-size: 105px; padding-top: 20px; }

/* Our Work */
.media-and-entertainment-page .our-work{ padding: 40px 0; background: var(--black); color: var(--white); }
.media-and-entertainment-page .our-work .head{ display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; }
.media-and-entertainment-page .our-work .head .left{ max-width: 450px; }
.media-and-entertainment-page .our-work .head .left .title{ font-size: 38px; font-weight: bold; letter-spacing: -1px; line-height: 1.3; margin-top: 10px; }
.media-and-entertainment-page .our-work .head .right{ max-width: 620px; font-size: 14px; line-height: 1.6; color: #C8C8C8; font-weight: 300; }

.media-and-entertainment-page .our-work .video{ background: var(--black); position: relative; height: 664px; line-height: 0; overflow: hidden; border-radius: 10px; margin: 100px 0 0; }
.media-and-entertainment-page .our-work .video iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

/*Solutions*/
.media-and-entertainment-page .solutions{ padding: 80px 0; position: relative; z-index: 10; background: var(--black); color: var(--white); }
.media-and-entertainment-page .solutions .content{ position: relative; }

.media-and-entertainment-page .solutions .head{ text-align: center; margin: 0 auto 90px; max-width: 600px; }
.media-and-entertainment-page .solutions .head .section-title{ letter-spacing: -1px; font-size: 38px; margin-bottom: 20px; font-weight: 500; }

.media-and-entertainment-page .solutions .timeline{}
.media-and-entertainment-page .solutions .timeline .section-title{ font-size: 48px; font-weight: 300; text-align: center; padding: 120px 0 30px; letter-spacing: -1px; margin-bottom: 80px; }
.media-and-entertainment-page .solutions .timeline ul{ position: relative; padding: 60px 0 30px; max-width: 1024px; margin: 0 auto; }
.media-and-entertainment-page .solutions .timeline ul li{ display: flex; justify-content: space-between; flex-direction: row; align-items: center; margin-bottom: 160px; position: relative; }
.media-and-entertainment-page .solutions .timeline ul li .main-image{ width: 360px; height: auto; overflow: hidden; line-height: 0; }
.media-and-entertainment-page .solutions .timeline ul li .main-image img{ width: 100%; height: 100%; object-fit: cover; }
.media-and-entertainment-page .solutions .timeline ul li .text{ width: 560px; }
.media-and-entertainment-page .solutions .timeline ul li .text h2{ color: var(--white); margin-bottom: 20px; font-weight: 500; font-size: 28px; line-height: 1.2; position: relative; }
.media-and-entertainment-page .solutions .timeline ul li .text p{ color: #C4C4C4; font-size: 16px; line-height: 1.8; font-weight: 300; padding-right: 40px; }
.media-and-entertainment-page .solutions .timeline ul li:nth-child(2n){ flex-direction: row-reverse; }

/* Our Services */
.media-and-entertainment-page .our-services{ padding: 120px 0 50px; border-radius: 40px; z-index: 30; background: var(--white); margin-top: -40px; position: relative; }
.media-and-entertainment-page .our-services .content{ max-width: 1200px; }
.media-and-entertainment-page .our-services .head{ display: flex; justify-content: center; align-items: center; margin-bottom: 100px; }
.media-and-entertainment-page .our-services .head .title{ font-size: 38px; font-weight: 600; letter-spacing: -1px; }

.media-and-entertainment-page .our-services .services-list{ display: flex; flex-wrap: wrap; }
.media-and-entertainment-page .our-services .services-list li{ width: 33.3333%; margin-bottom: 30px; }
.media-and-entertainment-page .our-services .services-list li .box-content{ padding: 30px; }
.media-and-entertainment-page .our-services .services-list li .box-content figure{ width: auto; height: 60px; margin-bottom: 30px; }
.media-and-entertainment-page .our-services .services-list li .box-content figure img{ width: auto; height: 100%; }
.media-and-entertainment-page .our-services .services-list li .box-content h3{ font-weight: 500; font-size: 21px; letter-spacing: -1px; line-height: 1.2; margin-bottom: 20px; }
.media-and-entertainment-page .our-services .services-list li .box-content h3 span{ display: block; }
.media-and-entertainment-page .our-services .services-list li .box-content p{ color: #383838; font-size: 15px; line-height: 1.4; }
.media-and-entertainment-page .our-services .services-list li .box-content p strong{ font-weight: 600; color: var(--black); }

    .media-and-entertainment-page .our-services .services-list li:nth-child(1) .box-content figure img{}
    .media-and-entertainment-page .our-services .services-list li:nth-child(2) .box-content figure img{ height: 53px; }
    .media-and-entertainment-page .our-services .services-list li:nth-child(3) .box-content figure img{}
    .media-and-entertainment-page .our-services .services-list li:nth-child(4) .box-content figure img{}
    .media-and-entertainment-page .our-services .services-list li:nth-child(5) .box-content figure img{}
    .media-and-entertainment-page .our-services .services-list li:nth-child(6) .box-content figure img{ height: 65px; }

/* Databricks Partner */
.media-and-entertainment-page .databricks-partner{ background: var(--black); color: var(--white); padding: 150px 0 170px; margin-top: -40px; }
.media-and-entertainment-page .databricks-partner .content{ display: flex; justify-content: space-between; flex-direction: row-reverse; align-items: center; background: #131313; padding: 90px 150px; border-radius: 15px; position: relative; overflow: hidden; }
.media-and-entertainment-page .databricks-partner .content:before{ content: ""; display: block; width: 600px; height: 647px; background: url("../../img/services/databricks/v3/bg-partner.svg"); background-size: 100% 100%; position: absolute; top: -110px; left: -40px; }
.media-and-entertainment-page .databricks-partner .content .text{ padding-left: 220px; position: relative; z-index: 20; }
.media-and-entertainment-page .databricks-partner .content .text h2{ letter-spacing: -1px; font-size: 30px; margin-bottom: 15px; }
.media-and-entertainment-page .databricks-partner .content .text p{ line-height: 1.5; font-weight: 300; font-size: 16px; }
.media-and-entertainment-page .databricks-partner .content .text .button{ margin-top: 20px; }
.media-and-entertainment-page .databricks-partner .content figure{ width: 220px; min-width: 220px; }
.media-and-entertainment-page .databricks-partner .content figure img{ width: 100%; }

/* Success Stories */
.media-and-entertainment-page .success-stories{ padding: 100px 0 80px; }

/* FAQs */
.media-and-entertainment-page .faqs{ margin-top: -40px; padding: 160px 0 100px; }

@media screen and (max-width: 1280px){

    /* Hero */
    .media-and-entertainment-page .hero{ padding-top: 90px; height: 740px; overflow: hidden; }
    .media-and-entertainment-page .hero .databricks-logo{ width: 770px; }
    .media-and-entertainment-page .hero .text .description{ margin-bottom: 40px; }

    /* Our Experience */
    .media-and-entertainment-page .our-experience{ padding: 100px 30px 90px; }
    .media-and-entertainment-page .our-experience .right ul li{ margin-left: 120px; }
    .media-and-entertainment-page .our-experience .right ul li .value{ font-size: 112px; }
    .media-and-entertainment-page .our-experience .right ul li .description{ font-size: 14px; }

    /*Solutions*/
    .media-and-entertainment-page .solutions .timeline ul li .text{ padding-right: 30px; }
    .media-and-entertainment-page .solutions .timeline ul li:nth-child(2n) .text{ padding-right: 0; padding-left: 30px; }
    
    /* Our Services */
    .media-and-entertainment-page .our-services .head .right{ font-size: 26px; }

    /* Databricks Partner */
    .media-and-entertainment-page .databricks-partner{ padding: 100px 20px 100px; }
    .media-and-entertainment-page .databricks-partner .content{ padding: 80px 100px; }
    .media-and-entertainment-page .databricks-partner .content figure{ width: 180px; min-width: 180px; }
    .media-and-entertainment-page .databricks-partner .content .text{ padding-left: 120px; }
    .media-and-entertainment-page .databricks-partner .content .text p{ font-size: 15px; }

    /* Our Work */
    .media-and-entertainment-page .our-work .head .left .title{ font-size: 36px; }
    .media-and-entertainment-page .our-work .head .right{ font-size: 14px; }
    .media-and-entertainment-page .our-work .video{ height: auto; padding-top: 56.25%; }

}

@media screen and (max-width: 1024px){

    /* Hero */
    .media-and-entertainment-page .hero{ height: 750px; background-size: cover; }
    .media-and-entertainment-page .hero:before{ content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--black); opacity: .5; z-index: 1; }
    .media-and-entertainment-page .hero .text{ max-width: 100%; position: relative; z-index: 2; }
    .media-and-entertainment-page .hero .text .pill{ font-size: 12px; padding: 4px 14px; }
    .media-and-entertainment-page .hero .text .pill figure{ width: 17px; }
    .media-and-entertainment-page .hero .text .title{ font-size: 36px; }
    .media-and-entertainment-page .hero .text .title span{ display: inline; }
    .media-and-entertainment-page .hero .text .description{ font-size: 14px; max-width: 100%; }

    /* Our Experience */
    .media-and-entertainment-page .our-experience{ padding: 120px 10px 50px; }
    .media-and-entertainment-page .our-experience .content{ flex-direction: column; }
    .media-and-entertainment-page .our-experience .title{ font-size: 32px; margin-bottom: 60px; font-weight: 500; }
    .media-and-entertainment-page .our-experience .left{ margin-bottom: 40px; }
    .media-and-entertainment-page .our-experience .left h3{ font-size: 17px; }
    .media-and-entertainment-page .our-experience .left h3 span{ display: inline; }
    .media-and-entertainment-page .our-experience .right ul{ flex-wrap: wrap; gap: 40px; }
    .media-and-entertainment-page .our-experience .right ul li{ margin-left: 0; margin-bottom: 0; width: 40%; }
    .media-and-entertainment-page .our-experience .right ul li .value{ font-size: 80px; height: auto; }
    .media-and-entertainment-page .our-experience .right ul li.third .value{ font-size: 65px; }

    /* Our Services */
    .media-and-entertainment-page .our-services{ padding: 80px 0 30px; }
    .media-and-entertainment-page .our-services .head{ flex-direction: column; text-align: left; justify-content: flex-start; align-items: flex-start; margin-bottom: 30px; }
    .media-and-entertainment-page .our-services .head .title{ font-size: 32px; margin-bottom: 25px; font-weight: 500; }
    .media-and-entertainment-page .our-services .head .right p{ display: inline; }
    .media-and-entertainment-page .our-services .head .right{ font-size: 24px; margin-bottom: 30px; }
    .media-and-entertainment-page .our-services .services-list li{ width: 50%; }
    .media-and-entertainment-page .our-services .services-list li .box-content{ padding: 20px; }
    .media-and-entertainment-page .our-services .services-list li .box-content h3{ letter-spacing: 0; }

    /* Databricks Partner */
    .media-and-entertainment-page .databricks-partner .content{ flex-direction: column-reverse; align-items: flex-start; padding: 60px 20px; }
    .media-and-entertainment-page .databricks-partner .content figure{ margin-bottom: 50px; width: 150px; min-width: 150px; }
    .media-and-entertainment-page .databricks-partner .content .text{ padding-left: 0; }
    .media-and-entertainment-page .databricks-partner .content .text h2{ font-size: 28px; }
    .media-and-entertainment-page .databricks-partner .content .text p{ font-size: 14px; }

    /* Our Work */
    .media-and-entertainment-page .our-work{ padding: 60px 0 30px; }
    .media-and-entertainment-page .our-work .head{ flex-direction: column; text-align: center; }
    .media-and-entertainment-page .our-work .head .left .title{ font-size: 32px; margin-bottom: 15px; font-weight: 500; }
    .media-and-entertainment-page .our-work .video{ margin: 60px 0 0; }

    /*Solutions*/
    .media-and-entertainment-page .solutions{ padding: 40px 0 70px; }
    .media-and-entertainment-page .solutions .head{ margin-bottom: 40px; }
    .media-and-entertainment-page .solutions .head .section-title{ font-size: 32px; }
    .media-and-entertainment-page .solutions .head .description{ font-size: 14px; }

    .media-and-entertainment-page .solutions .timeline ul{ padding: 30px 0; }
    .media-and-entertainment-page .solutions .timeline ul li{ max-width: 600px; margin: 0 auto 40px; }
    .media-and-entertainment-page .solutions .timeline ul li,
    .media-and-entertainment-page .solutions .timeline ul li:nth-child(2n){ flex-direction: column; }

    .media-and-entertainment-page .solutions .timeline ul li .main-image{ margin-bottom: 30px; width: 100%; height: auto; }
    .media-and-entertainment-page .solutions .timeline ul li .text{ width: 100%; }
    .media-and-entertainment-page .solutions .timeline ul li .text p{ font-size: 14px; padding-right: 0; line-height: 1.5; }
    
    .media-and-entertainment-page .solutions .timeline ul li .text{ padding-right: 0; }
    .media-and-entertainment-page .solutions .timeline ul li .text h2{ font-size: 22px; font-weight: 600; line-height: 1.3; }
    .media-and-entertainment-page .solutions .timeline ul li:nth-child(2n) .text{ padding-right: 0; padding-left: 0; }

}

@media screen and (max-width: 767px){

    /* Hero */
    .media-and-entertainment-page .hero .text .title{ font-size: 32px; }

    /* Our Experience */
    .media-and-entertainment-page .our-experience .right ul li{ width: 100%; }

    /* Our Services */
    .media-and-entertainment-page .our-services .services-list li{ width: 100%; margin-bottom: 50px; }
    .media-and-entertainment-page .our-services .services-list li .box-content{ padding: 0; }
    .media-and-entertainment-page .our-services .services-list li .box-content p{ font-size: 14px; }

}