.tech-media-banner, .contact-banner{
    background-image: url(../images/tech-banner.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    width: 100%;
}

.contact-banner{background-image: url(../images/about-banner-new-1.png); height: 80vh;}

.tech-media-banner-heading {
    position: fixed;
    z-index: 2;
    top: 160px;
    top: 30%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.tech-media-banner-heading h1{
    opacity: 1;
    font-size: 150px;
    line-height: 156px;
    font-weight: 900;
    letter-spacing: -12px;
    color: #fff;
    padding: 0;
    animation: fade-in linear forwards;
    animation-timeline: view(100px 650px);
}

@keyframes fade-in {
    to{opacity: 0;}
}

.tech-media-banner-heading h1 span{
    font-size: 175px;
}
.tech-media-banner-heading p{
    opacity: 1;
    font-size: 24px;
    font-weight: 400;
    color: #ffffffb4;
    letter-spacing: 4px;
    animation: fade-in linear forwards;
    animation-timeline: view(100px 550px);
    text-transform: uppercase;
}
.mediatech-banner-left{
width: 465px;
height: 586px;
background: url(../images/mediatech-banner-left.webp) no-repeat;
position: absolute;
bottom:-40px;
left: 20%;
right: auto;
z-index: 3;
opacity: 1;
animation: fade-left linear forwards;
animation-timeline: view(150px 650px);
}

.mediatech-banner-right{
    width: 465px;
    height: 586px;
    background: url(../images/mediatech-banner-right.webp) no-repeat;
    position: absolute;
    bottom:75px;
    left: auto;
    right: 15%;
    z-index: 1;
    opacity: 1;
    animation: fade-right linear forwards;
    animation-timeline: view(150px 650px);
    }

    @keyframes fade-left {
        to{opacity: 0;transform: translate(-350px, -120px);}
    }
    @keyframes fade-right {
        to{opacity: 0;transform: translateX(350px);}
    }

.media-banner-image{
    width: 65%;
    height: 650px;
    margin: 0 auto;
    background-image: url(../images/tech-banner-img-2.png);
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom:0;
    left: 0;
    right: 0;
    z-index: 5;
    }

.media-tech-vertical{
    padding: 50px 0px;
    background-color: #fff;
    position: relative;
    width: 100%;
    z-index: 10;
    transform: translateY(20px);
}

.title{
    text-align: center;
    width: 40vw;
    margin: 0 auto;
}
.title h2{font-size: 75px; font-weight: 800;color: #dd9e16;line-height: 65px;padding-bottom: 20px;}

.title span{display: block; font-size: 30px; font-weight: 500; text-align: center;color: rgba(0, 0, 0, 0.836);}

.media-tech-content{
    padding: 50px 0;
    margin-top: 25px;
    background-color: #dd9e16;
    border-radius: 25px;
    overflow: hidden;
    width: 100%;
    min-height: 550px;
    display: flex;
}
.categori-link{padding: 9px 18px;background-color: white;margin-top: 15px;display: inline-block;}
.content-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 40px 0 100px;
}
/* .box-category-name{margin-top: 75px;} */
.box-category-name h4{
    font-size: 120px;
    font-weight: 600;
    line-height: 115px;
}
.box-category-name h6{
    font-size: 28px;
    font-weight: 400;
}
.box-category-name p{
    padding:15px 45px 0 0;
    font-size: 20px;
    color: #000000d0;
    max-width: 600px;
}
.main-img{
    position: relative;
    z-index: 5;
}
.layer-img{
    position: absolute;
    left: -100px;
    bottom: -200px;
    z-index:-2;
    opacity: 0.15;
}

.web-series-content{
    background-color: #353535;   
}


.web-series-content .box-category-name{
    color: #fff;
}
.web-series-content .box-category-name h4{
    color: #dd9e16;
    line-height: 100px;
}

.web-series-content p{color: #fff;}

.web-box-category-image{
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}
.web-main-img{
    width: 19vw;
    height: 16vw;
}
.web-main-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.web-main-img-second{
    width: 19vw;
    height: 16vw;
    position: relative;
    z-index: 5;
}
.web-main-img-second img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*  */
.megastructure{ background-color: #d1d1d1;}

.megastructure .box-category-name h4{font-size: 70px; line-height: 75px;}

.megastructure-main-img{
    width: 500px;
    height: 400px;
    position: relative;
    z-index: 5;
}
.megastructure-main-img img{
    width: 100%;
    height: 100%;
}
.megastructure-layer-img{
    position: absolute;
    left: -100px;
    top: -220px;
    z-index:-2;
    opacity: 0.40;
}


.story{
    z-index: 5;
    padding-top: 80px;
}

/* concept-cube-production */
.concept-cube-production{
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 5;
    color: #fff;
    text-align: center;
    background-color: rgb(0, 0, 0);
   
}
.bg-imges{
    background: url(../images/media-projects-bg.webp) no-repeat #000 top center;
    background-size: cover;
    height: 100vh;
    width: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.concept-cube-production .company-heading h5{
      color: #ffffff8c;
      font-size: 30px;
      text-align: center;
      padding-top: 45px;
      letter-spacing: 5px;
      position: relative;     
}

.concept-cube-production .company-heading h5 span{
display: block;
-webkit-text-stroke: 1px rgba(255, 255, 255, 0.76);
color: transparent;
font-size: 142px;
font-weight: 800;
text-align: center;
transform: translateY(-30px);
opacity: 1;
animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {

    from {text-shadow: 0 0 5px #fff, 0 0 30px #fff, 0 0 10px #0092e6, 0 0 5px #0036e6;}
    
    to {text-shadow: 0 0 20px #fff, 0 0 20px #4dafff, 0 0 20px #246edd, 0 0 10px #4de4ff;}
  }


  

/*******************************Contact us**********************************/

.contactus-section{position: relative; z-index: 3; padding: 70px 0; background: url(../images/contact-bg.webp) no-repeat center center #292929; height: auto; margin-bottom: 45px;}
.contact-form{background-color: #fff;padding-top: 25px;}

.form-title{border-bottom: solid 1px #3f3f3f; padding-bottom: 20px; margin-bottom: 20px;}
.form-title h4{font-family: 'Prata'; font-size: 90px; font-weight: 200; letter-spacing: -2px; color: #fff; padding: 0px 50px;}
.form-title p{color: #fff; font-size: 20px; padding: 0px 50px;}

.contact-left{width: 50%; float: left; margin-bottom: 20px;}

.contact-left .form-container{padding-left: 50px;}

.form-container label{color: #8a8a8a; font-size: 14px; text-transform: uppercase; letter-spacing: 2px;}

.form-container input[type=text], .form-container select, .form-container textarea {
    width: 100%;
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 20px;
    resize: vertical;
    background: none;
  }
  
  .form-container input[type=text]:focus, .form-container textarea:focus {border: none!important; border-bottom: solid 1px #fff;}
 .form-container .button {
    background-color: #3dbfeb;
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .halfform{display: flex; gap: 20px;}
  .halfform > div {width: 50%;}

  .contact-right{width: 400px; height: auto; background-color: #fff; float: right; margin-top: -130px; margin-right: 70px; padding: 35px; text-align: center;}
  .contact-right h3{font-size: 30px; font-weight: 700; color: #000; font-family: 'Poppins'; margin-bottom: 10px;}
  .contact-right h3:after{content: ''; display: block; width: 80px; height: 1px; margin: 20px auto; background-color: #4b4b4b; }

  .contact-right p, a.phone{display: block; font-size: 18px; font-weight: 300; padding: 5px 0; color: #272727; line-height: 25px; }
  .contact-right p a{display: block; padding-top: 15px; color: #3dbfeb; text-decoration: underline; font-size: 15px; cursor: pointer;}
  .contact-right h6{font-size: 12px; color: #747474; margin-top: 20px; padding-bottom: 0px; margin-bottom: 0px; text-transform: uppercase; font-weight: 400; letter-spacing: 2px;}
  .contact-right .media{padding: 15px 0; display: flex; gap: 15px; justify-content: center;}
  .contact-right .media a{color: #3dbfeb;}
  .contact-right .media a:hover{color: #2b2b2b;}

  .socialfeed{background-color: #fff; padding-top: 10px; width: 100%;}


  .office-branch{width: 100%;background-color: #000;height: auto;position: relative;color: #fff;}
  .our-branch{text-align: center;}
  .our-branch h2{font-size: 150px;color: #58585824;}
  .office-location .short-line{width: 50px;height: 2px;background-color:  #1CB6C0;margin-bottom: 15px;}
  .office-location h4{font-size: 50px;font-weight: 700;white-space: nowrap;}
  .office-location p strong{display: block;}
  .office-location p{width: 500px; color: #ffffff94; margin-top: 10px;}
  .office-cal{display: flex;justify-content: space-between;transform: translateY(0px);border: 1px solid rgba(150, 150, 150, 0.137);padding: 30px 50px 50px 50px;margin-bottom: 20px;}
  .office-location{padding-top: 215px;padding-left: 30px;width: 50%;}
  .office-memory{display: flex;position: relative;width: 50%;}

  .memory{display: flex;gap: 20px;}
  .color-box{width: 300px;height: 350px;background-color: rgba(94, 94, 94, 0.322);position: absolute;left: 200px;top: 15px;z-index: -1;}
  .color-box2{width: 300px;height: 350px;background-color:#26677D;position: absolute;right: 20px;bottom: 15px;z-index: -1;}
  .img-memory-box2{padding-top: 100px;width: 350px;height: 600px;}
  .img-memory-box2 img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
 .img-right .img-memory-box3{width: 350px;height: 450px;margin-top: 45px;}
  .img-right .img-memory-box3 img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
 .img-right .img-memory-box4{width: 300px;height: 250px;}
  .img-right .img-memory-box4 img{width: 100%;height: 100%;margin-top: 20px;object-fit: cover;object-position: center;}
  .memory2{padding-right: 80px;}
  .img-memory-box{overflow: hidden;cursor: pointer;}
  .img-memory-box img{transition: all ease-in-out .7s;}
  .img-memory-box:hover img{transform: scale(1.1);} 

  .office-memory2{padding-left: 200px;}
  /* .memori3{position: absolute;bottom: 0;} */