html {scroll-behavior: smooth;}
body.template-portfolio-p45{background-color: #232527 !important; font-family: 'exo_2.0regular', sans-serif;}
/*common css*/
.pf-45 .ctm-container{max-width: 1180px;}
.sec-heading-wrap{width: 100%; position: relative;}
.sec-heading-wrap .sec-heading-inner {padding: 0 0 5px 0;}
.sec-heading-wrap .sec-number { position: relative; width: 70px; height: 87px; padding: 17px 0 9px 0;}
.sec-heading-wrap .sec-number:after { content: ""; position: absolute; width: 1px; height: 54px; background-color: #707070; top: 50%; right: -19px;
transform: translateY(-50%);}
.sec-heading-wrap .sec-number.icons-heading{width: 105px;}
.sec-heading-wrap .sec-number img{width: auto;}
.sec-heading-wrap .sec-heading-text{padding: 0 0 0 42px;}
.sec-heading-wrap .sec-heading-text .sec-tag {font-size: 11px; font-weight: 400; line-height: 13px; letter-spacing: 0.3em; text-align: left; color: #707070; padding: 0 0 12px 0; display: inline-block; text-transform: uppercase;}
.sec-heading-wrap .sec-heading-text h3{font-size: 26px; line-height: 28px; font-weight: 500; color: #fff; margin: 0;}
.sec-heading-wrap .section-content{width: 100%; max-width: 580px;}
.sec-heading-wrap .section-content p { font-size: 12px; line-height: 19px; font-weight: 400; color: #fff; margin: 0; letter-spacing: .7px; }
.sec-heading-wrap.remove-pb .sec-heading-inner{padding: 0;}
.user-persona-heading .sec-heading-text .sec-tag{font-size: 14px; line-height: 17px;}
.user-persona-heading .sec-heading-text h3{font-size:32px; line-height: 35px;}
.tab-show{display: none !important;}
.mob-show{display: none !important;}
.mob-hide{display: block !important;}
/*common css*/
/*pf-intro section css start here*/
.pf-case-intro.ctm-lightdark{background-color: #2A2D30;}
.pf-case-intro.ctm-lightdark:before{background-image: url('../assets/images/portfolio/wwt-images/p-45/dark-pf-text-bg.png'); background-repeat: no-repeat;}
.pf-case-intro.ctm-lightdark .pf-intro-top h1,
.pf-case-intro.ctm-lightdark .pf-intro-top h2,
.pf-case-intro.ctm-lightdark .pf-intro-mid-l h3,
.pf-case-intro.ctm-lightdark .pf-intro-mid-l h4,
.pf-case-intro.ctm-lightdark .pf-intro-mid-r h5,
.pf-case-intro.ctm-lightdark .pf-intro-desc-top h6,
.pf-case-intro.ctm-lightdark .pf-intro-desc-txt p{color: #fff;}
/*pf-intro section css end here*/
/*Design Process section css start here*/
.design-process-wrap{padding: 160px 0;}
.design-process-wrap .dp-caption{width: 100%; position: relative;}
.design-process-wrap .dp-caption h3{font-size: 26px; line-height: 34px; font-weight: 500; color: #fff; margin: 0; padding: 0 0 68px 0;}
/*Design Process section css end here*/
/*User persona section css start here*/
.user-persona-wrap{padding: 0 0 145px 0;}
.user-persona-wrap .user-persona-caption{width: 100%; position: relative;}
.user-persona-wrap .user-card-wrap{width: 100%; gap: 20px; padding: 46px 0 0 0;}
.user-persona-wrap .user-card-item{width: calc(100% / 3 - 13.4px); background: #2A2D30; padding: 16px 0 20px 0; border-radius: 14px; border: 1px solid #42464A;}
.user-card-item .user-info-wrap{padding: 0 16px 20px 16px; border-bottom: 1px solid #42464A; margin-bottom: 20px;}
.user-card-item .user-into-inner{padding-bottom: 20px;}
.user-card-item .user-into-inner .user-img{width: 91px;}
.user-card-item .user-img img{width: 100%; border-radius: 8px; object-fit: cover;}
.user-card-item .user-info{width: calc(100% - 91px); padding-left: 15px;}
.user-card-item .user-info h6 { font-size: 16px; font-weight: 600; line-height: 21px; text-align: left; margin: 0; color: #fff; padding: 0 0 3px 0;}
.user-card-item .user-info span { font-size: 12px; font-weight: 300; line-height: 16px;text-align: left; color: #959494; display: block; letter-spacing: 0.7px;}
.user-card-item .user-info-wrap p { font-size: 12px; font-weight: 400; line-height: 16px; text-align: left; letter-spacing: 0; color: #B4B4B4; margin: 0;}
.user-card-item .user-list{padding: 0 16px;}
.user-card-item .user-list.goals{padding-bottom: 20px; margin: 0 0 20px 0; border-bottom: 1px solid #42464A;}
.user-card-item .user-list h6 { font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: 0.02em; text-align: left; color: #FFFFFF; margin: 0; text-transform: uppercase; padding: 0 0 9px 0;}
.user-card-item .user-list ul{margin: 0; padding: 0; ba}
.user-card-item .user-list ul li { list-style: none; font-size: 13px; font-weight: 400; line-height: 17px; letter-spacing: 0px; text-align: left; color: #B4B4B4; padding: 0 0 0 18px; position: relative; margin: 0 0 5px 0;}
.user-card-item .user-list ul li:before { content: ""; position: absolute; background-image: url('../assets/images/portfolio/wwt-images/p-45/Happy.svg'); background-size: cover; background-repeat: no-repeat; background-position: center; left: 0; top: 2px; width: 13px; height: 13px;}
.user-card-item .user-list ul li:last-child{margin: 0;}
.user-card-item .user-list.frustrations ul li:before{background-image: url('../assets/images/portfolio/wwt-images/p-45/frustration.svg');}
/*User persona section css end here*/
/*Information Architecture section css start here*/
.ia-wrap{padding: 0 0 160px 0;}
.ia-wrap .ia-caption{width: 100%; position: relative;}
.ia-wrap .ia-image{width: 100%; max-width: 842px; margin: 0 auto; padding: 100px 0 0 0;}
/*Information Architecture section css end here*/
/*Wireframes section css start here*/
.wireframe-wrap{padding: 0 0 160px 0;}
.wireframe-wrap .wireframe-caption{width: 100%; gap: 20px; padding: 82px 0 0 0;}
.wireframe-wrap .wireframe-item{width: calc(100% / 2 - 10px);}
/*Wireframes section css end here*/
/*Design System section css start here*/
.ds-wrap{padding: 0 0 160px 0;}
.ds-wrap .ds-caption{width: 100%; position: relative; padding: 75px 0 80px 0;}
.ds-wrap .tagline{font-size:14px; line-height: 26px; color: #6A727A; text-transform: capitalize; display: inline-block; width: 100%;}
.ds-wrap .color-wrap{width: 100%; display:inline-block;}
.ds-wrap .color-wrap .tagline{padding: 0 0 29px 0;}
.ds-wrap .color-caption{width: 100%; flex-wrap: nowrap;}
.ds-wrap .color-caption .color-dark { width: 50%; }
.ds-wrap .color-caption .color-items { width: 50%;}
.ds-wrap .color-caption .color-item{width: 100%;}
.ds-wrap .color-caption .color-item .color-red, .ds-wrap .color-caption .color-item .color-lightgray{width: 20%;}
.ds-wrap .color-caption .color-item .color-white{width: 21%;}
.ds-wrap .color-caption .color-item .color-gray{width: 39%;}
.ds-wrap .color-caption .color-dark span { background: #191B1D;}
.ds-wrap .color-item .color-red span{background: #FF135A; color: #FFFFFF;}
.ds-wrap .color-item .color-white span{background: #fff; color: #707070;}
.ds-wrap .color-item .color-lightgray span{background: #E0E0E0; color: #878787;}
.ds-wrap .color-item .color-gray span{background: #696969; color: #A1A1A1; text-align: left; padding: 36px 0px 9px 10px;}
.ds-wrap .color-caption span { background: #191B1D; font-size: 14px; font-weight: 400; line-height: 17px; letter-spacing: 0.3em; text-align: right; display: block; color: #9A9A9A; padding: 36px 10px 9px 0; }
.ds-wrap .font-icon-wrap{width: 100%; gap: 20px;}
.ds-wrap .font-icon-wrap .if-caption{width: calc(100% / 2 - 10px);}
.ds-wrap .if-caption .tagline{padding: 0 0 20px 0;}
.ds-wrap .if-caption.icons-image img{max-width:500px;}
/*Design System section css end here*/
/*homepage section css start here*/
.homapage-sec-wrap{padding: 0 0 130px 0;}
.homapage-sec-wrap .homepage-caption{width: 100%; position: relative;}
.homapage-sec-wrap .sec-heading-wrap{margin-bottom: 55px;}
.homapage-sec-wrap .frame-wrap { width: 100%; max-width: 1005px; margin: 0 auto; position: relative; min-height: 666px;}
.homapage-sec-wrap .frame-wrap:after { content: ""; position: absolute; background-image: url(../assets/images/portfolio/wwt-images/p-45/tab-mockup.png); background-repeat: no-repeat; background-size: contain; background-position: center bottom; width: 100%; left: 0; bottom: 0px; height: 100%; z-index: 2; }
.homapage-sec-wrap .video-caption { width: 934px; height: 593px; background: transparent; border-radius: 14px; position: relative; margin: 0 auto; z-index: 9; top: 24px; overflow: hidden; }
.homapage-sec-wrap .video-caption video{width: 100%; height: 100%; object-fit: cover;}
/*homepage section css end here*/
/*Mobile Responsiveness section css start here*/
.mobile-res-wrap{padding: 0 0 160px 0;}
.mobile-res-wrap .sec-heading-wrap{margin-bottom: 111px;}
.mobile-res-wrap .mobile-res-caption{width: 100%; position: relative;}
.mobile-res-wrap .mobile-screen-caption{ gap: 26px; width: 100%; max-width: 982px; margin: 0 auto; flex-wrap: wrap;}
.mobile-res-wrap .mob-frame-caption{width: calc(100% / 3 - 18px);}
.mobile-res-wrap .mob-scroll-frm{width: 100%; margin: 0 auto; min-height: 600px; position: relative; overflow: hidden;}
.mobile-res-wrap .mob-scroll-frm:after { content: ""; position: absolute; background-image: url(../assets/images/portfolio/wwt-images/p-45/Union.png); background-repeat: no-repeat; background-size: contain; background-position: center bottom; width: 100%; left: 0; bottom: 0; height: 100%; z-index: 2; }
.mobile-res-wrap .mob-scroll-frm:before { content: ""; position: absolute; z-index: 9; top: 1px; left: 50%; width: 144px; height: 38px; background: #0F1010; border-radius: 0px 0px 20px 20px; transform: translateX(-50%); }
.mobile-res-wrap .mob-scroll-img { width: 300px; height: 590px; background: transparent; border-radius: 28px; position: relative; margin: 0 auto; top: 5px; left: 0; overflow-y: scroll; z-index: 8; scrollbar-width: none; cursor: pointer;}
.mobile-res-wrap .scrolll-content{width: 100%; display: block; text-align: center; padding: 45px 0 0 0;}
.mobile-res-wrap .scrolll-content svg{margin-bottom: 16px; width: 18px;}
.mobile-res-wrap .scrolll-content p { font-size: 12px; font-weight: 400; line-height: 19px; letter-spacing: 0.05em; text-align: center; max-width: 171px; margin: 0 auto; color: #838A90;}
/* slider mobile-show*/
.mobile-res-wrap .swiper-mob-res-main{position: relative;}
.mobile-res-wrap .mobile-sec-wrap{width: 100%; max-width: 1109px; margin: 0 auto; overflow: hidden;}
.mobile-res-wrap .ctm-slider-btn { position: absolute; top: 50%; left: 0; z-index: 9; transform: translateY(-50%); width: 100%; }
.mobile-res-wrap .ctm-slider-btn .button-slider{width: 60px; height: 60px; position: relative;}
.mobile-res-wrap .ctm-slider-btn .button-prev{left: -205px}
.mobile-res-wrap .ctm-slider-btn .button-next{right: -205px;}
/* slider mobile-show*/
/*Mobile Responsiveness section css end here*/
/*Our Services section css start here*/
.our-services-wrap{padding: 0 0 160px 0;}
.our-services-wrap .sec-heading-wrap{margin-bottom: 50px;}
.our-services-wrap .our-services-caption{width: 100%; max-width: 954px; margin: 0 auto; height: 571px; border-radius: 30px; overflow: hidden; position: relative; background-color: transparent;}
.our-services-wrap .our-services-caption video{width: 100%; border-radius: 30px; }
/*Our Services section css end here*/
/*Dimensional Icons section css start here*/
.dimensional-wrap{padding:0 0 171px 0;}
.dimensional-wrap .sec-heading-wrap{margin-bottom: 74px;}
.dimensional-wrap .dimensional-caption { width: 100%; max-width: 878px; margin: 0 auto; column-gap: 100px; row-gap: 40px; }
.dimensional-caption .dimensional-items{width: calc(100% / 3 - 66.7px);}
.dimensional-items .image-info { position: relative; height: 130px; cursor: pointer; }
.dimensional-items .image-info img { max-width: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: auto; height: 100%; transition: opacity .3s; right: 0;margin: auto; }
.dimensional-items .image-info img:last-child{opacity: 0;}
.dimensional-items:hover .image-info img:last-child{opacity:1;}
.dimensional-caption .dimensional-items h5{font-size:12px; line-height: 16px; color: #fff; margin: 0; text-align: center; padding: 20px 0 0 0; font-weight: 700;}
/*Dimensional Icons section css end here*/
/*2D Animations section css start here*/
.anim-slider-wrap{padding: 0 0 160px 0;}
.anim-slider-wrap .sec-heading-wrap{margin-bottom: 85px;}
.anim-slider-wrap .anim-slider-caption{width: 100%; max-width:600px; margin:0 auto; display: block; padding-top: 50px; position: relative;}
.anim-slider-wrap .carousel{position: relative; width:100%; min-height: 314px; margin-bottom: 38px;}
.anim-slider-wrap .carousel_item { width: 100%; background-color: transparent; border-radius: 25px; position: absolute; height: 314px; transform-origin: top; transition: all 1s cubic-bezier(0.28, 0.55, 0.385, 1.65); width: 100%; overflow: hidden;}
/*.anim-slider-wrap .carousel_item.slideVisible{background: transparent; padding-top: 0px !important}*/
.anim-slider-wrap .carousel_item:nth-child(1) { z-index: 6; top: 0px; transform: scale(1); opacity: 1; }
.anim-slider-wrap .carousel_item:nth-child(2) { z-index: 5; top: -22px; transform: scale(0.92); opacity: 0.9;}
.anim-slider-wrap .carousel_item:nth-child(3) { z-index: 4; top: -44px; transform: scale(0.85); opacity: 0.8;}
.anim-slider-wrap .carousel_item:nth-child(4) { z-index: 4; top: -66px; transform: scale(0.78); opacity: 0.7;}
.anim-slider-wrap .carousel_item video{width: 100%; height: 100%; border-radius: 22px;}
@keyframes fade-out-back {
from { transform: scale(0.5); opacity: 0; }
}
@keyframes fade-in-front {
from { top: 1rem; transform: scale(1.2); opacity: 0; }
}
.anim-slider-wrap .controls{width: 100%; max-width: 88px; border: 1px solid #838A91; border-radius:50px; margin: 0 auto; padding: 8.5px 20px; gap: 20px;}
.anim-slider-wrap .controls button{background: transparent; border: none; outline: none; box-shadow: none; margin: 0; padding: 0; cursor: pointer;}
.anim-slider-wrap .controls button.carousel-prev svg{transform: rotate(180deg) !important; }
.anim-slider-wrap .controls button svg path{transition: all .2s ease-in-out;}
.anim-slider-wrap .controls button:hover svg path{stroke: #838A91;}
.anim-slider-wrap .count-slide { position: absolute; bottom: 12px; left: 0; max-width: 60px; }
.anim-slider-wrap .count-slide span{font-size: 16px; line-height: 20px; color: #fff;}
.anim-slider-wrap .count-slide span:last-child{color: #838A91;}
/*2D Animations section css end here*/
/*3D Illustrations & Animations section css start here*/
.illustrations-wrap{padding: 0 0 291px 0;}
.illustrations-wrap .sec-heading-wrap{margin-bottom: 61px;}
.illustrations-wrap .illustrations-caption{column-gap: 20px; row-gap: 40px;}
.illustrations-wrap .illustrations-caption p { font-size: 12px; font-weight: 400; line-height: 19px; letter-spacing: 0.05em; color: #FFFFFF; margin: 0 0 20px 0;}
.illustrations-wrap .illustration-items{border-radius: 0px; width: calc(100% / 2 - 10px); overflow: hidden;}
.illustrations-wrap .illustration-items video{width: 100%; height: auto; border-radius: 24px;}
/*3D Illustrations & Animations section css end here*/
/*Other pages section css start here*/
.otherpage-wrap{padding: 38px 0 117px 0; background-color: #F4F4F4; overflow: hidden;}
.otherpage-wrap .otherpage-caption{width: 100%; position: relative;}
.otherpage-wrap .otherpage-caption h3 { font-size: 32px; font-weight: 400; line-height: 35px; color: #2C3032; margin: 0 0 98px 0; text-align: center;}
.otherpage-wrap .otherpage-main { --total-marquee-items: 6; height: 400px; width: calc(739px * (var(--total-marquee-items))); overflow: hidden; box-sizing: border-box; position: relative; margin: 0 auto;}
.otherpage-wrap .otherpage-main .otherpage-first-caption { display: block; width: 200%; position: absolute; }
.otherpage-wrap .otherpage-main-last{margin: 24px 0 100px 0;}
.otherpage-wrap .otherpage-main .otherpage-first-caption.right{animation: marqueeRight 50s linear infinite;}
.otherpage-wrap .otherpage-main .otherpage-first-caption.left{animation: marqueeLeft 50s linear infinite;}
.otherpage-wrap .otherpage-first-caption span { float: left; width: 50%; gap: 24px; padding: 0 12px;}
@keyframes marqueeLeft {
0% { left: 0; }
100% { left: -100%; }
}
@keyframes marqueeRight {
0% { left: -100%; }
100% { left: 0; }
}
.visit-website-btn{width: 334px; display: block; margin: 0 auto;}
.visit-website-btn .visit-website-cap { color: #fff; font-weight: 700; text-transform: uppercase; font-size: 16px; border-radius: 25px; padding: 0 41px; height: 62px; box-sizing: border-box; position: relative; outline: none; border: none; text-decoration: none;}
.visit-website-btn .visit-website-cap:before { content: ""; position: absolute; border-radius: 50px; width: 100%; height: 100%; top: 0; right: 0; left: 0; margin: auto; background: #FF135A; transition: all .3s, background .3s; }
.visit-website-btn .visit-website-cap span { transition: opacity .3s; position: relative; color: #fff;}
.visit-website-btn .visit-website-cap .btn-arr { position: relative; transition: transform .5s; margin-left: 15px; }
.visit-website-btn .visit-website-cap .btn-arr svg path { stroke: #fff; }
.visit-website-btn .visit-website-cap:hover:before{width: 62px;}
.visit-website-btn .visit-website-cap:hover span{display: none; opacity: 0;}
.visit-website-btn .visit-website-cap:hover .btn-arr { margin-left: 0; transform: rotate(-1turn); }
/*Other pages section css end here*/
/*Responsive start here*/
@media only screen and (max-width: 1660px) {
.ds-wrap .color-caption .color-dark{width: 40%;}
.ds-wrap .color-caption .color-items{width: 60%;}
}
@media only screen and (max-width: 1440px) {
.ds-wrap .color-caption .color-dark{width: 35%;}
.ds-wrap .color-caption .color-items{width: 65%;}
}
@media only screen and (max-width: 1199px) {
.pf-45 .ctm-container{padding: 0 20px;}
}
@media only screen and (max-width: 1100px) {
.pf-45 .ctm-container{padding: 0; max-width: 92%;}
.sec-heading-wrap { flex-direction: column; align-items: flex-start; gap: 6px; }
.sec-heading-wrap .section-content{max-width: 480px;}
.sec-heading-wrap .sec-heading-text{padding: 0 0 0 40px;}
.sec-heading-wrap .sec-number:after{right: -20px;}
.design-process-wrap{padding: 83px 0 90px 0;}
.design-process-wrap .dp-caption h3{padding:0 0 30px 0;}
.user-persona-wrap .user-card-wrap{padding: 40px 0 0 0;}
.user-persona-wrap{padding: 0 0 110px 0;}
.ia-wrap{padding: 0 0 90px 0;}
.ia-wrap .ia-image{padding: 34px 0 0 0;}
.wireframe-wrap .wireframe-caption{padding: 40px 0 0 0; gap: 15px;}
.wireframe-wrap{padding: 0 0 90px 0;}
.ds-wrap .ds-caption{padding: 40px 0;}
.ds-wrap .color-wrap .tagline{padding: 0 0 21px 0;}
.ds-wrap .color-caption .color-dark{width: 200px;}
.ds-wrap .color-caption .color-items{width:calc(100% - 200px);}
.ds-wrap .color-caption .color-item .color-red, .ds-wrap .color-caption .color-item .color-lightgray, .ds-wrap .color-caption .color-item .color-white, .ds-wrap .color-caption .color-item .color-gray{width: 25%;}
.ds-wrap .font-icon-wrap .if-caption .tagline{padding: 0 0 15px 0;}
.ds-wrap .font-icon-wrap .if-caption{width: 100%;}
.ds-wrap .font-icon-wrap .if-caption img{max-width: 435px;}
.ds-wrap .font-icon-wrap .if-caption.icons-image img{max-width: 500px;}
.ds-wrap .color-caption span{font-size: 12px; line-height: 16px; padding: 31px 10px 7px 0;}
.ds-wrap .color-item .color-gray span{ padding: 31px 0px 7px 10px;}
.ds-wrap{padding: 0 0 60px 0;}
.homapage-sec-wrap .sec-heading-wrap{margin-bottom: 30px;}
.homapage-sec-wrap .frame-wrap{max-width: 705px; min-height: 468px;}
.homapage-sec-wrap .video-caption { width: 656px; height: 418px; top: 17px; border-radius: 10px;}
.homapage-sec-wrap .frame-wrap:before{content: inherit;}
.homapage-sec-wrap{padding: 0 0 40px 0;}
.mobile-res-wrap .sec-heading-wrap{margin-bottom: 40px;}
.tab-show{display: block !important;}
.mobile-res-wrap .mobile-screen-caption{display: none;}
.mobile-res-wrap .swiper-mob-res-main{max-width: 768px; margin: 0 auto;}
.mobile-res-wrap .mob-scroll-img { width: 297px; height: 582px; top: 13px; }
.mobile-res-wrap .mob-scroll-frm:before { width: 138px; height: 36px; top: 10px; }
.mobile-res-wrap .swiper-slide:not(.swiper-slide-active){opacity: 0.3; pointer-events: none;}
.mobile-res-wrap .scrolll-content{padding: 20px 0 0 0;}
.mobile-res-wrap{padding: 0 0 90px 0;}
.our-services-wrap .our-services-caption:before{content: inherit;}
.our-services-wrap .our-services-caption{height: 100%; border-radius: 22px; max-width: 705px;}
.our-services-wrap .our-services-caption video{border-radius: 22px;}
.our-services-wrap{padding: 0 0 90px 0;}
.dimensional-wrap .sec-heading-wrap{margin-bottom: 50px;}
.dimensional-wrap .dimensional-caption{row-gap: 30px; max-width: 552px;}
.dimensional-caption .dimensional-items{width: calc(100% / 2 - 50px);}
.dimensional-items .image-info img{left: 50%; transform: translate(-50%, -50%);}
.dimensional-wrap{padding: 0 0 90px 0;}
.anim-slider-wrap .sec-heading-wrap{margin: 0 0 40px 0;}
.anim-slider-wrap .anim-slider-caption{max-width:580px;}
.anim-slider-wrap .carousel{min-height: 305px; margin-bottom: 43px;}
.anim-slider-wrap .carousel_item{height: 305px;}
.anim-slider-wrap{padding: 0 0 90px 0;}
.illustrations-wrap .sec-heading-wrap{margin-bottom: 30px;}
.illustrations-wrap .illustrations-caption { max-width: 595px; margin: 0 auto; gap: 20px;}
.illustrations-wrap .illustration-items{width: 100%;}
.illustrations-wrap .illustration-items:first-child, .illustrations-wrap .illustration-items:nth-child(2){margin: 0 0 50px 0;}
.illustrations-wrap{padding: 0 0 130px 0;}
.otherpage-wrap{padding: 60px 0 90px 0;}
.otherpage-wrap .otherpage-caption h3{margin-bottom: 50px;}
.otherpage-wrap .otherpage-main{height:227px; width: calc(420px * (var(--total-marquee-items)));}
.otherpage-wrap .otherpage-first-caption span{gap: 14px; padding: 0 7px;}
.otherpage-wrap .otherpage-main-last{margin: 20px 0 60px 0;}
.visit-website-btn{width: 250px;}
.visit-website-btn .visit-website-cap{height: 46px; padding: 0 30px; font-size: 14px;}
.visit-website-btn .visit-website-cap:hover:before{width: 46px;}
.visit-website-btn .visit-website-cap .btn-arr{display: inline-flex;}
}
@media only screen and (max-width: 991px) {
.user-persona-wrap .user-card-wrap{flex-direction: column;}
.user-persona-wrap .user-card-item{width: 100%; max-width: 380px; margin: 0 auto;}
}
@media only screen and (max-width: 850px) {
.wireframe-wrap .wireframe-caption{gap: 12px;}
.ds-wrap .color-caption .color-dark{width: 150px;}
.ds-wrap .color-caption .color-items{width:calc(100% - 150px);}
}
@media only screen and (max-width: 767px) {
.wireframe-wrap .wireframe-caption{gap: 10px;}
.ds-wrap .color-caption .color-dark{width: 120px;}
.ds-wrap .color-caption .color-items{width:calc(100% - 120px);}
.homapage-sec-wrap .frame-wrap { max-width: 422px; min-height: 280px; }
.homapage-sec-wrap .video-caption { width: 394px; height: 250px; top: 10px; border-radius: 8px;}
.mobile-res-wrap .swiper-mob-res-main{max-width: 600px;}
.mobile-res-wrap .mob-scroll-frm{min-height: 513px;}
.mobile-res-wrap .mob-scroll-frm:before { width: 122px; height: 30px; top: 2px; border-radius: 0 0 14px 14px; }
.mobile-res-wrap .mob-scroll-img { width: 258px; height: 504px; top: 4px; border-radius: 24px; }
.mobile-res-wrap .ctm-slider-btn .button-next{right: -145px;}
.mobile-res-wrap .ctm-slider-btn .button-prev{left: -145px;}
.our-services-wrap .our-services-caption{max-width: 422px;}
.visit-website-btn{width: 228px;}
.visit-website-btn .visit-website-cap{height: 44px; padding: 0 26px; font-size: 14px;}
.visit-website-btn .visit-website-cap:hover:before{width: 44px;}
}
@media only screen and (max-width: 600px) {
.pf-45 .ctm-container{max-width: 88%;}
.mobile-res-wrap .swiper-mob-res-main{max-width: 480px;}
.mobile-res-wrap .mob-scroll-frm{min-height: 401px;}
.mobile-res-wrap .mob-scroll-frm:before { width: 96px; height: 23px;}
.mobile-res-wrap .mob-scroll-img { width: 200px; height: 394px; top: 3px; border-radius: 18px; }
.mobile-res-wrap .ctm-slider-btn .button-next{right: -120px;}
.mobile-res-wrap .ctm-slider-btn .button-prev{left: -120px;}
.anim-slider-wrap .anim-slider-caption{max-width: 420px;}
.anim-slider-wrap .carousel_item{height:220px;}
.anim-slider-wrap .carousel{min-height: 220px;}
.sec-heading-wrap .sec-heading-text .sec-tag{padding: 0 0 5px 0;}
.sec-heading-wrap .sec-heading-text h3{font-size: 20px; line-height: 24px;}
}
@media only screen and (max-width: 479px) {
.mob-show{display: block !important;}
.mob-hide{display: none !important;}
.design-process-wrap{padding: 90px 0 70px 0; overflow: hidden;}
.design-process-wrap .dp-caption h3{padding: 0 0 36px 0; font-size:22px; line-height: 30px;}
.design-process-wrap .dp-caption .process-img { width: calc(100% + 6%); overflow-y: hidden; padding: 0 6% 0 0; }
.design-process-wrap .dp-caption .process-img img{min-width: 688px;}
.sec-heading-wrap{gap: 10px;}
.sec-heading-wrap .sec-number{width: 48px; height: 53px; padding: 9px 0 5px 0;}
.sec-heading-wrap .sec-number img{width: 100%;}
.sec-heading-wrap .sec-number:after{right:-14px; height: 36px;}
.sec-heading-wrap .sec-heading-text{padding: 0 0 0 28px;}
.sec-heading-wrap .sec-heading-text .sec-tag, .user-persona-heading .sec-heading-text .sec-tag{font-size: 9px; line-height: 10px; padding: 0 0 4px 0;}
.sec-heading-wrap .sec-heading-text h3{font-size: 18px; line-height: 20px;}
.user-persona-wrap{padding: 0 0 70px 0;}
.user-persona-wrap .user-card-wrap{padding: 30px 0 0 0;}
.user-persona-wrap .sec-heading-wrap .sec-number img{max-width: 40px;}
.ia-wrap{padding: 0 0 70px 0;}
.ia-wrap .ia-image{padding: 20px 6% 0 0; width: calc(100% + 6%); overflow-y: hidden;}
.ia-wrap .ia-image img{min-width: 682px;}
.wireframe-wrap{padding: 0 0 70px 0;}
.wireframe-wrap .wireframe-caption{padding: 20px 0 0 0;}
.wireframe-wrap .wireframe-caption{gap: 15px;}
.wireframe-wrap .wireframe-item{width: 100%;}
.ds-wrap .ds-caption{padding: 14px 0 20px 0;}
.ds-wrap .color-wrap .tagline{padding: 0 0 9px 0;}
.ds-wrap .color-caption span{font-size: 6px; line-height: 7px; padding: 15px 4px 4px 0;}
.ds-wrap .color-item .color-gray span{padding: 15px 0px 4px 4px;}
.ds-wrap .color-caption .color-dark{width: 60px;}
.ds-wrap .color-caption .color-items{width: calc(100% - 60px);}
.ds-wrap .tagline{font-size: 10px; line-height: 16px;}
.ds-wrap .font-icon-wrap .if-caption img{max-width: 241px;}
.ds-wrap{padding: 0 0 70px 0;}
.homapage-sec-wrap{padding: 0 0 45px 0;}
.homapage-sec-wrap .sec-heading-wrap{margin-bottom: 24px;}
.homapage-sec-wrap .frame-wrap { max-width: 100%; min-height: 265px; }
.homapage-sec-wrap .frame-wrap:after{background-size: 100% 100%;}
.homapage-sec-wrap .video-caption { width: calc(100% - 28px); height: calc(265px - 26px); top: 8px; }
.mobile-res-wrap{padding: 0 0 70px 0;}
.mobile-res-wrap .sec-heading-wrap{margin-bottom: 30px;}
.mobile-res-wrap .swiper-mob-res-main{max-width: 360px;}
.mobile-res-wrap .mob-scroll-frm{min-height: 370px;}
.mobile-res-wrap .mob-scroll-frm:before { width: 88px; height: 21px; border-radius: 0 0 12px 12px; }
.mobile-res-wrap .mob-scroll-img { width: 185px; height: 363px; top: 3px; border-radius: 18px; }
.mobile-res-wrap .ctm-slider-btn .button-slider{width: 38px; height: 38px;}
.mobile-res-wrap .ctm-slider-btn .button-next{right: -100px;}
.mobile-res-wrap .ctm-slider-btn .button-prev{left: -100px;}
.mobile-res-wrap .scrolll-content{padding: 30px 0 0 0;}
.our-services-wrap{padding: 0 0 70px 0;}
.our-services-wrap .sec-heading-wrap{margin-bottom: 24px;}
.our-services-wrap .our-services-caption{ /* max-width: 316px; */ border-radius: 10px;}
.our-services-wrap .our-services-caption video{border-radius: 10px;}
.dimensional-wrap{padding: 0 0 70px 0;}
.dimensional-wrap .sec-heading-wrap .sec-number.icons-heading{width: 60px;}
.dimensional-wrap .sec-heading-wrap{margin-bottom: 46px;}
.dimensional-wrap .dimensional-caption{row-gap:20px; column-gap:40px;}
.dimensional-caption .dimensional-items{width: calc(100% / 2 - 20px);}
.dimensional-items .image-info { height: 110px; margin: 0 auto; margin-bottom: 14px; }
.dimensional-caption .dimensional-items h5{padding: 2px 0 0 0; font-size: 9px; line-height: 12px;}
.anim-slider-wrap{padding: 0 0 70px 0;}
.anim-slider-wrap .sec-heading-wrap{margin:0 0 30px 0;}
.anim-slider-wrap .anim-slider-caption{max-width: 100%; padding-top: 40px;}
.anim-slider-wrap .carousel{min-height:217px; margin-bottom: 19px;}
.anim-slider-wrap .carousel_item{height: 100%; border-radius: 14px;}
.anim-slider-wrap .carousel_item:nth-child(2){top: -13px;}
.anim-slider-wrap .carousel_item:nth-child(3){top: -26px;}
.anim-slider-wrap .carousel_item:nth-child(4){top: -39px;}
.anim-slider-wrap .carousel_item video{border-radius: 12px; height: auto;}
.anim-slider-wrap .controls { padding: 8px 15px; gap: 15px; max-width: 68px; height: 33px; }
.anim-slider-wrap .controls button{width: 11px; height:17px;}
.anim-slider-wrap .controls button svg{width: 100%;}
.anim-slider-wrap .count-slide{bottom: 8px;}
.anim-slider-wrap .count-slide span{font-size: 12px; line-height: 14px;}
.illustrations-wrap{padding: 0 0 80px 0;}
.illustrations-wrap .sec-heading-wrap{margin-bottom: 20px;}
.illustrations-wrap .illustration-items{border-radius: 0px;}
.illustrations-wrap .illustration-items:first-child, .illustrations-wrap .illustration-items:nth-child(2){margin: 0 0 20px 0;}
.illustrations-wrap .illustration-items video{border-radius: 14px;}
.otherpage-wrap{padding: 40px 0 70px 0;}
.otherpage-wrap .otherpage-caption h3{margin-bottom: 30px; font-size: 26px; line-height: 28px; font-weight: 400;}
.otherpage-wrap .otherpage-main{height:211px; width: calc(390px * (var(--total-marquee-items)));}
.otherpage-wrap .otherpage-first-caption span{gap: 14px; padding: 0 7px;}
.otherpage-wrap .otherpage-main-last{margin: 12px 0 48px 0;}
.visit-website-btn{width: 205px;}
.visit-website-btn .visit-website-cap { padding: 0 34px; height: 38px; font-size: 12px; line-height: 16px; }
.visit-website-btn .visit-website-cap span{line-height:11px; white-space: nowrap;}
.visit-website-btn .visit-website-cap .btn-arr{margin-left: 10px; display: inline-flex;}
.visit-website-btn .visit-website-cap .btn-arr svg{width: 12px;}
.visit-website-btn .visit-website-cap:hover:before{width: 38px;}
}
@media only screen and (max-width: 430px) {
.homapage-sec-wrap .frame-wrap{min-height:220px;}
.homapage-sec-wrap .video-caption{width: calc(100% - 24px); height: calc(220px - 24px);}
.anim-slider-wrap .carousel{min-height:198px;}
}
@media only screen and (max-width: 410px) {
.sec-heading-wrap .sec-heading-text h3{font-size: 15px; line-height: 18px;}
.homapage-sec-wrap .video-caption{width: calc(100% - 22px);}
.anim-slider-wrap .carousel{min-height:185px;}
}
@media only screen and (max-width: 375px) {
.homapage-sec-wrap .frame-wrap{min-height:190px;}
.homapage-sec-wrap .video-caption { width: calc(100% - 22px); height: calc(190px - 22px); }
.anim-slider-wrap .carousel{min-height:173px;}
}
@media only screen and (max-width: 359px) {
.homapage-sec-wrap .frame-wrap { min-height: 180px; }
.homapage-sec-wrap .video-caption { width: calc(100% - 20px); height: calc(180px - 22px);}
.mobile-res-wrap .swiper-mob-res-main{max-width: 320px;}
.mobile-res-wrap .mob-scroll-frm{min-height:327px;}
.mobile-res-wrap .mob-scroll-frm:before{width: 80px; height: 19px;}
.mobile-res-wrap .mob-scroll-img { width: 163px; height: 321px; top: 3px; border-radius: 14px; }
.mobile-res-wrap .ctm-slider-btn .button-next{right: -88px;}
.mobile-res-wrap .ctm-slider-btn .button-prev{left: -88px;}
.anim-slider-wrap .carousel{min-height: 148px;}
.anim-slider-wrap .carousel_item{height: 148px;}
.dimensional-wrap .sec-heading-wrap .sec-number.icons-heading{width: 56px;}
.sec-heading-wrap .sec-number{width: 44px; height: 49px;}
.sec-heading-wrap .sec-heading-text{padding: 0 0 0 20px;}
.sec-heading-wrap .sec-heading-text h3{font-size: 14px; line-height: 16px;}
.sec-heading-wrap .sec-number:after{right: -11px;}
.anim-slider-wrap .carousel{min-height:152px;}
}
/*Responsive end here*/