<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Media House</title>
  <style>

 
      /* Base styles */
* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', Arial, sans-serif;
      }
      
body {
        background-color: #222;
        color: #fff;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', Arial, sans-serif;
      }

        html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
  }

  .thumbnail-container {
    box-sizing: border-box;
  }

  img {
    max-width: 100%;
    height: auto;
  }

      /* Header styles */
      header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: #000;
        box-shadow: 0 1px 5px 1px #000;
        height: 71px;
        z-index: 50;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3px 15px;
        border-bottom: 1px solid #171717;
      }

      header .logo-container {
        flex: 1;
        display: flex;
        justify-content: center;
      }

      header img {
        height: 56px;
        padding-top:3px;
        margin-top:3px;
      }
      
      /* Embedded Contact Form */
      .contact-form-embedded {
        background: rgba(255, 255, 255, 0.1);
        padding: 40px;
        b / order-radius: 15px;
        width: 100%;
        max-width: 800px;
        margin: 30px auto 0 auto;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
      }

      .form-group {
        margin-bottom: 25px;
        position: relative;
      }

      .form-group label {
        display: block;
        color: #ffffff;
        margin-bottom: 10px;
        font-weight: 500;
        font-size: 1.1rem;
      }

      .required-asterisk {
        color: #ff6b6b;
        margin-left: 3px;
        font-weight: bold;
      }

      .required-text {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.8rem;
        margin-top: 4px;
        font-style: italic;
      }

      .form-group input,
      .form-group textarea,
      .form-group select {
        width: 100%;
        padding: 15px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        b / order-radius: 10px;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        font-size: 1rem;
        box-sizing: border-box;
        transition: all 0.3s ease;
        box-shadow: inset 0px 3px 3px rgba(0, 0, 0, .3);
      }

      .form-group input::placeholder,
      .form-group textarea::placeholder {
        color: rgba(255, 255, 255, 0.6);
      }

      .form-group input:focus,
      .form-group textarea:focus,
      .form-group select:focus {
        outline: none;
        border-color: rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
      }

      .form-group textarea {
        resize: vertical;
        min-height: 130px;
        font-family: inherit;
      }

      .form-group select option {
        background: #1c92d3;
        color: #ffffff;
      }

      .form-actions {
        display: flex;
        gap: 20px;
        justify-content: center;
        margin-top: 35px;
      }

      /* Submit button styled like other page buttons */
      .form-btn.submit {
        background: radial-gradient(#99c9f2, #5db3f5);
        border: 1px solid #76b7f1;
        color: #ffffff;
        padding: 15px 40px;
        font-size: 1.2rem;
        font-weight: 400;
        cursor: pointer;
        transition: all 0.3s ease;
        min-width: 150px;
      }

      .form-btn.submit:hover {
        background: radial-gradient(#88c0f0, #4a9ff2);
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }

      @media only screen and (max-width: 1000px) {
        .form-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 1.1rem;
        }
      }

      /* Section styles */
      section {
        position: relative;
        padding: 40px 16px;
      }

      .hero-section-1 {
        height: 100vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background-attachment: fixed;
      }

      .hero-section-1 img {
        max-width: 45%;
        z-index: 10;
      }
      
      .hero-section-1 h1 {
          color:#FFFFFF;
          text-shadow: 2px 2px rgb(0, 0, 0, 0.4);
      }
      
      .hero-section-1 h2 {
          color:#FFFFFF;
      }
      
      /* Style the video: 100% width and height to cover the entire window */
      #mediahousevideo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
}

        .hero-section-2 {
        height: 100vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background-attachment: fixed;
        background-image: url('https://5t5dxhcacb.ufs.sh/f/SxxXQFYajzVwN4iarV7ZUOaq8RlWVQtnksAiBPpSKrYywCgj');
      }

      .hero-section-2 img {
        max-width: 45%;
        z-index: 10;
      }
      
      .hero-section-3 {
        height: 100vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background-attachment: fixed;
      }

      .hero-section-3 img {
        max-width: 45%;
        z-index: 10;
      }
      
      .hero-section-4 {
        height: 100vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background-attachment: fixed;
      }

      .hero-section-4 img {
        max-width: 45%;
        z-index: 10;
      }
      
      .hero-section-5 {
        height: 100vh;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        background-attachment: fixed;
      }

      .hero-section-5 img {
        max-width: 45%;
        z-index: 10;
      }

      /* Gradient sections */
      .dark-gradient-top {
        background: linear-gradient(to right, #222222, #3b3a3a, #222222);
        padding: 40px 32px;
      }
      
      .dark-gradient-bottom {
        background: linear-gradient(to right, #222222, #3b3a3a, #222222);
        padding: 40px 32px;
      }

      .blue-gradient {
        background: linear-gradient(to right, #1c92d3, #55abda, #1c92d3);
        padding: 40px 16px;
        border-top: 1px solid #4da8da;
        border-bottom: 1px solid #1c92d3;
      }
      
      .purple-gradient {
        background: linear-gradient(to right, #640876, #9e0987, #640876);
        padding: 40px 16px;
      }
      
      .pink-gradient {
        background: linear-gradient(to right, #bd0e79, #ed1b9b, #bd0e79);
        padding: 40px 16px;
      }
      
      .footer {
        background:#0c0c0c;
        padding-top:#1a1b1c;
      }

      /* Section headers */
      h1 {
        color: #d5e4ed;
        font-size: 2.5rem;
        font-weight: 600;
        text-align: center;
        margin-bottom: 32px;
      }

      h2 {
        color: #e9f0f4;
        font-size: 1.8rem;
        font-weight: 400;
        margin-bottom: 16px;
        text-align: center;
      }
      
      h3 {
          font-weight:400;
      }
      
      h4 {
          font-weight:500;
          font-size:1.5rem;
          color:#c7d9e3;
      }
      
      .gradient-border-h4 {
          border-top: 1px solid;
          border-bottom: 1px solid;
          b / order-image: linear-gradient(to right, #1c92d3, #9b59b6) 1;
          border-image: linear-gradient(to right, rgba(93,179,242,0) 0%, rgb(255, 255, 255, 0.6) 20%, rgb(255, 255, 255, 0.6) 80%, rgba(93,179,242,0) 100%) 1;
          padding: 10px 20px;
          display: inline-block;
          color: white;
          background: linear-gradient(to right, rgba(93,179,245,0) 0%, rgba(153,201,242,1) 30%,  rgba(153,201,242,1) 60%, rgba(93,179,245,0) 100%);
          margin-top: -10px;
          f / ont-family: sans-serif;
          b / order-radius: 6px;
      }
      
      
      h5 {
          font-weight:400;
          font-size:1.3rem;
          color:#d5ebf7;
      }
 
      p {
        margin-bottom: 24px;
        font-size: 1rem;
        line-height: 1.5;
      }

      /* Category Block Options */
      .categorydescription {
          padding:0px 40px 25px 40px;
          text-align:center;
      }
      
      .categoryfooter {
          padding:0px 40px;
          text-align:left;
      }
      
      /* Overylay Menu */
     .overlay-menu.show a {
          opacity: 1;
          transform: translateY(0);
          text-decoration: none;
      }
      
     .overlay-menu-left.show a {
        opacity: 1;
        color: white;
        transform: translateY(0);
        text-decoration: none;
      }

      /* Card Grid */
      .card-grid {
        display: grid;
        gap: 24px;
        padding: 0 10px;
      }

      /* Cards */
      .card {
        background: #328fe1;
        background: radial-gradient(#8dc4f7, #328fe1);
        min-height: 200px;
        padding: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border:1px solid #2179c8;
      }
      
      .card h2 {
          margin-bottom:0px;
          t / ext-shadow: 1px 1px rgb(0, 0, 0, 0.4);
      }
      
      .card a:hover {
          background:#000000;
      }

      .service-card {
        background: transparent;
        min-height: 200px;
        p / adding: 24px;
        padding: 0px;
      }

      .service-card .content {
        text-align: center;
      }
      
      .text-center .text-light-blue {
          padding:0px 40px 25px 40px;
      }
      
      .text-center .text-light-gray {
          padding:0px 40px 25px 40px;
      }
      
      .text-center .text-light-purple {
          padding:0px 40px 25px 40px;
      }

      .text-light-blue {
        color: #afd1e1;
      }

      .text-light-purple {
        color: #cca9d4;
      }

      .text-light-gray {
        color: #a3bac5;
      }
      
      .text-light-pink {
        color:#f0b5e4;
      }

      /* Buttons */
      .btn {
        background: radial-gradient(#66adec, #54a2e7);
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 32px;
        cursor: pointer;
        border: none;
        color: #e0eaed;
        font-size: 1.5rem;
        font-weight: 300;
        text-decoration: none;
      }
      
      .btn-advertise {
          background:radial-gradient(#99c9f2, #5db3f5);
          border: 1px solid #76b7f1;
          width: 60%;
          margin: auto;
      }
      
      .btn-blue {
          background:radial-gradient(#99c9f2, #5db3f5);
          border: 1px solid #76b7f1;
      }

      .btn-purple {
        background:radial-gradient(#f251e2, #b00ea0);
        border: 1px solid #b00ea0;
      }
      
      .btn-videography {
        background:radial-gradient(#f251e2, #b00ea0);
        border: 1px solid #b00ea0;
        width: 60%;
        margin: auto;
      }
      
      .btn-pink {
        background:radial-gradient(#f4a4d2, #e05baf);
        border: 1px solid #ff40b9;
      }
      
      .btn-content {
        background:radial-gradient(#f4a4d2, #e05baf);
        border: 1px solid #ff40b9;
        width: 60%;
        margin: auto;
      }
      
      .btn-contact {
          background:radial-gradient(#99c9f2, #5db3f5);
          border: 1px solid #76b7f1;
          width: 60%;
          margin: auto;
          margin-top:0px;
      }
      
      .btn-watch {
          background: linear-gradient(to right, #640876, #9e0987, #630876);
          border: 1px solid #640876;
          width: 60%;
          margin: auto;
      }
      
      .advertisingbutton {
          margin:auto 0px;
      }

      /* Image styles */
      .service-img {
        width: 100%;
        height: auto;
        margin-bottom: 24px;
      }

      /* Aspect Ratio fixes for thumbnails (16:9) */
      .thumbnail-container {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio */
        overflow: hidden;
        margin-bottom: 24px;
      }

      .thumbnail-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        cursor: pointer;
      }
      
      .thumbnail-container-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  overflow: hidden;
  margin-bottom: 24px;
}

.thumbnail-container-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
      
      
      /* List styling */
      .service-list {
        text-align: left;
        padding-left: 50px;
        margin-bottom: 24px;
      }

      .service-list p {
        margin-bottom: 8px;
      }

      /* Fix for iOS background attachment issues */
      @supports (-webkit-touch-callout: none) {
        section {
          background-attachment: scroll !important;
        }
      }

      /* Media Queries */
      @media (min-width: 768px) {
        .card-grid {
          grid-template-columns: repeat(3, 1fr);
        }

        h1 {
          font-size: 3rem;
        }

        h2 {
          font-size: 2rem;
        }

        .hero-section img {
          max-width: 35%;
        }
      }
      
      @media only screen and (max-width: 1000px) {
        .card-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 24px;
          padding: 0 0px;
        }
        
        /* Card Grid */
      .card-grid {
        p / adding:10px;
      }

      /* Cards */
      .service-card {
       padding:10px 0px;
       padding-bottom:20px;
      }
      
      .card {
        background: #328fe1;
        background: radial-gradient(#8dc4f7, #328fe1);
        min-height: 200px;
        p / adding: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        border:1px solid #2179c8;
      }
      
      .dark-gradient-top .card {
       background: #328fe1;
       background: radial-gradient(#8dc4f7, #328fe1);
       min-height: min-content;
       display: flex;
       align-items: center;
       justify-content: center;
       text-decoration: none;
       border: 1px solid #2179c8;
       padding: 40px 0px;
      }
      
      /* Buttons */
    
    .btn-advertise {
          background:radial-gradient(#99c9f2, #5db3f5);
          border: 1px solid #76b7f1;
          width: inherit;
          margin: 0px 10px;
    }
    
    .btn-videography {
        background:radial-gradient(#f251e2, #b00ea0);
        border: 1px solid #b00ea0;
        width: inherit;
        margin: 0px 10px;
      }
      
    .btn-content {
        background:radial-gradient(#f4a4d2, #e05baf);
        border: 1px solid #ff40b9;
        width: inherit;
        margin: 0px 10px;
      }    
      
      .btn-contact {
          background:radial-gradient(#99c9f2, #5db3f5);
          border: 1px solid #76b7f1;
          width: inherit;
          margin: 0px 10px;
      }
      
      .btn-watch {
          background: linear-gradient(to right, #640876, #9e0987, #640876);
          border: 1px solid #640876;
          width: 80%;
          margin: auto;
          margin:0px 10px;
      }
      
      .btn-contact h1 {
          background:radial-gradient(#99c9f2, #5db3f5);
          border: 1px solid #76b7f1;
          width: inherit;
          margin: 0px 10px;
      }
      
      .btn-watch h1 {
          background: linear-gradient(to right, #640876, #9e0987, #640876);
          border: 1px solid #640876;
          width: 80%;
          margin: auto;
          margin:0px 10px;
      }
    
     /* Dropdown Menus */
    .overlay-menu {
      position: fixed;
      top: 71px;
      left: 0;
      width: 100%;
      height: 0;
      overflow: hidden;
      background-color: rgba(0, 0, 0, 0.95);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 90;
      transition: height 0.4s ease;
    }

    .overlay-menu.show {
      height: calc(100vh - 71px);
      background: linear-gradient(to right, #1c92d3, #55abda, #1c92d3);
    }
    
    .overlay-menu a,
    .overlay-menu-left h1 {
      color: white;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .overlay-menu.show a,
    .overlay-menu-left.show h1 {
      opacity: 1;
      transform: translateY(0);
      text-decoration:none;
    }
    
    .overlay-menu.show a {
    opacity: 1;
    transform: translateY(0);
    text-decoration: none;
}
    
    .overlay-menu.show .service-card {
        padding: 0px 0px;
        padding-bottom: 0px;
        min-height: min-content;
    
    }
    
    .overlay-menu.show .service-card p {
    margin-bottom: 5px;
    font-size: .7rem;
    line-height: 1;
    }
    
    .overlay-menu.show .service-card h2 {
    margin-bottom:0px;
    font-size: 1rem;
    }
    
    .overlay-menu.show .btn {
    background: radial-gradient(#66adec, #54a2e7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
    cursor: pointer;
    border: none;
    color: #e0eaed;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    padding: 20px 0px;
    margin: 0px 10px;
    }
    
    .overlay-menu.show .btn-contact {
    background: radial-gradient(#99c9f2, #5db3f5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    color: #e0eaed;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    padding: 15px 0px;
    margin: 0px 5px;
    height: min-content;
    width:80%;
    }
    
    .overlay-menu.show .btn-watch {
    background: radial-gradient(#f251e2, #b00ea0);
    border: 1px solid #b00ea0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    color: #e0eaed;
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    padding: 15px 0px;
    margin: 0px 5px;
    height: min-content;
    width:80%;
    }
   
}

.service-card {
    background: transparent;
    padding: 24px;
    }

    /* Header cleanup */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 71px;
      background-color: #000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      z-index: 100;
      border-bottom: 1px solid #111;
    }

    /* Left hamburger image */
    .hamburger1 {
      position: relative;
      width: 40px;
      height: 40px;
      cursor: pointer;
    }

    .hamburger1 img {
      width: 100%;
      height: 100%;
      margin-top: 0px;
      padding-top: 0px;
      transition: opacity 0.3s ease;
    }

    .hamburger1.animated img {
      opacity: 0;
    }

    .hamburger1::before,
    .hamburger1::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 40px;
      height: 4px;
      background-color: #363f41;
      transform: translate(-50%, -50%);
      transition: 0.3s ease;
      opacity: 0;
    }

    .hamburger1.animated::before {
      transform: translate(-50%, -50%) rotate(45deg);
      opacity: 1;
    }

    .hamburger1.animated::after {
      transform: translate(-50%, -50%) rotate(-45deg);
      opacity: 1;
    }

    /* Center logo */
    .logo-container img {
      height: 56px;
    }

    /* Right hamburger using same design as left */
    .hamburger {
      position: relative;
      width: 40px;
      height: 30px;
      cursor: pointer;
    }

    .hamburger div {
      position: absolute;
      left: 0px;
      width: 40px;
      height: 4px;
      background-color: #363f41;
      transition: 0.3s ease;
    }

    .hamburger div:nth-child(1) {
      top: 2px;
    }

    .hamburger div:nth-child(2) {
      top: 14px;
    }

    .hamburger div:nth-child(3) {
      top: 26px;
    }

    .hamburger.animated div:nth-child(1) {
      transform: rotate(45deg);
      top: 18px;
    }

    .hamburger.animated div:nth-child(2) {
      opacity: 0;
    }

    .hamburger.animated div:nth-child(3) {
      transform: rotate(-45deg);
      top: 18px;
    }

    /* Dropdown Menus */
    .overlay-menu,
    .overlay-menu-left {
      position: fixed;
      top: 71px;
      left: 0;
      width: 100%;
      height: 0;
      overflow: scroll;
      background-color: rgba(0, 0, 0, 0.95);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 90;
      transition: height 0.4s ease;
    }

    .overlay-menu.show,
    .overlay-menu-left.show {
      height: calc(100vh - 71px);
      background: linear-gradient(to right, #1c92d3, #55abda, #1c92d3);
    }

    .overlay-menu a,
    .overlay-menu-left h1 {
      color: white;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.4s ease, transform 0.4s ease;
      text-decoration:none;
    }

    .overlay-menu.show a,
    .overlay-menu-left.show h1 {
      opacity: 1;
      transform: translateY(0);
      text-decoration:none;
    }
  </style>
 </head>