@charset "utf-8";

/* CSS Document */



html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,rticle, aside, container, details, embed,figure, figcaption, footer, header, hgroup, nav, output, ruby, section, summary,time, mark, audio,video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}

ol, ul {list-style: none;}

blockquote, q {quotes: none;}

blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}

table {border-collapse: collapse;border-spacing: 0;}

::selection {background: #a2a2a2;color: #fff; /* Safari - webkit */}

::-moz-selection {background: #a2a2a2;color: #fff; /* Firef x */}

.clear_fix{clear:both;}

a{text-decoration:none; outline:none;}

img{ border:none;}

body{font-family:Poppins-Regular;}

div{ display:flow-root;}

h1,h2,h3,h4,h5,h6{font-family: 'montserratbold'; font-weight:normal;} 

.container{ width:1200px; margin:0 auto; position:relative;}



/*header section*/

header{ position:absolute; left:0; top:0; width:100%; z-index:10;}

#top-box{ background:#172b3a; font-size:12.4px; color:#FFFFFF;}

#intro{ background: url(../images/intro.png) no-repeat left 3px; padding:0 0 0 28px; margin:7px 0 0 0; float:left;}

#logo{ width:237px; height:99px; float:left; margin:9px 136px;}

#logo img, .service-img img, .webproces-img img, .pic-image img, .digital-printimg img, .blog-img img, .blog-user img{ width:100%; height:100%;}

.topicon-box{line-height:36px; float:right; margin:2px 39px 0 0;}

.topicon-box img{ float:left; margin:7px 10px 0 0;}

#topsocial{ float:right; margin:8px 0 0 0;}

#topsocial a{ float:left; padding:0 8px;}

#mobile_menu, #mobile_drop{display:none;}

.callus{ float:right; font-size:13px; background:url(../images/call.png) no-repeat left center; padding:0 0 0 54px; 

margin:35px 40px 0 0; line-height:21px;}

.callus a{ color:#000;}

.callus h2{ text-transform:uppercase; color:#172b3a;}

#mailus{ background:url(../images/mail.png) no-repeat left center;}

/*****LEVEL ONE*****/

.mtoggle{cursor:pointer;float:right; margin:-78px 0 0 0;}

/*****LEVEL ONE*****/

.dropdown { position:relative;   box-shadow: -5px 3px 30px 10px rgba(216, 195, 174, 0.6); z-index:9000; margin:59px 0; background:#FFF; border-radius:130px; clear:both; padding:0 65px;}

.dropdown ul {list-style:none;position:relative;margin:0;padding:0;}

.dropdown ul li { float:left;position: relative;}

.dropdown ul li a {color: #000;font-weight:bold;  font-size:13px;position: relative; padding:29px 15px;

transition: background-color 0.2s ease-in-out; display:block; letter-spacing:1px;}

.dropdown ul li a:hover {color: #ed3a2f;}

.dropdown ul ul{display:none;position:absolute;top:100%;left: 0;width: 193px; box-sizing:border-box;margin-top:0;

background-color: #e74d0d;font-size: 0;}

.dropdown ul ul li{font-size:12px;float: none;display:block;}

.dropdown ul ul a{display: block;padding:8px 20px; line-height:17px; box-sizing:border-box;width: 100%; color:#FFF; font-weight:normal; font-size:12px; letter-spacing:0;}

.dropdown ul ul a:hover{ background:#172b3a; color:#FFF;}

.dropdown  ul li:hover > ul{display:block;}

/*header section end*/



/*banner section*/

#banner{ background:url(../images/bannerbg.jpg) no-repeat top; background-size:cover;margin:19px 0 0 0; padding:244px 0 20px 0;}

.rslides {position:relative;list-style:none;overflow:hidden;width:100%;padding:0;margin:0 0 0px 0; z-index:0;}

.rslides li {-webkit-backface-visibility:hidden;position:absolute;display:none;width:100%;left:0;top:0;}

.rslides img {display:block;border:0; float:right;}

.bannercaption{color:#FFFFFF; position:absolute; left:60px; width:520px; top:60px; z-index:100;}

.bannercaption span{ display:block; text-decoration:underline; color:#e74d0d; font-size:16px; text-transform:uppercase; font-weight:bold;}

.bannercaption h2{ text-transform:uppercase; font-size:54px; color:#172b3a; line-height:59px; margin:48px 0 0 0;}

/* --- MOBILE OPTIMIZATION (for screens 767px and below) --- */
@media (max-width: 767px) {

    /* 1. Adjust the main banner container */
    #banner {
        /* Greatly reduce the top padding to stop content being pushed too far down */
        padding: 50px 0 10px 0;
        /* Center the background image */
        background-position: center top !important; 
    }

    /* 2. Fix the Image (the .rslides img) */
    .rslides img {
        /* Make the image fluid (scale down) */
        max-width: 90%;
        height: auto;
        /* Remove the float and center the image */
        float: none;
        margin: 20px auto; 
    }

    /* 3. Fix the Caption (.bannercaption) */
    .bannercaption {
        /* Remove fixed positioning so it flows naturally */
        position: static; 
        /* Use a fluid width to fill the screen */
        width: 90%;
        /* Center the block */
        margin: 0 auto; 
        left: auto; /* Remove fixed left position */
        top: auto; /* Remove fixed top position */
        /* Center all text inside the caption */
        text-align: center;
    }

    /* 4. Adjust Caption Text Size */
    .bannercaption h2 {
        /* Reduce font size for readability on small screens */
        font-size: 32px;
        line-height: 36px;
        margin: 15px 0 0 0; /* Reduce margin */
    }

    .bannercaption span {
        /* Reduce margin below the span text */
        margin-bottom: 5px;
    }
}
/*banner section end*/



/*content part*/

#welcome-box{font-size:17px; text-align:center; line-height:23px; margin:98px 0 0 0;  position:relative;}

#welcome-box h2{ font-size:26px; color:#e74d0d; margin:0 0 45px 0;}

#welcome-box p{ width:910px; margin:38px auto; line-height:31px;}

#welcome-box:after{ position:absolute; left:0; top:-10px; background:url(../images/line1.png) no-repeat; width:353px; height:383px; content:"";}

#welcome-box:before{ position:absolute; right:0; top:-10px; background:url(../images/line2.png) no-repeat; width:353px; height:383px; content:"";}

.readmore {display:block;vertical-align: middle;-webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);position: relative;overflow: hidden; margin:0 auto; width:171px;  padding:11px 26px; box-sizing:border-box; font-size:13px;background: #FFFFFF;-webkit-transition-duration: 0.3s; outline:none;transition-duration: 0.3s; border-radius:100px;color: #FFF; border:#e74d0d solid thin; text-align:center;}  

.readmore:before {content: "";position: absolute;z-index: -1;top: 0;left: 0;right: 0;bottom: 0;background: #e74d0d;border-radius: 100%;-webkit-transform: scale(2);transform: scale(2);-webkit-transition-property: transform;transition-property: transform;

-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}

.readmore:hover{color: #e74d0d; border:#e74d0d solid thin;}

.readmore:hover:before{-webkit-transform: scale(0);transform: scale(0);}

#service-box{margin:94px 0 0 0; text-align:center;}

#service-box span{ font-size:20px; color:#e74d0d; text-decoration:underline;}

#service-box h2{ font-size:62px; text-transform:uppercase; -webkit-text-fill-color: white; /* Will override color (regardless of order) */

  -webkit-text-stroke-width: 1px;

  -webkit-text-stroke-color: #ce440a;}

#service-list{ display:block; clear:both;}

#service-list li{ float:left; width:379px; margin:32px 21px 0 0; font-size:14px; position:relative; text-align:center;}

.service-img{ width:379px; height:297px; overflow:hidden; position:relative; }

.service-img img{-webkit-transition: 0.6s;-moz-transition: 0.6s;-o-transition: 0.6s;-ms-transition: 0.6s;transition: 0.6s;}

#service-list li:hover .service-img img{ transform:scale(1.2) rotate(10deg); }

.service-content{ margin:27px auto 0 auto;  line-height:23px;  position:relative; background:#FFF;}

.service-titel{ display:table; width:100%; height:51px; position:relative;}

.service-titel h3{ display:table-cell; vertical-align:middle; font-size:20px; line-height:17px; color:#0e1d29;}

.service-img a{ position:absolute;background:url(../images/videobtn.png) no-repeat; left:15px; top:11px; width:116px; height:43px; -webkit-transition: 0.6s;-moz-transition: 0.6s;-o-transition: 0.6s;-ms-transition: 0.6s;transition: 0.6s;}

.service-img a:hover{transform: translate(15px);}

#service-list li {
    text-align: center; /* Ensures the button aligns to the center */
}

#service-list li .readmore {
    width: 280px;
    height: 60px;
    padding: 6px 26px;
    margin: 25px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px; /* Makes the button rounded */
    text-align: center;
    background-color: #a41c1e; /* Adjust color as needed */
    color: #ffffff; /* Adjust text color */
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

#service-list li .readmore:hover {
    background-color: #8c1819; /* Darker shade on hover */
}

.video-box{ width:800px; background:#FFF; height:480px; padding:32px 16px; box-sizing:border-box; font-size:14px;}

.video-box iframe{ width:100%; height:100%;}

#audio-box{ margin:62px 0 0 0; color:#FFFFFF; background:url(../images/audiobg.jpg) no-repeat top; background-size:cover; padding:70px 0 72px 0; position:relative;}

#audio-box h2{ font-size:35px; margin:0 0 20px 0; text-align:center; }

#audio-box:before{ position:absolute; left:16%; top:200px; width:943px; height:337px; background:url(../images/headset.png) no-repeat center top; content:"";  -webkit-animation-name: hvr-pulse-grow;animation-name: hvr-pulse-grow;-webkit-animation-duration: 0.2s;animation-duration: 0.2s;-webkit-animation-timing-function: linear;animation-timing-function: linear;-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-direction: alternate;

animation-direction: alternate;} 

  @-webkit-keyframes hvr-pulse-grow {

  to {-webkit-transform: scale(1.1);transform: scale(1.1);}

}

@keyframes hvr-pulse-grow {

  to {-webkit-transform: scale(1.1);transform: scale(1.1);}

}

.audio-content{ padding:0 0 0 99px; margin:68px 0 0 0; line-height:22px; width:406px; float:left; box-sizing:border-box; background:url(../images/audioicon1.png) no-repeat left top; font-size:13px;}

.audio-content h3{  font-size:19px; letter-spacing:1px; line-height:18px; margin-bottom:16px;}

.audio-content:nth-child(odd){ float:right;}	

.audioicon2{ background:url(../images/audioicon2.png) no-repeat left top;}

.audioicon3{ background:url(../images/audioicon3.png) no-repeat left top;}

.audioicon4{ background:url(../images/audioicon4.png) no-repeat left top;}

.audioicon5{ background:url(../images/audioicon5.png) no-repeat left top;}

.audioicon6{ background:url(../images/audioicon6.png) no-repeat left top;}

#audio-box a{ width:153px; margin:0 auto; background:#1e435f; border-radius:100px; border:#FFF solid thin; text-align:center; color:#FFF; padding:10px 0; display:block; clear:both; font-size:13px; font-weight:bold;}

#audio-box a:hover{ background:#294e6b;}

#audiolist-box{ position:relative; margin:50px 0 0 0;}

#audiolist-box:after{ content:""; left:-101px; width:350px; height:450px; top:120px; background:url(../images/speaker.jpg) no-repeat; position:absolute;}

#audiolist-box:before{ content:""; right:0; width:220px; height:347px; top:200px; background:url(../images/audiobox.jpg) no-repeat; position:absolute; z-index:50;}

.tab-wrap {-webkit-transition: 0.3s box-shadow ease;transition: 0.3s box-shadow ease;max-width: 100%;text-align:center;position: relative;list-style: none;background-color: #fff;margin: 40px 0; min-height:300px;}

.tab {display: none;}

.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {opacity: 1;-webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;transition: 0.5s opacity ease-in, 0.2s transform ease;position: relative;top: 0;z-index: 100;-webkit-transform: translateY(0px);transform: translateY(0px);text-shadow: 0 0 0;}

.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {opacity: 1;-webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;transition: 0.5s opacity ease-in, 0.2s transform ease;position: relative;top: 0;z-index: 100;-webkit-transform: translateY(0px);transform: translateY(0px);text-shadow: 0 0 0;}

.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {opacity: 1;-webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;transition: 0.5s opacity ease-in, 0.2s transform ease;position: relative;top: 0;z-index: 100;-webkit-transform: translateY(0px);transform: translateY(0px);text-shadow: 0 0 0;}

.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {opacity: 1;-webkit-transition: 0.5s opacity ease-in, 0.2s transform ease;transition: 0.5s opacity ease-in, 0.2s transform ease;position: relative;top: 0;z-index: 100;-webkit-transform: translateY(0px);transform: translateY(0px);	}

.tab:checked + label {background-color: #fff; border-top:#e74d0d solid 3px;  border-left:#aaaaaa solid 1px;   border-right:#aaaaaa solid 1px; cursor: default; border-bottom:#FFFFFF solid 1px; color:#e74d0d;}

.tab:checked + label:hover {background-color: #fff;}

.tab + label {width:190px; font-size:15px; font-weight:bold; color:#000;cursor: pointer;display: inline-block;text-decoration: none;color: #333;text-align: center;border-bottom:#aaaaaa solid thin;-webkit-user-select: none;-moz-user-select: none;

-ms-user-select: none;user-select: none;text-align: center;-webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;

transition: 0.3s background-color ease, 0.3s box-shadow ease;box-sizing: border-box;padding: 65px 0 11px 0; margin:0 2px;}

.tab + label {background-image:url(../images/music.png); background-repeat:no-repeat; background-position:center 17px;}

.tab + label:hover {background-color: #f9f9f9;box-shadow: 0 1px 0 #f4f4f4 inset;}

.tab__content {background-color: transparent;position: absolute;width: 100%;z-index: -1;opacity: 0;

left:0; padding:48px 180px 0 180px; box-sizing:border-box;}

.songs{ background:url(../images/headseticon.jpg) no-repeat left center; text-align:left; padding:0 0 0 95px; margin-bottom:29px;}

.songname{ width:336px; float:left; color:#828282; font-size:14px; line-height:27px;}

.songname h2{ font-size:17px; color:#000;}

.songs audio{ width:363px; border-radius:100px; display:block; float:right;}

#web{ background:url(../images/bg.jpg) repeat; margin:85px 0 0 0; padding:50px 0 0 0; font-size:17px; color:#FFF; text-align:center;}

#web h2{  font-size:36px; margin:7px 0 30px 0; }

#web a{ display:block;  padding:11px 0;box-sizing:border-box; color:#FFFFFF; font-size:12px; 

border-radius:100px; font-weight:bold; text-transform:uppercase; width:150px; margin:37px auto; border:#FFF solid thin;}

#whoweare a:hover{ background-color:#323a4a; color:#FFF;}

.web-gall{ float:left; width:20%; height:280px; overflow:hidden;}

.web-gall img{ width:100%; height:100%; -webkit-transform: perspective(1px) translateZ(0);transform: perspective(1px) translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-transition-duration: 0.5s;transition-duration: 0.5s;}

.web-gall img:hover{-webkit-transform: scale(1.2);transform: scale(1.2);-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);}  

#video-prod{margin:109px 0 0 0; clear:both; float:left; width:100%;}

#video-box{font-size:15px; color:#333333; line-height:25px; margin:0 60px; width:496px; float:left; position:relative;}

#video-box h2{ font-size:41px; color:#000000;  margin:35px 0; line-height:39px;}

#video-img{ float:left;}

#video-box a{ text-align:center; margin:45px 0;}

#client-slide{ width:100% !important; margin:74px 0; text-align:center; font-size:15px; color:#363636;}

#client-slide h2{ font-size:40px;}

#client-slide li{ margin:6px 15px;}

.clients{ width:213px; height:134px;}

#sublinks-box{ background:url(../images/linksbg.jpg) no-repeat top; background-size:cover; padding:64px 0; text-align:center;}

.tabs__toggle {display: inline-block;cursor: pointer;color: #000; font-size:15px;padding: 7px 45px; font-weight:bold;}

.tabs__toggle:hover{ color:#e3551a;}

.tabs__toggle_active {cursor: default;color: black;border: 2px solid #e3551a; border-radius:30px;}

.tabs__tab {padding-top: 37px; text-align:left;}

.tabs__tab ul{ list-style:none;}

.tabs__tab ul li a{ padding:0 15px 0 20px; width:299px; line-height:38px; position:relative; font-size:14px; color:#000; float:left; box-sizing:border-box;}

.tabs__tab ul li a:hover{color:#e3551a;}

.tabs__tab ul li a:after{ position:absolute; left:0; top:16px; background:#e3551a; width:5px; height:5px; border-radius:100%; content:"";}

		

/*innerpage content*/

#page-title{ position:relative; background:url(../images/pagetitlebg.jpg) no-repeat right top; background-size:cover; padding:328px 0 69px 0;}

#page-title h1{ color:#FFFFFF;  font-size:50px; text-transform:capitalize;   text-shadow: 2px 0 8px rgba(163, 138, 117, 9);}

#content-cover{ margin:54px 0; font-size:15px; color:#4b4b4b; line-height:27px;}

#about-head{font-size:36px;  line-height:44px; color:#000000; margin-bottom:45px;}

#about-img{ float:right; margin:25px 0 0 0;}

.about-cnt{ width:586px; float:left;}

#weoffer{ background:url(../images/weoffer.jpg) no-repeat top; padding:80px 0; margin:70px 0 0 0; height:663px; box-sizing:border-box; background-size:cover;}

#weoffer-list{ list-style:none; float:right; background:#e74d0d; color:#FFF; width:530px; padding:72px 60px; box-sizing:border-box;}

#weoffer-list h2{ font-size:41px; margin-bottom:38px;}

#weoffer-list li{ padding:5px 0 0 40px; font-size:18px; margin-bottom:7px; background:url(../images/listicon.png) no-repeat left 10px; line-height:25px;}

#company-profile{ background:#172b3a url(../images/pdf.png) no-repeat 30px center; margin:-30px 0 115px 0; display:block; padding:20px 0 20px 70px; width:270px; color:#FFF; font-size:18px;  border-radius:6px; border:#FFF solid 2px; box-sizing:border-box;}

#company-profile:hover{ background-color:#2e4f68;}

.services{ float:left; width:580px; margin:45px 0 0 0; padding:0 48px 0 0; box-sizing:border-box;}

.services h2{ font-size:24px; margin:15px 0; color:#05476e;}

#getin{ text-align:center; font-size:21px; color:#172b3a; line-height:36px;}

#getin h2{ font-size:30px;}

.contact-frm{ color:#dedede;display:flow-root; width:830px; margin:38px auto;}

.contact-frm span{ color:#F00; font-size:12px;}

.contact-frm h1{ color:#FFF; font-size:24px; text-align:center;  text-transform:uppercase;margin-bottom:2px; display:block;}

.contact-frm input{ width:100%; border:none;font-family:'Poppins-Regular'; padding:10px 9px; box-sizing:border-box; outline:none; color:#364954;font-size:13px; border-bottom:#364954 solid thin; text-transform:uppercase; }

.contact-frm textarea{ width:99%; border:none;padding:11px 9px; box-sizing:border-box; outline:none;  color:#364954; height:90px; margin:0px 0 12px 0; overflow:hidden; resize:none; font-size:13px; font-family: 'Poppins-Regular'; border-bottom:#364954 solid thin; text-transform:uppercase;}

.contactfrm-cover{ width:415px; float:left; padding:0 18px 0 0; box-sizing:border-box; height:71px; text-align:left;}

.contact-frm .captha{ width:207px; float:right; margin-top:0;}

.contact-frm .frmsubmit{margin-top:0; background:#e74d0d; color:#FFF; padding:12px 0; cursor:pointer; font-size:14px; border-bottom:none; border-radius:80px;}

.contact-frm .frmsubmit:hover{background:#eb5a1e;}

#mapcnt{ width:100%; height:430px; clear:both;}

#mapcnt iframe{ width:100%; height:100%;}

#contactmain-cover{  text-align:center;padding:55px 0; text-align:center; background:#112230;}

.contact-detailmain{ padding:0 30px 0 30px; line-height:21px; border-right: #304556 solid thin; display:inline-block;

 width:295px; box-sizing:border-box; color:#FFF; font-size:14px;}

.contact-detailmain a{ color:#FFF;}

.contact-detailmain span{ display:block; color:#939ba3; font-size:13px; margin:5px 0;}

#audio-img{ float:left; margin:0 21px 20px 0;}

/* --- Optimized Mobile Fix for #audio-img (767px and below) --- */
@media (max-width: 767px) {
    #audio-img {
        /* Remove float and center the entire image container */
        float: none;
        display: block; 
        margin: 20px auto; 
    }

    #audio-img img {
        /* Make the image always scale to 100% of its container width */
        width: 100% !important; 
        /* CRITICAL: Allows the height to adjust automatically and proportionally */
        height: auto !important; 
        /* Ensure it never exceeds its natural size */
        max-width: 100%; 
    }
}

#audio-head{ font-size:33px; color:#000; margin:25px 0; line-height:32px;}

#audio-video{ width:100%; height:500px; margin:34px auto; clear:both;}

#audio-video iframe{ width:100%; height:100%;}

#recording-studio{ margin:35px 0;}

#recording-studio h2{ text-align:center; font-size:31px; color:#000; margin-bottom:13px;}

#studio-img{ float:left; width:50%; height:400px; background: url(../images/studio.jpg) no-repeat; background-size:cover; margin:35px 0 0 0;}

.audiocategory{ display:block; margin:0 auto 42px auto; display:table;}

.audiocategory label{float:left; margin:6px 15px 0 0; font-size:14px; color:#000; font-weight:600;}

.audiocategory select{ width:250px; padding:11px; box-sizing:border-box; outline:none; background:#FFF; border:#b7b7b7 solid thin;  border-radius:6px;}

#studio-content{ background:#102e44; width:50%; float:left; padding:50px; box-sizing:border-box; color:#FFF; margin:35px 0 0 0; min-height:400px;}

#studio-content div{ float:left; width:544px; text-align:left; font-size:14px; color:#c8dceb;}

#studio-content h3{ font-size:24px;  color:#fb6338; text-transform:capitalize; margin-bottom:25px;}

#content-cover .songs{ float:left; width:458px; margin:50px 67px 0 0; padding:0 0 0 74px; background-position:left top;}

#content-cover .songname, #content-cover .songs audio{ width:100%;}

#content-cover .songname{ margin-bottom:11px;}

#whatweoffer { text-align:center;}

#whatweoffer h2{ font-size:36px; color:#000; margin-bottom:17px; text-align:left; color:#000}

#whatweoffer div{ float:left; font-size:14px;  width:375px; margin:44px 25px 0 0;  padding:37px 20px; box-sizing:border-box; line-height:25px;}

#whatweoffer div h3{ font-size:19px; color:#000; display:table; width:100%; height:50px; margin-bottom:12px;}

#whatweoffer div h3 span{ display:table-cell; vertical-align:middle;}

#whatweoffer div a{ display:block; margin:9px 0 0 0; color:#e64f26;} 

#whatweoffer div a:hover{ color:#000;}

#video-service{ background:url(../images/videoservicebg.jpg) no-repeat center top; background-size:cover; color:#FFF; margin:67px 0; text-align:center; padding:65px 0 90px 0;}

#video-service h2{ font-size:38px; margin:19px 0;}

.video-services{ float:left; width:375px; border:#FFF solid thin; margin:25px 25px 0 0; padding:30px 42px; box-sizing:border-box; line-height:25px; font-size:14px; min-height:247px; -moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}

.video-services h3{ font-size:19px; margin:15px 0;}

.video-services:hover{transform: scale(1.1);}

#video-listing{ background:url(../images/camera.jpg) no-repeat left top; padding:40px 0 30px 515px;}

#video-listing li{ position:relative; padding:0 0 0 37px; background:url(../images/listicon2.png) no-repeat left 3px; font-weight:bold; color:#000; font-size:17px; margin:0 0 12px 0;}

#webdesign{ float:left; margin:0 55px 30px 0;}

#webdesign-head{font-family:Poppins-Regular; font-size:36px; color:#000; line-height:43px; margin-bottom:22px;}

#webdesign-head span{ color:#e54f25;}

#ecommerce-website{ background:#172b3a; clear:both; display:block; margin:76px 0 0 0; color:#FFF; padding:38px 265px; font-size:19px; border-radius:8px; position:relative;}

#ecommerce-website:after{ content:""; width:197px; height:170px; position:absolute; background:url(../images/ecomerce.png) no-repeat; left:40px; top:-34px;}

#ecommerce-website:hover{ background:#2c485c;}

#weofferbox{ background:url(../images/weofferbg.jpg) no-repeat right top; background-size:cover; padding:70px 0; margin:60px 0;}

#weofferbox h2{ color:#524022; font-size:31px; margin-bottom:35px;}

#weofferbox li{float:left; width:409px;  padding:9px 0 9px 54px; background:rgb(122,99,52,0.5) url(../images/listicon.png) no-repeat 19px center; margin:0 25px 16px 0; border-radius:6px; box-sizing:border-box; color:#FFF;}

#webproces{ text-align:center; font-size:24px; color:#000; text-align:center; margin:25px 0 0 0;}

.webproces{ float:left; text-align:center; width:275px; margin:42px 25px 0 0; font-size:14px; line-height:24px;}

.webproces h3{ margin:18px 0 11px 0; color:#000; font-size:15px;}

.webproces-img{ width:275px; height:260px; overflow:hidden;}

.webproces:hover .webproces-img img{ transform:scale(1.2);}

.webproces-img img{-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}

.webproces a{ display:block; margin:15px 0 0 0; color:#F30;}

.webproces a:hover{ color:#2d6d9f;}

.webproces-more{ width:600px; background:#FFF;  padding:41px 35px; box-sizing:border-box; font-size:14px;}

.webproces-more h2{ margin:15px 0; font-size:16px; text-transform:uppercase;}

#workbg{ background:url(../images/workbg.jpg) no-repeat top; text-align:center; margin:65px 0; padding:58px 0; background-size:cover;}

#workbg h2{ font-size:34px; color:#436574; margin-bottom:37px;}

.pic {width: 354px;height: 370px;position: relative;overflow: hidden;animation: anima 2s;backface-visibility: hidden;float:left; margin:0 45px 45px 0;}

.pic-image {transform: scale(1); width:354px; height:370px;}

.pic:hover .pic-image {transform: scale(1.1)}

.pic-caption {cursor: default;position: absolute;width: 100%;height: 100%;background: rgba(23, 43, 58, 0.9);padding: 100px 15px;text-align: center;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter: alpha(opacity=0);

-moz-opacity: 0;-khtml-opacity: 0;opacity: 0; color:#FFF; box-sizing:border-box;}

.pic-caption h1{ font-size:17px;}

.pic-caption a{ background:#e64f25; width:80px; margin:25px auto; display:block; border-radius:6px; color:#FFF; font-size:12px; padding:4px 0;}

.rotate-out {transform: rotate(10deg) scale(3);top: 0;left: 0}

.pic:hover .rotate-out {transform: rotate(360deg) scale(1)}

.pic .pic-image,

.pic-caption,

.pic:hover .pic-caption,

.pic:hover img {transition: all 0.5s ease}

.pic:hover .rotate-out {-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=($opacity * 100))";filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;user-select: none;touch-callout: none;tap-highlight-color: transparent;}

.make-diffrent{ float:left; width:400px; margin:25px 0; text-align:center; padding:0 20px; box-sizing:border-box;}

.make-diffrent h2{ color:#000; font-size:18px; margin:10px 0;}

#requirment{ float:left; width:690px; margin:80px 0 0 0; font-size:19px;}

#requirment h2{ font-size:37px; color:#000; line-height:42px; margin-bottom:33px;}

#requirment form{ margin:31px 0 0 0;}

#requirment div{ float:left; margin:0 33px 0 0; width:312px; height:68px;}

#requirment span{ display:block; color:#F00; font-size:12px;}

#requirment input{ width:100%; padding:10px 15px; box-sizing:border-box; font-family:Poppins-Regular; border-radius:6px;  outline:none; border:#b1b1b1 solid  thin; font-size:14px;}

#requirment textarea{ width:96%; height:80px; padding:10px 15px; box-sizing:border-box; border:#b1b1b1 solid  thin; font-family:Poppins-Regular; border-radius:6px; resize:none; outline:none; font-size:14px;}

#requirment .send{ background:#e54f25; margin:18px 0 0 0; border:none; cursor:pointer; color:#FFF;  font-family: 'montserratbold'; text-transform:uppercase; padding:13px 0;}

#requirment-img{ position:absolute; right:-20px; bottom:67px;}

#requirment .send:hover{ background:#b7411f;}

#howits{ margin:95px 0 0 0; text-align:center;}

#howits h2{ font-size:30px; margin-bottom:15px; color:#000;}

#howits div{ position:relative;  width:236px; display:inline-block; color:#000;  font-size:18px;}

#howits div:after{ width:175px; height:32px; background:url(../images/line.png) no-repeat; content:""; position:absolute; top:29px; right:-85px;}

#howits div img{ display:block; margin:0 auto;}

#howits div span{ display:block; color:#a9a8a8; font-size:25px; margin:11px 0 0 0; font-weight:normal;}

#howits div:last-child:after{ display:none;}

#app-enquiry{ background:url(../images/formbg.jpg) no-repeat center top; text-align:center; color:#FFF; padding:75px 0; background-size:cover;}

#app-enquiry h2{font-family:Poppins-Regular; font-size:36px; margin:10px 0 18px 0;}

#app-enquiry h2 span{ color:#ff7c57;}

#app-enquiry form{ width:676px; margin:49px auto;}

#app-enquiry form span{ text-align:left;}

#app-enquiry form div{ float:left; margin:0 33px 0 0; width:305px; height:78px;}

#app-enquiry form span{ display:block; color:#F00; font-size:12px;}

#app-enquiry form input{ width:100%; padding:12px 15px; box-sizing:border-box; font-family:Poppins-Regular;   outline:none; border:#ffffff solid  thin; font-size:13px; background:none; color:#FFF;}

#app-enquiry form textarea{ width:96%; height:121px; padding:10px 15px; box-sizing:border-box; border:#FFFFFF solid  thin; font-family:Poppins-Regular;  background:none; resize:none; outline:none; font-size:13px; float:left; color:#FFF;}

#app-enquiry form .send{ background:none; margin:18px auto; border:none; cursor:pointer; color:#FFF;  font-family: 'montserratbold'; text-transform:uppercase; padding:13px 0; border:#e54f25 solid 2px;}

#app-enquiry form input::placeholder{ color:#FFF;}

#app-enquiry form .send:hover{ background:#e54f25;}

.printing{ float:left;   width:278px; margin:45px 22px 0 0; text-align:center;   box-shadow: 0px 0px 33px 7px rgba(139, 139, 139, 0.3); padding:25px 27px; box-sizing:border-box; font-family: 'montserratbold'; color:#333;}

.printing img{ display:block; margin:0 auto;}

#graphicweoffer{ background:#e64a1f url(../images/mockup.png) no-repeat -88px -88px; margin:76px 0 67px 0; padding:80px 0;}

#whatweoffer-content{ float:right; width:570px; color:#FFF;}

#whatweoffer-content h2{ font-size:51px; line-height:51px; margin-bottom:50px;}

#whatweoffer-content li{ position:relative; padding:0 0 0 21px; float:left; width:250px;}

#whatweoffer-content li:after{ width:7px; height:7px; border-radius:100%; background:#FFF; content:""; position:absolute; left:0; top:10px;}

.digital-print{ float:left; width:400px; font-size:14px; padding:0 34px 0 0; box-sizing:border-box;}

.digital-print h2{ font-size:18px; margin:25px 0 10px 0; color:#e64a1f;}

.digital-printimg{ width:400px; height:263px;}

#graphics-project{text-align:center; background:#e9e9e9; margin:80px 0 0 0; padding:80px 0;}

#graphics-project h2{ font-size:37px; color:#000; margin-bottom:34px;}

.projects{ float:left; width:33.3%; overflow:hidden; position:relative;}

.project-img{ width:100%; height:285px;}

.projects:hover .caption{ opacity:9;}

.projects:hover .project-img img{ transform:scale(1.2);} 

.project-img img{ transition: all 300ms ease-out; width:100%; height:100%;} 

.caption {background-color: rgba(23,43,58,0.9);position: absolute;color: #fff;z-index: 100;-webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out;-o-transition: all 300ms ease-out;-ms-transition: all 300ms ease-out;	

transition: all 300ms ease-out;left: 0;z-index:555;  top:0; height:100%; width:100%;padding:107px 21px; box-sizing:border-box; opacity:0;}

.caption h3 {position: relative;left: -600px;width: 100%;transition: all 300ms ease-out;transition-delay: 450ms; font-size:16px; text-transform:capitalize;  font-family: 'montserratbold';}

.projects:hover .caption h3{transform: translateX(600px);}

#downlaod-pdf{ background:#ebebeb url(../images/pdf.png) no-repeat 20px; border-radius:8px; display:block; padding:17px 0 13px 60px; width:210px; box-sizing:border-box; color:#000; margin:27px 0; font-size:14px; border:#d3d3d3 solid thin;}

#downlaod-pdf:hover{ background-color:#e3e3e3;}

.auto-script{ margin:50px 0 0 0;}

.auto-script h2{ font-size:24px; color:#000; margin:20px 0;}

.auto-script ul{ margin:20px 0 0 0;}

.auto-script li{ padding:0 0 0 23px;  margin-bottom:7px; position:relative;}

.auto-script li:after{ position:absolute; left:0; top:10px; background:#e64f25; width:5px; height:5px; content:""; border-radius:100%;}

#autoattend-btn{ background:#e64f25; border-radius:10px; width:250px; text-align:center; color:#FFF; padding:13px 15px; font-size:14px;   box-shadow: 0px 5px 0px 0px rgba(168, 49, 16); margin:17px auto ; display:block;}

#autoattend-btn:hover{ background:#ab3919;}

#blogcover{ float:left; width:860px;}

.blogs{ float:left; width:390px; font-size:13px; line-height:23px; margin:0 40px 48px 0; min-height:512px;}

.blog-img{ width:390px; height:270px;}

.blog-title{ display: table; width:100%; height:60px; line-height:22px; margin:16px 0 0 0;}

.blog-title h2 a{ color:#000; font-size:17px; margin:10px 0; display:table-cell; vertical-align:middle;}

.rating{ margin:7px 0 11px 0;}

.rating img{ float:left; margin:0 2px 0 0; width:13px;}

.blogs a{ display:block; color:#e54f25; font-size:12px; margin:11px 0; border-bottom:#d7d7d7 solid thin;}

.blogs a:hover{ color:#e57252;}

.bloger{ float:left; font-size:12px; width:277px; line-height:20px; }

.blog-user{ float:left; width:41px; height:41px; border-radius:100%; overflow:hidden; margin:0 17px 0 0;}

.blogername{color:#747474;}

.blogername span{ color:#ab300d;}

.blog-date{ color:#747474;}

.social{float:right;}

.blogs .social a{float:left; margin:9px 14px 0 0; border-bottom:none;}

#right-blog{ float:right; width:330px; background:#e7e7e7; padding:19px 21px; box-sizing:border-box;}

#right-blog .blog-img{ width:86px; height:59px; float:left;}

#right-blog .blogs{ width:100%; min-height:inherit; padding-bottom:15px; border-bottom:#bdbdbd solid thin; margin-bottom:26px;}

#right-blog h2 a{ color:#000; border:none; font-size:14px; margin-top:0;}

#right-blog .bloger{ float:right; width:190px;}

#right-blog .blog-date{  float:right;}

#right-blog .blogername span{ color:#000000; float:left;}

#right-blog .blogs:last-child{ border-bottom:none; margin-bottom:0;}

#right-blog .blogs:hover h2 a{ color:#e64f25;}

#blogmain{ display:block; font-size:14px;}

#blogmain .blog-img{ float:left; width:590px; height:407px; margin:0 40px 27px 0;}

#blogmain .social a{ margin:0 12px 0 0;}

#blogmain .bloger{ width:367px;}

#blogmain .blog-title { display:block; width:auto;  height:auto; }

#blogmain .blog-title h2{font-size:20px; margin-bottom:10px;}

#blogmain .rating{ margin:23px 0 17px 0}

#pagination{ clear:both; margin-top:34px; width:100%; float:left;}

ul.pagination{width:auto;text-align:center;margin:0px auto; font-size:12px; clear:both; display:table;}

.pagination li{float:left}

.pagination a{text-decoration:none;color:#666;background:#fff;padding:0px 8px;display:inline-table;border:solid 1px #ccc;margin:0 2px 0 0;-webkit-border-radius: 3px;-moz-border-radius: 3px;}

.pagination a:hover{background:#e64e24;color:#fff; border:solid 1px #e64e24; }

.pagination .active a{ background:#e64e24; color:#FFF; border:solid 1px #e64e24;}

#content-cover #audio-main .songs{ margin:0 29px 41px 0; width:308px; background:url(../images/audioicon1.png) no-repeat left top; background-size:47px; padding:0 0 0 63px;}

#audio-main .songname h2{ font-size:16px;}

#audio-main .songname{font-size:13px;}

.video{ float:left; width:564px; height:316px; margin:0 36px 88px 0; position:relative;}

.video iframe{ width:100%; height:100%;}

.video-title{ position:absolute; left:0; bottom:-46px; background:#e64e24; width:100%; text-align:center; border-radius:80px;  padding:12px 15px; box-sizing:border-box; font-size:14px; color:#000; text-transform:capitalize; color:#FFF; line-height:20px;}

#web-gallery{ display:block;}

#web-gallery .pic{ width:287px; margin:0 12px 45px 0; height:300px;}

#web-gallery .pic-image{ width:287px; height:300px;}

#gal_listed{list-style:none; width:100%;}

#gal_listed li{list-style:none;float:left;width:295px;margin:0 5px 5px 0;position:relative;overflow:hidden; background:#172b3a; padding-left:0;}

#gal_listed li:after{ display:none;}

.inn_gal_img{width:295px;height:188px; line-height:0;}

.inn_gal_img img{width:100%;height:100%;}

.inn_gal_txt{display:none;height: 100%;position: absolute;top: 0;width: 100%;z-index:999;}

#gal_listed li:hover .inn_gal_txt{ background:#172b3a url(../images/zoom.png) no-repeat center 115px; background-size:30px;display:block;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

filter: alpha(opacity=90);-moz-opacity: 0.9;-khtml-opacity: 0.9;opacity: 0.9;color:#fff; text-align:center; padding:78px 0 0 0; box-sizing:border-box; line-height:24px;}

.flip-container {perspective: 1000px;}

.flip-container:hover .flipper, .flip-container.hover .flipper {transform: rotateY(180deg);}

.flip-container, .front, .back {width: 100%;height: 188px; }

.flipper {transition: 0.6s;transform-style: preserve-3d;position: relative;}

.front, .back {backface-visibility: hidden;position: absolute;top: 0;left: 0;}

.front {z-index: 2;transform: rotateY(0deg);}

.back {transform: rotateY(180deg); border-radius:25px;}

#more{ background:#1d3742; width:195px; border-radius:50px; margin:25px auto 0 auto; color:#FFF; font-size:14px; text-transform:uppercase; font-family: 'montserratbold'; padding:13px 0; display:block; clear:both;}

#more:hover{ background:#2b4b58;}

.career-frm{ width:540px; float:left; background:#e5e5e5; padding:40px 30px; box-sizing:border-box;}

.career-frm input{ background:#FFF; border:#d3d3d3 solid thin; width:100%; padding:12px 14px; box-sizing:border-box; font-family:Poppins-Regular; outline:none; font-size:13px; margin:10px 0 0 0;}

.career-frm select{ background:#FFF; border:#d3d3d3 solid thin; width:100%; height:47px; padding:10px 10px; box-sizing:border-box; font-family:Poppins-Regular; outline:none; font-size:13px;  font: -moz-pull-down-menu; color:#686868; margin:10px 0 0 0;}

.career-frm textarea{ background:#FFF; border:#d3d3d3 solid thin; width:100%; padding:10px 14px; box-sizing:border-box; font-family:Poppins-Regular; outline:none; font-size:13px; height:72px; overflow:auto; resize:none; margin:10px 0 0 0; }	

.career-frm .frmsubmit{ background:#e64f25; border:none; font-family: 'montserratbold'; text-transform:uppercase; color:#FFF; padding:14px; font-size:13px; cursor:pointer;}		

.career-frm .frmsubmit:hover{ background:#c13d19;}

#career-man{ position:absolute; left:540px; top:0; z-index:-1;}

.career-frm span{ display:block; color:#F00; font-size:12px;}

/*innerpage content end*/



/*footer section*/

footer{ background: url(../images/footer.jpg) repeat; clear:both; padding:48px 0; color:#a9b6c0; font-size:14px;}

#footer-left{ float:left; text-align:center;}

footer #topsocial{ float:none; text-align:center; margin-top:20px;}

footer #topsocial a{ display:inline-block; float:none; padding:0 6px;}

#bottomlink-cover{ float:left; margin:48px 100px;}

.contact-detail{margin:0 0 13px 0;  line-height:30px; font-size:15px;}

.contact-detail img{ float:left; margin:0 16px 0 0;}

.contact-detail a{ color:#a9b6c0;}

.botom-social{  float:left; padding:11px 26px; border-left:#4a4a4a solid thin; border-right:#4a4a4a solid thin;}

ul.botom-link{float:left; padding:0; list-style:none; box-sizing:border-box; width:328px; margin:34px 0 0 0;}

ul.botom-link li a{ color:#a9b6c0; margin:0 0 5px 0;font-size:14px; float:left; width:164px;}

ul.botom-link li a:hover{ color:#6d8fa9;}

#footer-logo{ display:block; clear:both; margin-bottom:10px;}

#copyright{ font-size:13px; margin:60px 0 0 0; float:right; width:180px;}

/*footer section end*/



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

.container{ width:992px;}

.bannercaption{ top:57px;}

#about-img, #requirment-img{ display:none;}

.rslides img{ width:50%;}

.bannercaption h2{ font-size:44px;}

#service-list li{ width:309px;}

.service-img{ width:309px; height:242px;}

.songname{ width:277px;}

.songs audio{ width:243px;}

#video-prod{ text-align:center;}

#video-box, .about-cnt, #blogcover, #right-blog{ width:100%; margin:25px 0;}

#video-box a{ margin:20px auto;}

#video-img{ display:table; margin:0 auto; float:none;}

.tabs__tab ul li a{ width:247px;}

#bottomlink-cover{ margin:48px 55px;}

#copyright{ width:99px;}

.services{ width:495px;}

#studio-content div{ width:452px;}

#content-cover .songs{ width:355px;}

#whatweoffer div{ width:305px;}

.video-services{ width:465px;}

.webproces{ width:304px;}

.webproces-img{ margin:0 auto;}

.pic, .pic-image{ width:284px; height:297px;}

.make-diffrent{ width:330px;}

#howits div{ width:193px;}

.printing{ width:226px;}

.dropdown ul li a{ padding:29px 11px;}

#whatweoffer-content{ width:449px;}

.digital-print{ width:329px;}

.digital-printimg{ width:329px; height:215px;}

.project-img{ width:100%; height:100%; line-height:0;}

.blogs, .blog-img{ width:455px;}

.blog-img{ height:314px;}

#right-blog .bloger{ width:820px;}

#blogmain .blog-img{ width:460px; height:317px;}

#content-cover #audio-main .songs{ width:398px;}

.video{ width:459px; height:258px;}

#web-gallery .pic, #web-gallery .pic-image{ width:317px; height:331px;} 

#gal_listed li, .inn_gal_img{ width:325px;}

.inn_gal_img, .flip-container, .front, .back{ height:207px;}

}



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

.container{ width:768px;}	

.dropdown, #mailus, #welcome-box::before, #welcome-box::after, #audio-box::before, #audiolist-box::before, #audiolist-box::after, #howits div::after, #career-man{ display:none;}

#logo{ margin:9px 76px;}

.callus{ margin:35px 90px 0 0;}

#mobile_menu{display:block;text-align:right;padding:0 0px 0 0px; clear:both;}

#mobile_drop{display:block;position:relative;background:#e74d0d;}

#mobile_drop_fix{display:block;padding:20px 0px 33px 0px;margin:0 auto 0 auto;}

#mobile_drop_fix ul li{list-style:none;display:block}

#mobile_drop_fix ul li ul li{margin:0 0 0 35px;}

#mobile_drop_fix ul li ul li a{border-bottom:0!important}

#mobile_drop_fix a{display:block;color:#fff;border-bottom:solid 1px #e2e2e2;display:block;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;text-decoration:none;padding:5px 0 5px 0; font-size:13px;}

#banner{ padding:132px 0 20px 0;}

.bannercaption{ left:0; width:354px;}

.bannercaption h2{ font-size:29px; line-height:31px;}

#welcome-box p, .audio-content, .audio-content:nth-child(2n+1), .services, .contact-frm, #studio-img, #studio-content, #content-cover .songs, #whatweoffer div, .make-diffrent, #requirment, #whatweoffer-content, .digital-print, .bloger, #content-cover #audio-main .songs, .video{ width:100%; float:none; box-sizing:border-box;}

#service-list li{ width:362px;}

.audio-content{ margin-bottom:50px;}

.service-img{ width:362px; height:284px;}

.tab__content{ padding:48px 0;}

.tab + label{ width:150px;}

.web-gall{ width:33%; height:100%;}

#client-slide li{ margin:6px 20px;}

#bottomlink-cover{ margin:48px 29px;}

ul.botom-link{ width:137px;}

#page-title h1{ font-size:47px;}

#page-title{ background-position: left; padding:178px 0 69px 0;}

.contactfrm-cover{ width:384px;}

.contact-detailmain{ border:none; padding:10px 15px;}

#studio-content{ margin:0; min-height:auto;}

#studio-content div{ width:768px; margin:0 auto; text-align:center; float:none;}

.video-services{ width:359px;}

#video-listing{ padding-left:448px;}

#webdesign{ float:none;}

#ecommerce-website::after{ top:-3px;}

#weofferbox li{ width:359px;}

.webproces{ width:231px;}

.webproces-img{ width:231px; height:218px;}

.pic, .pic-image{ width:241px; height:252px;}

.pic{ margin:0 15px 15px 0}

#requirment div, .printing{ width:350px;}

#graphicweoffer{ background-image:none;}

#whatweoffer-content h2{ font-size:43px;}

.digital-print{ margin-bottom:50px; padding-right:0;}

.caption{ padding:64px 21px;}

.caption h3{ font-size:14px;}

#autoattend-btn{ margin-bottom:25px;}

.blogs, .blog-img{ width:344px;}

.blog-img{ height:238px;}

#right-blog .bloger{ width:820px;}

.social{ float:left;}

#right-blog .bloger{ width:604px;}

#blogmain .blog-img{ width:590px; height:407px;}

.video{ height:405px;}

#web-gallery .pic, #web-gallery .pic-image{ width:244px; height:255px;} 

#gal_listed li, .inn_gal_img{ width:251px;}

.inn_gal_img, .flip-container, .front, .back{ height:160px;}

}



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

.container, #studio-content div{ width:448px;}

.topicon-box, #ecommerce-website::after{ display:none;}

#logo{ margin:9px 0; width:204px; height:86px;}

.callus{ margin:35px 60px 0 0;}

.bannercaption{ width:204px; top:0;}

.bannercaption span{ font-size:13px;}

.bannercaption h2{ font-size:20px; margin:8px 0 0 0;}

#service-box h2{ font-size:37px;}

#service-list li, .video-box, .songname, .songs audio, #video-img img, ul.botom-link, #copyright, #weoffer-list, .contactfrm-cover, #audio-img img, .video-services, #webdesign img, #weofferbox li, .webproces, #requirment div, #requirment textarea, #howits div, #app-enquiry form, #app-enquiry form div ,#app-enquiry form textarea, .blogs, .blog-img, .career-frm{ width:100%;}

#howits div{ margin:15px 0;}

#webdesign{ margin-right:0;}

.contactfrm-cover{ padding-right:0;}

.service-img{ width:448px; height:352px;}

.web-gall{ width:100%; height:100%; line-height:0;}

#client-slide li{ margin:6px 10px;}

.tabs__tab ul li a{ width:224px;}

 #bottomlink-cover{ margin:20px 0; float:none; width:100%;}

 footer #topsocial{ margin-bottom:39px;}

 ul.botom-link{ margin-top:11px;}

 ul.botom-link li a{ width:148px;}

#page-title{ background-position: -110px 0;}

#company-profile{ margin:140px 0 50px 0;}

 #weoffer-list h2{ font-size:32px;}

 #weoffer-list{ padding:72px 38px;}

 #audio-video{ height:252px;}

 .video-services{ min-height:inherit;}

 #video-listing{ padding-left:0; background:none;}

 #ecommerce-website{ padding:38px 41px;}

 #weofferbox{ background:#ded1b4;}

 .webproces-img{ width:275px; height:260px;}

 .pic, .pic-image{ width:209px; height:218px;}

 .printing{ width:202px;}

 .projects{ width:50%;}

 #autoattend-btn{ float:left;}

 .blog-img{ height:309px;}

 #right-blog .bloger{ width:296px;}

 #blogmain .blog-img{ width:448px; height:309px;}

 .video{ height:249px;}

 #web-gallery .pic, #web-gallery .pic-image{ width:211px; height:221px;} 

 #gal_listed li, .inn_gal_img{ width:448px;}

.inn_gal_img, .flip-container, .front, .back{ height:285px;}

}



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

.container, .tab + label, #studio-content div{ width:300px;}

#intro, .callus, .bannercaption span{ display:none;}

.topicon-box{ display:block; float:left;}

#logo{ margin:9px 0; width:182px; height:74px;}

.mtoggle{ margin:-51px 0 0 0;}

.bannercaption{ width:155px;}

.bannercaption h2{font-size:15px; line-height:25px;}

#welcome-box h2{ line-height:28px;}

.service-img{ width:300px; height:236px;}

.songs{ padding:0 0 0 78px;}

#video-box h2, #about-head ,#app-enquiry h2, #whatweoffer-content h2, #graphics-project h2{ font-size:28px;}

#client-slide li{ margin:6px 45px;}

.tabs__toggle{ display:block;}

.tabs__tab ul li a, .printing, .projects, .audiocategory select{ width:100%;}

#page-title h1{ font-size:37px;}

#page-title{ background-position:-320px 0;}

#weoffer{ height:813px;}

#weoffer-list li{ font-size:16px;}

.contact-frm .captha{ width:137px;}

#audio-video{ height:170px;}

#audio-head, #whatweoffer h2, #webdesign-head, #requirment h2{ font-size:28px;}

#studio-img{ height:254px;}

#video-listing li{ font-size:16px;}

.pic, .pic-image,  #web-gallery .pic, #web-gallery .pic-image{ width:300px; height:314px;}

.digital-printimg{ width:300px; height:196px;}

#autoattend-btn{ font-size:14px; padding:11px 15px;}

.blog-img{ height:207px;}

.blogs{ min-height:inherit;}

#right-blog .bloger{ width:256px; margin-top:8px;}

#blogmain .blog-img{ width:300px; height:207px;}

.video{ height:179px;}

.video-title{ padding:12px; font-size:13px;}

 #gal_listed li, .inn_gal_img{ width:300px;}

.inn_gal_img, .flip-container, .front, .back{ height:191px;}

.career-frm{ padding:30px 21px;}

}



.explain-into {
    font-size: 36px;
    line-height: 44px;
    color: #000000;
    margin-bottom: 45px;
}

@media (max-width: 768px) {
  .explain-into {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 30px;
  }
}
.explainer-video-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.video-item {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  background: #fff;
}

.video-item iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Responsive: two per row on desktop, full width on mobile */
@media (min-width: 768px) {
  .video-item {
    flex: 0 1 calc(50% - 20px);
  }
}



/* ===== Explainer / Timelapse Template Style ===== */

.bi-section{padding:10px 0;}
.bi-mt{margin-top:108px;}

.bi-hero{padding:10px 0 40px;}
.bi-hero__title{font-size:42px;line-height:1.2;margin:0;}

.bi-h2{font-size:28px;line-height:1.25;margin:0 0 14px;}
.bi-lead{font-size:16px;margin:0 0 14px;}
.bi-muted{color:#666;margin:0;}

.bi-text,.bi-content{max-width:720px;}
.bi-content p{margin:0 0 14px;line-height:1.75;}

.bi-grid-2{display:grid;grid-template-columns:1.2fr 0.8fr;gap:40px;align-items:start;}

.bi-media img{width:100%;max-width:520px;height:auto;display:block;margin-left:auto;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.12);}

.bi-cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}

.bi-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:10px;font-weight:600;text-decoration:none;transition:all .2s ease;}

.bi-btn--primary{background:#ff6a00;color:#fff;}
.bi-btn--primary:hover{transform:translateY(-1px);opacity:.95;}

.bi-btn--ghost{background:transparent;color:#111;border:1px solid rgba(0,0,0,.15);}
.bi-btn--ghost:hover{transform:translateY(-1px);border-color:rgba(0,0,0,.3);}

.bi-section-head{margin-bottom:22px;}

.bi-card{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.08);overflow:hidden;}

.bi-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}

.bi-video-card{transition:transform .2s ease;}
.bi-video-card:hover{transform:translateY(-3px);}

.bi-video-ratio{position:relative;width:100%;padding-top:56.25%;background:#000;}
.bi-video-ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

.bi-image-block{margin-top:22px;}
.bi-image-block img{width:100%;height:auto;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.10);}

.bi-alt{background:#f7f7f7;}
.bi-extra-card{padding:26px;}

@media (max-width:991px){
  .bi-hero__title{font-size:34px;}
  .bi-grid-2{grid-template-columns:1fr;}
  .bi-video-grid{grid-template-columns:1fr;}
}