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

@media only screen and ( max-width:450px ){
    body{
        overflow-x: hidden !important;
    }
    .header{
        width: 100%;
        position: fixed;
        background: rgba(0, 0, 0, 0.2);
        padding-top: 10px;
        padding-bottom: 5px;
    }
    .navbar{width: 100%;}
    .logo{width: 50px; height: 50px;}
    .menus .menu-bar ul li{font-size: 45px; margin-bottom: 10px; margin-top: 10px;}
    .banner{
        width: 100%;
        height: 80vh;
    }
    .banner h4{font-size: 50px;}
    .container{
        width: 100%;
    }
    .banner .banner-content h1{
        font-size: 20vw;
        letter-spacing: -2px;
        line-height: 14vw;
        padding: 15px 5px;
    }
   .nav-list {gap: 8px; margin-top:0px;display: none;}
   .concept-div p{margin-top: 4px;font-size: 24px;}

   .banneranim1{width: 150px; height: 313px; background-size: cover;top: 80%;right: -172px;}
   .banneranim2{width: 200px; height: 333px; background-size: cover;bottom: -7%;}
   .mediabanner.divon0 .banneranim3{left: -350px; bottom: 40px; animation: clapb 0.5s linear forwards;}
   
  @keyframes clapb {
    to {
      left: -100px;
    }
  }

  .service1{width: 100%;}
   .banneranim3 .clapper{height: 110px; width: 155px;}
   .banneranim3 .clapper > div{width: 160px; height: 15px;}
   .service2 .mediabanner{width: 350px; display: none!important;}
   .tech-bottom, .service-bg-3, .mediabanner{display: none!important;}
   .mediabanner.divon1 .banneranim4{width: 160px; height: 245px; background-size: cover; animation: animi4 0.7s linear forwards;}
   .mediabanner.divon1 .banneranim6{width: 160px; height: 245px; background-size: cover; animation: animi6 0.7s linear forwards;}
   @keyframes animi4{ 
    0% { bottom: -200px;}  
    100% {bottom: 0px;}
    }

   @keyframes animi6{ 
    0% { bottom: -200px;}  
    100% {bottom: -40px;}
    }

   #servicediv{background-size: cover !important;background-position: center 100px !important; padding-top: 50px; padding-bottom: 0px;}

    .nav-menu ul .list-media, .nav-menu ul .list-tech{padding: 5px 20px;}
    
    .outer_circle {
        width: 25px;
        height: 25px;
        margin-top: 10px;
    }
    /*  */
.banneranim4 {width: 150px;height: 305px;left: 27%;}
.banneranim5 {width: 150px;height: 305px;bottom: -440px;}
.banneranim6 {width: 150px;height: 305px;left: 4%;}
.banneranim7 {width: 150px;height: 305px;}
.brand6 {height: 63px;width: 139px;transform: translateY(-24px);}
.brand4 {height: 118px;width: 123px;transform: translateY(-83px);}
.brand5 {height: 63px;width: 139px;height: 115px; width: 126px; transform: translateY(-68px) translateX(45px);}
.brand7 {height: 122px;width: 158px;transform: translateY(-87px) translateX(10px);}



    /*  */

    
    
.service-box .service-content{width: 100%;}
.service-img .service-para{width: 100vw;padding: 0 12px;}

    .banner a {      
        font-size: 20px;
        text-align: center;    
        display: block;
    }

    .banner p {
        font-size: 20px;
        padding: 0 8px;
    }

    .banner-content{padding: 0px;}

    .banner h2{font-size: 80px; letter-spacing: -10px;padding: 0;}

    @keyframes ani{
        from{
            letter-spacing: 12px;
            filter: blur(5px);
            -webkit-filter: blur(5px);
            opacity: 0;
        }to{
            letter-spacing: 10px;
            filter: blur(0);
            -webkit-filter: blur(0);
            opacity: 1;
        }
    }
    .about-banner{height: 100vh;}
    .banner-content-bg-img{height: 100vh !important;}
    .banner h1 span{left:calc((100% - 152.55px)/2) ;top: -22px;}
    .media-img{flex-wrap: wrap;}
    
    /* .img-box{width: 100%;}
    .story-box{display: block;} */
    /* .story-box .img-box{width: 370px; height: 250px;} */
    /* .story-box .cube-content-box{width: 100%; height: 300px; padding-top: 0px;} */
    /* .cube-content{width: 100%;}
    .story-box .cube-content-box h4{font-size: 35px; line-height: 40px; padding-bottom: 10px;} */
    /* .service .service-keys .left{width: auto;}
    .service .service-keys h2{font-size: 35px;}
    .service .service-keys h3{font-size: 20px; font-weight: 300;}
    .service .service-keys .details-links{display: none;}
    .service-box{flex-direction: column; justify-content: flex-start;}
    .service-box .service-content{width: 100%;}
    .service-img{width:100%; padding: 10%; box-sizing: border-box;}
    .service-img .service-para{width: 100%; padding: 25px;}
    .service-img .service-para p{font-size: 18px; line-height: 25px;} */

    
    .aboutleftpart p{font-size: 18px;}
    .aboutrightpart{width: 380px; clear: both;}
    .aboutrightpart{padding: 10px 0;}
    .aboutleftpart h4, .projectsleftpart h4{font-size: 60px; line-height: 60px; width: auto;}
    .aboutrightpart ul li{float: none; margin: 0px auto!important; width: 300px; height: 300px;}
    .team-main .container{width: 100%;}
    .subject{width: 100%; position: static; transform: none;}
    
    
    
    
   


    /* over service */
    .sticky-circle {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        width: 90%;
        margin: 0 auto;
        height: 85vh;
        padding-top: 6em;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
       /* service start */
       .sticky-circle_wrap {
        height: 138vh;
    }

    .img-element{width: 100%; transform: translate(0%);}

    .service-box .service-content h1 {font-size: 14vw; line-height: 9vw; padding-right: 0px; padding-left: 40px;}
    .service-box .service-content h1 span{font-size: 6vw; letter-spacing: 5px; padding-left: 0px;}
    .service-box .service-content h1 small {font-size: 26px; left: 10px; top: 39px;  }
     .work-at-company h2 {
        -webkit-text-stroke: 1px rgb(43, 43, 43);
        color: transparent;
        font-size: 20vw;
        font-weight: 800;        
    }

    .work-at-company h3{line-height: 30px;}

    .work-at-company h3 span{font-size: 80px; line-height: 75px;}

    .grid_text-title {
        position: relative;
        font-size: 48vw;
        line-height: 0.8;
        font-weight: 700;
        letter-spacing: -0.04em;
        display: none;
    }
    .grid_text-wrap {
       
        height: 100vh;
        margin-top: -100vh;
        padding-bottom: 0.05em;       
       
    }
    .grid_wrapper.is--alt {
        padding-bottom: 3.7em;
    }
    .grid_img {
        position: absolute;
        left: 0%;
        top: 0%;
        right: 0%;
        bottom: 0%;
        width: 100%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .grid_item:nth-child(6n+1){width: 45%; margin-right: 10%;}
    .grid_item:nth-child(6n+2){width: 45%; margin-right: 0%;}
    .grid_item:nth-child(6n+3){width: 45%; margin-top: 0%; margin-right: 6%;}
    .grid_item:nth-child(6n+4){display: block; width: 45%; }
    .mobiletext{position: absolute; font-size: 35px; font-weight: 700; letter-spacing: -2px; top: -30px;}
    .mobiletext span{display: block; font-weight: 500; letter-spacing: 0px; width: 180px; font-size: 18px;}
    .grid_item:nth-child(6n+4) .grid_element{padding-top: 25%;}
    .grid_element h3{margin-top: -20px; font-size: 25px;}
    
    .teamhead h4{font-size: 20vw;}
    .grid_item.teamcol:nth-child(6n+3) { margin-top:10%;}
    /* categories */
    .categories_link {
        position: relative;
        margin: 0.4em;
        padding: 0.4em 1.0em;
        border-radius: 100vw;
    }
    .categories_link-text {
        position: relative;
        z-index: 2;
        font-size: 0.9em;
        line-height: 0.8;
        margin: 10px 0;
    }
    .categori {
        width: 100%;
        padding: 30px 0;
        background-color: #F0AA40;
    }
    /* story */

    .story .story-contents .concept {
        font-weight: 900;
        font-size: 15vw;
        color: #0000004d;
        width: 100%;
        margin: 0 auto;
        letter-spacing: -5px;
        position: absolute;
        top:308px;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .story {
        text-align: center;
        justify-content: center;
        padding-bottom: 55px;
        padding-top: 58px;
        width: 100%;
    }

   .prjectswork-h li{width: 350px; height: 233px;}

   .prjectswork-h li img{width: 100%; margin-bottom: -4px;}


    
    /*  */
    .sticky-circle {
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        overflow: hidden;
        width: 90%;
        margin: 0 auto;
        height: 69vh;
        padding-top: 6em;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .sticky-circle .sticky-circle_element{
        width: 15em;
        height: 15em;
    }
    .story .story-contents h5{font-size: 32px; margin-top: 10px;}
    .story .concept{font-size: 50px; bottom: -65px;}

    .our-short-describtion .describtion h4{font-size: 24px; line-height:28px;width: 90%;}
    .describtion > div{flex-direction: column; margin: 0 5%;}
    .describe-part{width: 100%; height: auto;}
    .describe-part p{text-align: left;font-size: 16px; line-height: auto;}
    .describe-part h5{font-size: 100px;}
}


/* animation home section */









/* ABOUT-PAGE-RESPONSIVE-CSS */

@media only screen and (max-width:450px) {
 body{overflow-x: hidden;}
 .innerbanner{height: 100vh;}
.our-details{
    flex-wrap: wrap;
}
    .detail-content-left {
        width: 100%;
    }
    .detail-content-right{
        width: 100%;
    }
    .detail-content-left h3 strong span{
        font-size: 49px;
    }
    .detail-content-left h3 strong{
        font-size: 49px;
    }
    .detail-content-left h3{
        font-size: 25px;
    }
    .detail-content-left .detail-para-second{
        font-size: 20px;
    }

    .detail-content-right .details-box {
        width: 40vw;
        height: 40vw;
    
   }
.detail-content-right{
    padding-left: 30.5vw;
    height: 390px;
}
.detail-content-right .box-4 {
    transform: translate(0px, -247px);
}
.detail-content-right .box-3 {
    transform: translate(107px, -175px);
}
.detail-content-right .box-2 {
    transform: translate(-109px, -5px);
}
.detail-content-right .box-1 {
    transform: translate(0px, 50px);
}
.detail-box-content h3{
    font-size: 18px;
    padding-bottom: 0px;
}
.detail-box-content p {
    font-size: 13px;
    padding: 0px 18px;
    line-height: 12px;
}

.our-short-describtion .discribe h4 {
    font-size: 27px;
    line-height: 36px;
}
.our-short-describtion {
    padding: 60px 0;
}

/* about banner below */
.cube-sory{overflow: hidden;}
.story-box .img-box {width: 100vw;background-size: cover;}
.story-box{display: flex;flex-direction: column;margin-top: 0px;}
.story-first{margin-top: 0px;}
.our-story-container{display: flex;overflow: hidden; height: 100vh;}
.about-cube-heading h2{font-size: 20vw; letter-spacing: -5px;padding: 10px 0;position: relative;z-index: 100;}
.story-box .cube-content-box {width: 100vw;padding: 21px 5px;margin-bottom: 0px;transform: translateX(0%);}
.story-box .cube-content-box h4 {font-size: 9.1vw;line-height: 13vw;padding: 0 0;}
.story-box .cube-content-box p{font-size: 13px;}
.video-box .cube-bg-th{width: 100vw;}
.video-box{position: relative;}
.banner-content{padding-top: 66vw !important;}
.about-cube-heading p{width: 100%;font-size: 4.5vw;padding: 0 1vw 10px 1vw;}
.about-banner-content{top: 40%;}
.about-banner-content .about-cube span{line-height: 200px;left: 8px;}
/* about page */
.about-our-company{width: 100%;overflow: hidden;}
.aboutleftpart, .aboutrightpart ul{width: 100vw; margin: 0 0px;padding: 0 10px;box-sizing: border-box;}
.team-section-heading{margin-bottom: 120px !important;}

.about-cube-heading{margin-top: 0px;box-sizing: border-box;}
.leaders-list {display: flex;flex-wrap: wrap;  width: 100%;justify-content: center;margin-top: 0px;}
.cube-content {width: 100%;padding-left: 15px;}
.leaders-list li{margin-top: 15px;}
.playButton {left: 37%;}
/* .is--projects li{transform: translateX(0px)}  */


/* leader part */
.team-lead{margin-left: 0px;}
.subject h3{font-size: 40px; text-align: center;}
.team-lead .leader-img {width:180px; height: 243px; margin-left: 6px;}
.team-lead .leader-name{height: auto; width: 5vw; margin-left: 10px;}
.our-squad, ul.asstteam{display: block;padding: 10px 0;}
.leader-employee{width: 100%; display: flex;flex-wrap: nowrap;gap: 10px;padding: 10px 0;margin-top: 20px;margin-left: 10px;}
.leader-employee > div{width: 175px;height: 208px;}
.short-disc-h{width: 100%;text-align: left;padding-bottom: 0px;}
.short-disc-h p{position: relative;padding-top: 30px;}
.short-disc-h p:before {content: "";display: block;width: 40px; height: 2px;background-color: #131417;margin-bottom: 15px;position: absolute;left: 0;top: 18px;}
/* associated */
.centerhead {width: 100%;}
.our-squad, ul.asstteam {padding: 10px 0; display: flex;flex-wrap: wrap;}
ul.asstteam li .teamimage img{width: 100%;height: 100%;object-fit: cover;object-position: center;}
ul.asstteam li{width: 47vw;margin-left: 5px;}
/* investor */
.centerhead p {line-height: 23px;}
.investors{display: flex;flex-wrap: wrap;}
.investors > div {width: 44vw;}


/* story */
.story .story-contents h2 {
    font-size: 50px;
    padding-top: 15px;
}
.story .story-contents a{
    padding: 16px 20px;
}
.story .story-contents p {
    padding: 10px 0;
    font-size: 18px;
}

.feedback ul{padding: 0px;}
.feedback ul li{padding: 20px; width: max-content; margin-top: -15px;}
.feedback li:before{font-size: 200px; left: -10px; top: -30px;}
.feedback ul li p{font-size: 18px;}
.feedback ul li h5{font-size: 20px;}
.feedback:after{display: none;}


/* media and tech cube page */
.tech-media-banner{height: 72vh;}
.mediatech-banner-right{width: 45%;height: 26vh;right: 2%;margin-right: 20px;}
.mediatech-banner-left{width: 45%;height: 26vh;left: 2%;bottom: 22px;margin-left: 12px;}
.tech-media-banner-heading h1 span {font-size: 70px;}
.tech-media-banner-heading {position: fixed;z-index: 2;top: 22%; left: 0%; transform: translate(0%, 0%); }
.tech-media-banner-heading h1 {font-size: 16vw;line-height: 12vw;font-weight: 800;letter-spacing: -5px;}
.tech-media-banner-heading p {font-size: 17px;padding: 10px 0;}
.tech-media-banner-image {width: 100%;height: 313px;}

/* media and tech banner animation */
.mediatech-banner-left{animation: fade-left linear forwards;animation-timeline: view(150px 450px);}
.mediatech-banner-right{animation: fade-right linear forwards;animation-timeline: view(150px 450px);}
@keyframes fade-left {
    to{opacity: 0;transform: translate(-90px, -50px);}
}
@keyframes fade-right {
    to{opacity: 0;transform: translateX(90px);}
}


/*  */
.title {width: 100%;}
.title h2 {font-size: 65px;font-weight: 600;color: #dd9e16; line-height: 58px;}
.title span{font-size: 27px;}
.title p{padding: 2vw 2vw;}
.media-tech-vertical {transform: translateY(0px);}
.media-tech-content .box-category-name h4{font-size: 16vw;line-height: 98px;}
.content-box {display: flex;flex-wrap: wrap;padding: 0px 0px 0 0px;text-align: center;}
.box-category-name {margin-top: 0px;}
.box-category-name p {padding: 10px 8px 20px 8px; font-size: 16px;}
.main-img{width: 90%;margin: 0 auto;}
.main-img img{width: 100%;}



.web-series-content .box-category-name h4 {
        font-size: 16vw;
        letter-spacing: -3px;
        line-height: 68px;
}
.categori-link{margin-bottom: 10px;}
.web-series-content .box-category-name h6 {
    font-size: 28px;
}
.web-series-content .box-category-name p {
    padding: 10px 8px 20px 8px;
    font-size: 16px;
}

.web-box-category-image {
    display: flex;
   flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}
.web-main-img {
    width: 85vw;
    height: 56vw;
}
.web-main-img-second {
    width: 85vw;
    height: 56vw;
    position: relative;
    z-index: 5;
}
.web-series-content {
    padding: 50px 0 65px 0;
    margin-bottom: 30px;
}
.web-main-img-second img {
    margin-top: 20px;
}

.megastructure {
    margin-top: -5px; 
}
.megastructure-content-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0px 0px 0 0px;
    text-align: center;
}
.megastructure-box-category {
    margin-top: 0px;
    width: 100%;
}
.megastructure .box-category-name h4 {
    font-size: 14vw;
    line-height: 68px;
    letter-spacing: -2px;
}
.megastructure-box-category h6 {
    font-size: 28px;
}
.megastructure-box-category p {
    padding: 10px 8px 20px 8px;
    font-size: 16px;
}
.megastructure-main-img {
    width: 90%;
    margin: 0 auto;
}
.megastructure-main-img img {
    width: 100%;
    object-fit: cover;
    object-position: center;
}
.megastructure-layer-img {
    position: absolute;
    left: -100px;
    top: -133px;
   }

.concept-cube-production {
        height: 50vh;
        padding-top: 50px;
    
}
.concept-cube-production .company-heading h3 {
    font-size: 20vw;
    transform: translateY(2px);
}

.ours-critive {
        width: 380px;
        height: 276px;
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        left: 7%;
    
}
.ours-critive img{
    width: 100%;
}
.middle-img {
    position: absolute;
    top: 206px;
    left: 50.0%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 305px;
    height: 272px;
    border: solid 15px #0d0c0f;
}

.concept-cube-production .company-heading h5 span {
    transform: translateY(-15px);
   font-size: 16vw;
}
.bg-imges {
    height: 500px;
}
.concept-cube-production .company-heading h5 {
    color: #ffffff8c;
    font-size: 24px;
    text-align: center;
    padding-top: 0;
    letter-spacing: 5px;
    position: relative;
    margin-top: -35px;
}


/* movie production page */
.movie-production-left-img {position: absolute; left: 0%;width: 166px; top: 125px;}
.movie-production-left-img img{animation:fade-out-in linear forwards;animation-timeline: view(100px 800px);width: 100%;height: 100%;}
.movie-production-right-img {position: absolute; right: 0%;width: 126px;height: 126px; top: 60vw;right: 20px;}
.movie-production-right-img img{animation:fade-out linear forwards;animation-timeline: view(150px 800px);width: 100%;height: 100%;object-fit: cover;}
@keyframes fade-out {to{opacity: 0;}}
@keyframes fade-out-in {to{opacity: 0;}}

.tech-media-banner-heading2 h1 span {font-size: 70px;}
.tech-media-banner-heading2 {position: fixed;z-index: 2;top: 16%; left: 0%; transform: translate(0%, 0%); }
.tech-media-banner-heading2 h1 {font-size: 16vw;line-height: 12vw;font-weight: 800;letter-spacing: -5px;}
.tech-media-banner-heading2 p {font-size: 17px;padding: 10px 0;}


/* movie production unleash */
.unleash-vission {padding: 50px 0 0;margin-bottom: -110px;}
.vission-container { width: 100%; padding: 0 0px;display: block;}
.vission-camera {width: 85%;margin: 0 auto;transform: translateY(-82px);position: relative;z-index: 13;}
.vission-content-right {width: 100%; transform: translateY(-110px);padding: 10px 10px;}
.vission-top p{font-size: 5.9vw;}
.unleash-heading h3{font-size: 11vw;}
.unleash-heading p {width: 100%;}

/* movie production service */
.service{width: 100%;}
.header_text-move{width: 100%;}
.movie-service-box .service-content h3{font-size: 6.2vw;padding-top: 45px;line-height: 37px;}
.movie-service-box .service-content h3 br{display: inline-block;}
.movie-service-box{display: block;height: auto;}
.ser-text-h h5{padding-top: 10px;}
/* .service-box{display: flex;flex-direction: column;height: auto;} */
.service-img { opacity: 1;transition: all ease-in-out .5s;width: 100%;padding: 8px 5px 29px 5px;display:block;justify-content: center;align-items: start;}
.service-img p{font-size: 4.1vw;font-weight: 400;opacity: 0.9;}
.service-img .service-img-item {height: 180px;width: 160px;float: left;}
.header_text-move span {font-weight: 300;padding-left: 5px;padding-right: 9px;font-size: 26px;}
.ser-text-h p{padding: 0 5px;font-size: 19px;}
/* movie page end  */


/* contact us page */
.contact-banner{height: 50vh;}
.contact-banner-heading h1 span{font-size: 66px;}
.form-title{width: 100%;}
.contact-left{width: 100%;}
.contactus-section{padding: 70px 0 0;margin-bottom: 0px;background-position: center right;}
.form-title h4{font-size:40px ;padding: 0 15px;}
.form-title p{padding: 0 15px;}
.contact-left .form-container{padding: 15px;width: 100%;background-color: rgba(0, 0, 0, 0.664);}
.contact-right {width: 100%;height: auto;background-color: #fff;float: right;padding: 35px;text-align: center;margin-top: 0px;margin-right: 0px;}
.halfform {display: flex;flex-direction:column;}
.halfform .email-one {width: 100%;}
.halfform .phone-one {width: 100%;}
.halfform > div{width: 100%;}

.office-branch{width: 100%;}
.our-branch{width: 100%;text-align: center;}
.office-era{width: 100%;}
.office-cal{display: flex;flex-wrap: wrap;}
.our-branch h2 {font-size: 15vw;}
.office-location {padding-top: 0px;padding-left: 0px;}
.office-cal{padding: 40px 0 0px 15px;}
.office-location h4 {font-size: 11vw;}
.office-location p {width: 368px;}
.img-memory-box2 {margin-top: -15px; width: 40vw; height: 85vw;}
.img-right .img-memory-box3 {width: 46vw;height: 54vw;margin-top: 45px;}
.color-box {width: 70vw; height: 70vw;left: 17px;top: 111px;}
.img-right .img-memory-box4 {width: 40vw; height: 48vw;margin-bottom: 10px;}
.color-box2 {width: 70vw; height: 70vw; right: 125px;bottom: 53px;z-index: -1;}
.memory{gap: 15px;}
.img-right .img-memory-box4 img {margin-top: 13px;}



/* FOOTER RESPONSIVE */
.footer .footer-content-box .footer-left {padding: 0 10px;text-align: left;}
.footer .footer-content-box .footer-left p{font-size: 18px; color: #7f7f7f;}
.footer .footer-content-box .media {padding-right: 19px;}


.prjectswork-h li{height: 100vh;}
.prjectswork-h li img{height: 50%; object-fit: cover;}
.prjectswork-h li .content{visibility: visible!important; opacity: 1; top: 50%; height: 50%;}
}