/*initialy overlay css start*/ #pageOverlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #f0f0f0;transform: translateY(100%);transition: opacity 0.5s ease;}.loaded #pageOverlay {animation: slideUp 0.9s forwards;}.page-allcontents {opacity: 0;transition: opacity 0.5s;}.page-allcontents.visible {opacity: 1;} @keyframes slideUp {0% {transform: translateY(100%);}100% {transform: translateY(0);}} /*--//--*/ body{margin:0px;padding:0px;font-family: 'BDO Grotesk'!important;color:#636466!important;overflow-x: hidden;scroll-behavior: smooth;overflow-y:hidden;} @font-face {font-family: 'BDO Grotesk';src: url('fonts/BDOGrotesk-Light.woff2') format('woff2'),url('fonts/BDOGrotesk-Light.woff') format('woff');font-weight: 300;font-style: normal;font-display: swap;} @font-face {font-family: 'BDO Grotesk';src: url('fonts/BDOGrotesk-Regular.woff2') format('woff2'),url('fonts/BDOGrotesk-Regular.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;} @font-face {font-family: 'BDO Grotesk';src: url('fonts/BDOGrotesk-Medium.woff2') format('woff2'),url('fonts/BDOGrotesk-Medium.woff') format('woff');font-weight: 500;font-style: normal;font-display: swap;} @font-face {font-family: 'BDO Grotesk';src: url('fonts/BDOGrotesk-DemiBold.woff2') format('woff2'),url('fonts/BDOGrotesk-DemiBold.woff') format('woff');font-weight: 600;font-style: normal;font-display: swap;} @font-face {font-family: 'BDO Grotesk';src: url('fonts/BDOGrotesk-Bold.woff2') format('woff2'),url('fonts/BDOGrotesk-Bold.woff') format('woff');font-weight: 700;font-style: normal;font-display: swap;} @font-face {font-family: 'BDO Grotesk';src: url('fonts/BDOGrotesk-ExtraBold.woff2') format('woff2'),url('fonts/BDOGrotesk-ExtraBold.woff') format('woff');font-weight: 700;font-style: normal;font-display: swap;} @font-face {font-family: 'BDO Grotesk';src: url('fonts/BDOGrotesk-ExtraBold.woff2') format('woff2'),url('fonts/BDOGrotesk-ExtraBold.woff') format('woff');font-weight: 800;font-style: normal;font-display: swap;} @font-face {font-family: 'BDO Grotesk';src: url('fonts/BDOGrotesk-Black.woff2') format('woff2'),url('fonts/BDOGrotesk-Black.woff') format('woff');font-weight: 900;font-style: normal;font-display: swap;} /*preloader css start*/ #preloader {position: fixed;left: 0;top: 0;width: 100%;height: 100%;background-color: #fff; z-index:100000;display:flex;justify-content: center;align-items: center;}#preloader h6{letter-spacing: 1px;margin-top: -20px;position: relative;font-weight: 400;} /*--//--*/ /*common css code start*/ .main-padding{padding:100px;}.padding-lr{padding-right:100px;padding-left:100px;}.text-grey {color:#636466;} /*secton heading css code start*/ h2.section-heading{font-size:70px!important;} /*--//--*/ /*font weight css code start*/ .fw-300{font-weight:300!important;}.fw-500{font-weight:500!important;}.fw-600{font-weight:600!important;}.fw-900{font-weight:900!important;} /*--//--*/ /*title css code start*/ .title span{font-size:34px;} /*--//--*/ /*button css code start*/ .custom-btn{padding:8px 20px;line-height:1!important;font-size:14px;color:#636466;border:1px solid #636466;background: linear-gradient(to right, #bb1d80 50%, transparent 50%)!important;background-size: 201% 100%!important;background-position: right bottom!important;transition: all .3s ease-out;}.custom-btn.click-here{padding:9.8px 15px;}.custom-btn:hover{background-position:left bottom!important;border-color:#bb1d80;color:#FFF;}.custom-btn img{width:8px;}.custom-btn:hover img {filter:invert(99%) sepia(100%) saturate(0%) hue-rotate(140deg) brightness(150%) contrast(104%);} /*--//--*/ /*common css code end*/ /*logo css code start*/ .logo a{color:#FFF!important;} /*--//--*/ /*menu css coede start*/ .menu .navbar{font-family: 'BDO Grotesk';}.navbar-nav{column-gap:50px;}.navbar-nav li a{color:#636466!important;font-size:22px;cursor:pointer;}.navbar-nav li a:hover{color:#bb1d80 !important;}.navbar-nav li a:after{transition: width 0.3s;content:'';display:block;width:0px;height:2px;background:#bb1d80;position:absolute;}.navbar-nav li a:hover:after{content:'';display:block;width:100%;height:2px;background:#bb1d80;position:absolute;} /*--//--*/ /*social share css code start*/ .float-social-icons {z-index:10000 !important;bottom:3%;right:1%;transition: all 0.5s ease-in-out;} @keyframes mymove {0% {opacity:0;transform:translateY(100px) translateX(50%);}100% {opacity:1;transform:translateY(0px) translateX(50%);}} .float-social-icons.scrollY{bottom:3%;right:1.5%; transform: translate(0px, 0px); transition: all 0.5s ease-in-out 0s;} .float-social-icons #desktop-icons {display:grid; transition: 1s all ease-in-out;cursor: pointer;} .float-social-icons.scrollY #desktop-icons {transition: 1s all ease-in-out;bottom:3%;} .float-social-icons.scrollY #desktop-icons a {position: relative;right: 0;bottom: 0; transition: 1s all ease-in-out;} /* .float-social-icons.scrollY #desktop-icons.aaaaaaaaaaaaaa {display:grid; transition: 1s all ease-in-out;} .float-social-icons.scrollY #desktop-icons.aaaaaaaaaaaaaa a {position: relative;transition: 1s all ease-in-out;} */ .float-social-icons a {color:#636466;background: #fff;border-radius:25px;text-align:center;text-decoration:none;position: relative;display: flex;width:35px;height:35px;padding-top:2.5px;margin:0 2px;-o-transition:all .5s;-webkit-transition: all .5s;-moz-transition: all .5s;transition: all .5s;-webkit-font-smoothing: antialiased;border:1.2px solid #636466 !important;cursor: pointer;justify-content: center;align-items: center;} .float-social-icons a:hover {background:#bb1d80;color:#fff !important;border:1.1px solid #636466 !important;} .float-social-icons a i {cursor: pointer;} /*--//--*/ /*sticky header css code start*/ header{margin-top:-75px; padding:10px 50px;z-index:1;} .sticky-menu header{margin-top:0px;animation: mymove2 0.5s;visibility:visible;z-index:10000;} .menu-bar{gap:0.25rem;animation: menubarbottomtop 0.5s;cursor:pointer;padding: 0.94rem 0.4rem;border: 1px solid #636466;} /*menu 3dot icon transtition and menu show css start*/ #menu-icon.active {display:block !important;position: relative;padding:0.94rem 0.98rem;z-index:10000;} #menu-icon.active .dot:nth-child(1) {border-radius:0;height:2px;width:18px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(45deg) scale(1.2);transition: transform 0.9s ease, opacity 0.9s ease;margin:0;} #menu-icon.active .dot:nth-child(2) {opacity: 0;} #menu-icon.active .dot:nth-child(3) {border-radius:0;height:2px;width:18px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(-45deg) scale(1.2); transition: transform 0.9s ease, opacity 0.9s ease;margin:0;} #mobile-menu {position: absolute;top: 10px;right: 10px;background-color: #fff;color: #333;border-radius: 4px;box-shadow: 0 2px 5px rgba(0,0,0,0.2);z-index: 1000;padding:3rem 7.5rem 2rem 2rem !important;border-radius: 15px;line-height: 2rem;opacity: 0;transform: scale(0.5) ;transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;visibility: hidden;} #mobile-menu a {position:relative;width:fit-content;cursor:pointer;} #mobile-menu a:hover {color:#bb1d80 !important;} #mobile-menu a:hover:after{width:100%;} #mobile-menu a::after { content: '';transition: width 0.3s;content: '';display: block;width: 0px;height: 2px;background: #bb1d80;position: absolute;bottom:10%;} #mobile-menu.show {opacity: 1;visibility: visible;transform: scale(1);transition: opacity 0.5s ease, transform 0.5s ease-in-out, visibility 0.5s ease-in-out;} #mobile-menu.show a {animation: slideIn 0.5s ease forwards;transform: translateX(100%);opacity: 0;} #mobile-menu.show a:nth-child(1) {animation-delay: 0.4s;} #mobile-menu.show a:nth-child(2) {animation-delay: 0.5s;} #mobile-menu.show a:nth-child(3) {animation-delay: 0.6s;} #mobile-menu.show a:nth-child(4) {animation-delay: 0.7s;} #mobile-menu.show a:nth-child(5) {animation-delay: 0.8s;} #mobile-menu.show a:nth-child(6) {animation-delay: 0.9s;} @keyframes slideIn { from {transform: translateX(100%);opacity: 0;} to {transform: translateX(0);opacity: 1;} } #mobile-menu.closed a {animation: slideOut 0.5s ease forwards;} #mobile-menu.closed a:nth-child(1) {animation-delay: 0.15s;} #mobile-menu.closed a:nth-child(2) {animation-delay: 0.14s;} #mobile-menu.closed a:nth-child(3) {animation-delay: 0.13s;} #mobile-menu.closed a:nth-child(4) {animation-delay: 0.12s;} #mobile-menu.closed a:nth-child(5) {animation-delay: 0.11s;} #mobile-menu.closed a:nth-child(6) {animation-delay: 0.1s;} @keyframes slideOut { from {transform: translateX(0);opacity: 1;} to {transform: translateX(100%);opacity:0;} } /*--//--*/ .menu-bar span{width:5px;height:5px;background:#636466;border-radius:50%;display:flex;justify-content:center;align-items:center;} .menu-bar-active span{transition: all .3s ease-out;content:'';width:5px;height:5px;border-radius:50px;position:relative;} .menu-bar-active span:after{content:'';width:5px;height:5px;border-radius:50px;background:#636466;position:absolute;right:0;} .mobile-menu a{cursor:pointer;} .mobile-menu a:hover{color:#bb1d80 !important;} .mobile-menu li a:after{content:'';transition: width 0.3s;content:'';display:block;width:0px;height:2px;background:#bb1d80;position:absolute;} .mobile-menu li a:hover:after{width:100%;} .mobile-menu li{line-height:1;margin-bottom:15px;} .mobile-menu li a{position:relative;} .mobile-menu li:last-child{margin-bottom:0px;} /*--//--*/ /*home page css code start*/ /*landing sec css code start*/ .landing-sec{gap:100px;} .landing-sec .fp-overflow{display:flex;flex-direction:column;height:100%;} body #landing-sec #site-logo {position: absolute;transition:1s all ease-in-out; transform:translateX(-50%) translateY(50%);opacity: 1;left:50%;top:60px;width:150px;} body.scroll10 #landing-sec #site-logo {position: fixed;transform: translateX(20%) translateY(30%);opacity: 1;z-index: 100000;left:5px;top:0px;transition: 1s all ease-in-out;width: 100px;} #site-logo.change-zlogo{width:50px !important;transition: none !important;} /*landing sec css code end*/ /*Pencilz-sec css code start*/ .Pencilz-sec{gap:60px;} .Pencilz-sec img{width:930px;height:100%;} .Pencilz-sec ul{gap:50px;} .Pencilz-sec ul li{gap:8px;} .Pencilz-sec ul li h6{font-size:22px;color:#636466;} .Pencilz-sec ul li img{width:26px;filter:invert(89%) sepia(0%) saturate(591%) hue-rotate(306deg) brightness(87%) contrast(103%);} .Pencilz-sec ul li img:last-child{ -webkit-transform: scaleX(-1); transform: scaleX(-1); } .scribble-down{font-size:20px;gap:10px;position: absolute;bottom:80px;transition: opacity 1s ease;} .scribble-down img{width:30px;opacity:0.7;cursor: pointer;} .scribble-down img:hover{opacity:1;filter: invert(16%) sepia(88%) saturate(2904%) hue-rotate(306deg) brightness(100%) contrast(93%);} .carousel-control-next-icon, .carousel-control-prev-icon {filter:invert(1) !important;cursor: pointer;} #carouselExample button:hover{background:transparent !important;} .carousel-control-next, .carousel-control-prev{width: auto !important;height:fit-content;padding:0 !important;top:50% !important;background:none !important;} .carousel-control-next {right:-35px;} .carousel-control-prev{left:-35px;} #carouselExample .carousel-indicators {display: none;} /*Pencilz-sec css code end*/ /*clientz sec css code start*/ .five-columns-grid {gap:80px;row-gap:50px; display: grid; grid-auto-rows: 1fr; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; } /* .clientz-sec img{filter: invert(25%) sepia(0%) saturate(3586%) hue-rotate(86deg) brightness(88%) contrast(90%);} */ .clientz-section div.row{row-gap:2.5rem;margin-top:4rem;justify-content: space-between;} /* .clientz-section .col {width: 200px;height: 80px;} */ .clientz-section .col img {width: 90%;object-fit: contain;height: 100%;} .clientz-section .col:nth-child(1) img, .clientz-section .col:nth-child(4) img, .clientz-section .col:nth-child(5) img, .clientz-section .col:nth-child(6) img, .clientz-section .col:nth-child(12) img, .clientz-section .col:nth-child(21) img, .clientz-section .col:nth-child(25) img, .clientz-section .col:nth-child(28) img, .clientz-section .col:nth-child(29) img, .clientz-section .col:nth-child(30) img{width: 70%;} .clientz-section .col:nth-child(7) img, .clientz-section .col:nth-child(8) img, .clientz-section .col:nth-child(11) img, .clientz-section .col:nth-child(13) img, .clientz-section .col:nth-child(19) img , .clientz-section .col:nth-child(20) img, .clientz-section .col:nth-child(26) img, .clientz-section .col:nth-child(7) img, .clientz-section .col:nth-child(27) img{width: 55%;} .clientz-section .col:nth-child(3) img, .clientz-section .col:nth-child(15) img, .clientz-section .col:nth-child(3) img {width: 40%;} .pencilz-page .clientz-section .col img.husqvarna-img {width:55px;} /*clientz sec css code end*/ /*join-Dotz sec css code start*/ .join-Dotz-sec h3 {font-size:clamp(3.5rem, 6vw, 5rem);line-height:1.1;} .join-Dotz-sec .button-div button img{width:10px !important;} .join-Dotz-sec .button-div button, .footer-link .button {position: relative;overflow: hidden;height: 3rem;padding: 0 2.5rem !important;border-radius: 1.5rem;border:1.5px solid #3d3a4e !important;background-size: 400% !important;color: #3d3a4e;font-size:16px;} .join-Dotz-sec .button-div button:hover, .footer-link .button:hover {color:#fff;border:1.5px solid #bb1d80 !important;} .join-Dotz-sec .button-div button:hover::before, .footer-link .button:hover::before {transform: scaleX(1);} .join-Dotz-sec .button-div .button-content, .footer-link .button-content{position: relative;z-index: 1;cursor:pointer;} .join-Dotz-sec .button-div button::before,.footer-link .button::before {content: "";position: absolute;top: 0;left: 0;transform: scaleX(0);transform-origin: 0 50%;width: 100%;height: inherit;border-radius: 1.5rem !important;background:#bb1d80;transition: all 0.475s;} /*join-Dotz sec css code end*/ /*print sec css code start*/ .print-sec .custom-btn.click-here {padding:8px 12px;font-size:1rem;} .print-sec .card {position: sticky;top: 3em;transform-origin: center top;margin-bottom: 6rem;} .print-sec .card .parent-div{border-radius:2.5rem;padding:3.5rem;background:#f0f0f0;} .print-sec .card .img-div {height:70vh;} .print-sec .card .img-div video {width:100%;height:100%;object-fit:cover;border-radius:1.5rem;} .print-sec .card .content .print-heading-img{object-fit: contain;} /* .print-sec .card:nth-last-child(1) .content .print-heading-img{width:400px;} */ .print-sec .card .content ul li {border: 2px solid #c0c0c0 !important;font-size:14px;} .print-sec .card .content h6 {font-weight:300;letter-spacing: 1px;line-height: inherit;font-size:20px;} /*print sec css code end*/ /*home page css code end*/ /*scribblezz section css start*/ #scribblez-section {background: no-repeat fixed;background-image: url("images/scribblez-bgimg11.png");background-size: cover;position: relative;background-blend-mode: saturation;color: #fff;background-position:center;transition:2s all linear} #scribblez-section .section.--mask {height: 100vh;display: flex;align-items: center;justify-content: center;overflow: hidden;color: #000000;z-index: 1000;} #scribblez-section #svg-mask {position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100vh;} #scribblez-section #mask {transition: 2s all linear;} .scribblez-zoom-inner .container{margin-top:10rem} .scribblez-zoom-inner .card {border-radius:25px;border:1.5px solid #fff;position: relative;cursor:pointer;} .scribblez-zoom-inner .card .card-header h5{font-weight:400;} .scribblez-zoom-inner .card img {border-radius:25px;width:100% !important;height:600px;object-fit: cover;} .scribblez-zoom-inner .card .arrow-svg{width:35px !important;height: fit-content;border:0;filter:invert(100%) sepia(0%) saturate(7465%) hue-rotate(90deg) brightness(99%) contrast(104%);} .scribblez-zoom-inner .card .card-body h2{top:50%;color:#fff;font-size:3rem !important;letter-spacing:1px;transform:translateY(-60%);font-weight:300;} .scribblez-zoom-inner .card .card-body .buttons-div{bottom:5%;} .scribblez-zoom-inner .card .card-body .buttons-div button{border-radius:25px;background:transparent !important;font-size:0.8rem;padding:0.3em 0.9em;} .scribblez-zoom-inner .sub-cards .card-body h3{top:50% !important;letter-spacing:1px;transform:translateY(-60%);font-weight:300;} .scribblez-zoom-inner .sub-cards .card-body .buttons-div{bottom:5%;} .scribblez-zoom-inner .sub-cards .card .card-body img {border-radius:25px;width:100% !important;height:100%;object-fit: cover;} /* Add overlay styles for card-body */ .scribblez-zoom-inner .card-body {overflow: hidden;} .scribblez-zoom-inner .card-body::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9); opacity: 0;transition: opacity 0.3s ease;pointer-events: none; border-radius:25px;z-index:1;} .scribblez-zoom-inner .card:hover .card-body::before {opacity: 1;} .scribblez-zoom-inner .card-content {display: none;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100%;color: #fff;z-index: 1; } .scribblez-zoom-inner .card:hover .card-content {display: block;} /*scribblez inner page css only color change*/ .scribblez-page.scribblez-zoom-inner .card{border:1.5px solid #000} .scribblez-page.scribblez-zoom-inner .card .card-header h5{color:#000;font-weight:400;} .scribblez-page.scribblez-zoom-inner .card .arrow-svg {filter:invert(19%) sepia(55%) saturate(4003%) hue-rotate(304deg) brightness(92%) contrast(96%);width:35px !important;} .dropdown.scribblez-menu button {padding:0.3rem 1rem !important;} .dropdown.scribblez-menu {z-index: 10000;} .dropdown.scribblez-menu .dropdown-item.active {background-color:#f1f1f1 !important;color: #000;border-radius: 5px;} .dropdown.scribblez-menu button:hover{background: transparent !important;} .dropdown.scribblez-menu .dropdown-menu.show {border-color: #000;border-radius: 15px;} .scribblez-page .scribblez-tabs {top:24px;z-index:10000;right:80px;} .scribblez-page .scribblez-tabs a {color:#fff;font-size:0.9rem;cursor: pointer;} .scribblez-page .scribblez-tabs.scrollY450 a {display: none;} .scribblez-page .scribblez-tabs a span{cursor: pointer;} .scribblez-page .scribblez-tabs a.active span:nth-child(1) {border-bottom: 2.5px solid #bb1d80;padding-bottom:2px;} .hidden {display: none;} .scribblez-zoom-inner #big-card .card-body .child-img1 {width:fit-content !important;height:90%;right:5rem;} .scribblez-zoom-inner #big-card .card-body .child-img2 {width: fit-content !important;height: 45%;transform: translateY(-50%);top: 50%;left: 8rem;} /*--//--*/ @media (max-width: 1497px) { .scribblez-zoom-inner .sub-cards .card-body h3{letter-spacing:1px;} } @media (max-width: 1100px) { .scribblez-page .scribblez-tabs a {font-size:0.75rem;} } @media (max-width: 991px) { .scribblez-zoom-inner .card img {height:400px;} /* .scribblez-zoom-inner .sub-cards .card .card-body img {height:300px;} */ .scribblez-zoom-inner .card .card-body h2{font-size:2rem;} .scribblez-zoom-inner #big-card .card-body .child-img1 {right:auto;} .scribblez-zoom-inner #big-card .card-body .child-img2 {left:4rem;} } @media (max-width: 767px) { #scribblez-section text#inner-mask {font-size:150px;letter-spacing: 1px;} /* .scribblez-zoom-inner .card img, .scribblez-zoom-inner .sub-cards .card .card-body img {height:320px;} */ .scribblez-zoom-inner .card .card-body h2, .scribblez-zoom-inner .sub-cards .card .card-body h3{font-size:1.8rem !important;} .scribblez-zoom-inner .card .card-header h5{font-size:1rem !important;} } @media (max-width: 600px) { .scribblez-zoom-inner .card .card-body h2, .scribblez-zoom-inner .sub-cards .card .card-body h3{font-size:1.5rem !important;} } @media (max-width: 500px) { #scribblez-section text#inner-mask {font-size:105px;} /* .scribblez-zoom-inner .card img,.scribblez-zoom-inner .sub-cards .card .card-body img {height:280px;} */ .scribblez-zoom-inner .card .card-body h2,.scribblez-zoom-inner .sub-cards .card .card-body h3{font-size:1.2rem !important;} .scribblez-zoom-inner .card .arrow-svg{width:30px !important;} .scribblez-page.scribblez-zoom-inner .card .arrow-svg {width:30px !important;} .scribblez-zoom-inner .card .card-body .buttons-div button {font-size:12px;} .dropdown.scribblez-menu button {font-size: 0.8rem;padding:0.3rem 0.6rem !important;} .dropdown.scribblez-menu .dropdown-item{font-size:0.8rem;} } @media (max-width: 450px) { .scribblez-zoom-inner .card .card-body h2 {transform: translateY(-100%);} .scribblez-zoom-inner .sub-cards .card-body h3 {transform: translateY(-100%);} } @media (max-width: 350px) { /* .scribblez-zoom-inner .card img,.scribblez-zoom-inner .sub-cards .card .card-body img {height:250px;} */ .scribblez-zoom-inner .card .card-body h2,.scribblez-zoom-inner .sub-cards .card .card-body h3{font-size:1.1rem !important;} } /*scribblezz section css end*/ /*footer sec css start*/ .join-Dotz-sec{padding-bottom:50px;} .join-Dotz-sec .container{gap:25px;} .footer-logo img{width:90px;} .footer-link ul{gap:40px;} .footer-link ul button{font-size:18px;padding:8px 20px !important;} .footer-link{margin:25px 0;} /*footer sec css end*/ /*wedo page css start*/ :root{ --background:#fff; } .wedo-page h6 {font-size:2rem;} .wedo-page p {font-weight:100;letter-spacing:0.5px;} .wedo-page footer {background-color:#000;margin-top:-1px;} .wedo-page .black-cards {--bs-gutter-x:6.5rem !important;} .wedo-page .black-cards .card {height:460px;width:460px;background-color:#000;border-radius:2rem;position: relative;overflow: hidden;border:1px solid #c0c0c0;} .wedo-page .black-cards .card hr{margin: 2rem 0rem;padding-top: 0.1rem;background: #FFF;} .wedo-page .black-cards .card:hover {border:1px solid #c0c0c0;} .wedo-page .black-cards .card:hover .overlay {top: 0;} .wedo-page .black-cards .card .overlay h6{color: #636466;} .wedo-page .black-cards .card .overlay hr{margin-bottom:0rem;border-top:2.5px solid #000;margin-top:1rem;} .wedo-page .black-cards .card .overlay {position:absolute; background:rgba(0,0,0,.5);left:0; top: 100%;width:100%; height:100%;z-index: 1;transition:all 0.3s cubic-bezier(0, 0, 0.2, 1);background:#fff;border-radius:2rem;} .wedo-page .black-cards .col:nth-child(odd) .card .overlay { box-shadow:inset -3px 3px 0 -1px var(--background), inset -3px 3px rgba(0, 0, 0, 0.25), inset -6px 6px 0 -1px var(--background), inset -6px 6px rgba(0, 0, 0, 0.24), inset -9px 9px 0 -1px var(--background), inset -9px 9px rgba(0, 0, 0, 0.23), inset -12px 12px 0 -1px var(--background), inset -12px 12px rgba(0, 0, 0, 0.22), inset -15px 15px 0 -1px var(--background), inset -15px 15px rgba(0, 0, 0, 0.21), inset -18px 18px 0 -1px var(--background), inset -18px 18px rgba(0, 0, 0, 0.20), inset -21px 21px 0 -1px var(--background), inset -21px 21px rgba(0, 0, 0, 0.19), inset -24px 24px 0 -1px var(--background), inset -24px 24px rgba(0, 0, 0, 0.18), inset -27px 27px 0 -1px var(--background), inset -27px 27px rgba(0, 0, 0, 0.17), inset -30px 30px 0 -1px var(--background), inset -30px 30px rgba(0, 0, 0, 0.16), inset -33px 33px 0 -1px var(--background), inset -33px 33px rgba(0, 0, 0, 0.15), inset -36px 36px 0 -1px var(--background), inset -36px 36px rgba(0, 0, 0, 0.14), inset -39px 39px 0 -1px var(--background), inset -39px 39px rgba(0, 0, 0, 0.13), inset -42px 42px 0 -1px var(--background), inset -42px 42px rgba(0, 0, 0, 0.12), inset -45px 45px 0 -1px var(--background), inset -45px 45px rgba(0, 0, 0, 0.11), inset -48px 48px 0 -1px var(--background), inset -48px 48px rgba(0, 0, 0, 0.10), inset -51px 51px 0 -1px var(--background), inset -51px 51px rgba(0, 0, 0, 0.09), inset -54px 54px 0 -1px var(--background), inset -54px 54px rgba(0, 0, 0, 0.08), inset -57px 57px 0 -1px var(--background), inset -57px 57px rgba(0, 0, 0, 0.07), inset -60px 60px 0 -1px var(--background), inset -60px 60px rgba(0, 0, 0, 0.06),inset -63px 63px 0 -1px var(--background), inset -63px 63px rgba(0, 0, 0, 0.05),inset -66px 66px 0 -1px var(--background), inset -66px 66px rgba(0, 0, 0, 0.04),inset -69px 69px 0 -1px var(--background), inset -69px 69px rgba(0, 0, 0, 0.03),inset -72px 72px 0 -1px var(--background), inset -72px 72px rgba(0, 0, 0, 0.02),inset -75px 75px 0 -1px var(--background), inset -75px 75px rgba(0, 0, 0, 0.01);} .wedo-page .black-cards .col:nth-child(even) .card .overlay { box-shadow:inset 3px 3px 0 -1px var(--background), inset 3px 3px rgba(0, 0, 0, 0.25), inset 6px 6px 0 -1px var(--background), inset 6px 6px rgba(0, 0, 0, 0.24), inset 9px 9px 0 -1px var(--background), inset 9px 9px rgba(0, 0, 0, 0.23), inset 12px 12px 0 -1px var(--background), inset 12px 12px rgba(0, 0, 0, 0.22), inset 15px 15px 0 -1px var(--background), inset 15px 15px rgba(0, 0, 0, 0.21), inset 18px 18px 0 -1px var(--background), inset 18px 18px rgba(0, 0, 0, 0.20), inset 21px 21px 0 -1px var(--background), inset 21px 21px rgba(0, 0, 0, 0.19), inset 24px 24px 0 -1px var(--background), inset 24px 24px rgba(0, 0, 0, 0.18), inset 27px 27px 0 -1px var(--background), inset 27px 27px rgba(0, 0, 0, 0.17), inset 30px 30px 0 -1px var(--background), inset 30px 30px rgba(0, 0, 0, 0.16), inset 33px 33px 0 -1px var(--background), inset 33px 33px rgba(0, 0, 0, 0.15), inset 36px 36px 0 -1px var(--background), inset 36px 36px rgba(0, 0, 0, 0.14), inset 39px 39px 0 -1px var(--background), inset 39px 39px rgba(0, 0, 0, 0.13), inset 42px 42px 0 -1px var(--background), inset 42px 42px rgba(0, 0, 0, 0.12), inset 45px 45px 0 -1px var(--background), inset 45px 45px rgba(0, 0, 0, 0.11), inset 48px 48px 0 -1px var(--background), inset 48px 48px rgba(0, 0, 0, 0.10), inset 51px 51px 0 -1px var(--background), inset 51px 51px rgba(0, 0, 0, 0.09), inset 54px 54px 0 -1px var(--background), inset 54px 54px rgba(0, 0, 0, 0.08), inset 57px 57px 0 -1px var(--background), inset 57px 57px rgba(0, 0, 0, 0.07), inset 60px 60px 0 -1px var(--background), inset 60px 60px rgba(0, 0, 0, 0.06),inset 63px 63px 0 -1px var(--background), inset 63px 63px rgba(0, 0, 0, 0.05),inset 66px 66px 0 -1px var(--background), inset 66px 66px rgba(0, 0, 0, 0.04),inset 69px 69px 0 -1px var(--background), inset 69px 69px rgba(0, 0, 0, 0.03),inset 72px 72px 0 -1px var(--background), inset 72px 72px rgba(0, 0, 0, 0.02),inset 75px 75px 0 -1px var(--background), inset 75px 75px rgba(0, 0, 0, 0.01);} .wedo-page .black-cards .col:nth-child(odd) .card{ box-shadow: -3px 3px 0 -1px var(--background), -3px 3px rgba(0, 0, 0, 0.60), -6px 6px 0 -1px var(--background), -6px 6px rgba(0, 0, 0, 0.58), -9px 9px 0 -1px var(--background), -9px 9px rgba(0, 0, 0, 0.56), -12px 12px 0 -1px var(--background), -12px 12px rgba(0, 0, 0, 0.54), -15px 15px 0 -1px var(--background), -15px 15px rgba(0, 0, 0, 0.52), -18px 18px 0 -1px var(--background), -18px 18px rgba(0, 0, 0, 0.50), -21px 21px 0 -1px var(--background), -21px 21px rgba(0, 0, 0, 0.48), -24px 24px 0 -1px var(--background), -24px 24px rgba(0, 0, 0, 0.46), -27px 27px 0 -1px var(--background), -27px 27px rgba(0, 0, 0, 0.44), -30px 30px 0 -1px var(--background), -30px 30px rgba(0, 0, 0, 0.42), -33px 33px 0 -1px var(--background), -33px 33px rgba(0, 0, 0, 0.40), -36px 36px 0 -1px var(--background), -36px 36px rgba(0, 0, 0, 0.38), -39px 39px 0 -1px var(--background), -39px 39px rgba(0, 0, 0, 0.36), -42px 42px 0 -1px var(--background), -42px 42px rgba(0, 0, 0, 0.34), -45px 45px 0 -1px var(--background), -45px 45px rgba(0, 0, 0, 0.32), -48px 48px 0 -1px var(--background), -48px 48px rgba(0, 0, 0, 0.30), -51px 51px 0 -1px var(--background), -51px 51px rgba(0, 0, 0, 0.28), -54px 54px 0 -1px var(--background), -54px 54px rgba(0, 0, 0, 0.26), -57px 57px 0 -1px var(--background), -57px 57px rgba(0, 0, 0, 0.24), -60px 60px 0 -1px var(--background), -60px 60px rgba(0, 0, 0, 0.22), -63px 63px 0 -1px var(--background), -63px 63px rgba(0, 0, 0, 0.20), -66px 66px 0 -1px var(--background), -66px 66px rgba(0, 0, 0, 0.18), -69px 69px 0 -1px var(--background), -69px 69px rgba(0, 0, 0, 0.16), -72px 72px 0 -1px var(--background), -72px 72px rgba(0, 0, 0, 0.14), -75px 75px 0 -1px var(--background), -75px 75px rgba(0, 0, 0, 0.12), -78px 78px 0 -1px var(--background), -78px 78px rgba(0, 0, 0, 0.10), -81px 81px 0 -1px var(--background), -81px 81px rgba(0, 0, 0, 0.08), -84px 84px 0 -1px var(--background), -84px 84px rgba(0, 0, 0, 0.06), -87px 87px 0 -1px var(--background), -87px 87px rgba(0, 0, 0, 0.04), -90px 90px 0 -1px var(--background), -90px 90px rgba(0, 0, 0, 0.02),-93px 93px 0 -1px var(--background), -93px 93px rgba(0, 0, 0, 0.01),-96px 96px 0 -1px var(--background), -96px 96px rgba(0, 0, 0, 0.01),-99px 99px 0 -1px var(--background), -99px 99px rgba(0, 0, 0, 0.01),-102px 102px 0 -1px var(--background), -102px 102px rgba(0, 0, 0, 0.01),-105px 105px 0 -1px var(--background), -105px 105px rgba(0, 0, 0, 0.01);} .wedo-page .black-cards .col:nth-child(even) .card {margin-top:12.5rem; box-shadow: 3px 3px 0 -1px var(--background), 3px 3px rgba(0, 0, 0, 0.60), 6px 6px 0 -1px var(--background), 6px 6px rgba(0, 0, 0, 0.58), 9px 9px 0 -1px var(--background), 9px 9px rgba(0, 0, 0, 0.56), 12px 12px 0 -1px var(--background), 12px 12px rgba(0, 0, 0, 0.54), 15px 15px 0 -1px var(--background), 15px 15px rgba(0, 0, 0, 0.52), 18px 18px 0 -1px var(--background), 18px 18px rgba(0, 0, 0, 0.50), 21px 21px 0 -1px var(--background), 21px 21px rgba(0, 0, 0, 0.48), 24px 24px 0 -1px var(--background), 24px 24px rgba(0, 0, 0, 0.46), 27px 27px 0 -1px var(--background), 27px 27px rgba(0, 0, 0, 0.44), 30px 30px 0 -1px var(--background), 30px 30px rgba(0, 0, 0, 0.42), 33px 33px 0 -1px var(--background), 33px 33px rgba(0, 0, 0, 0.40), 36px 36px 0 -1px var(--background), 36px 36px rgba(0, 0, 0, 0.38), 39px 39px 0 -1px var(--background), 39px 39px rgba(0, 0, 0, 0.36), 42px 42px 0 -1px var(--background), 42px 42px rgba(0, 0, 0, 0.34), 45px 45px 0 -1px var(--background), 45px 45px rgba(0, 0, 0, 0.32), 48px 48px 0 -1px var(--background), 48px 48px rgba(0, 0, 0, 0.30), 51px 51px 0 -1px var(--background), 51px 51px rgba(0, 0, 0, 0.28), 54px 54px 0 -1px var(--background), 54px 54px rgba(0, 0, 0, 0.26), 57px 57px 0 -1px var(--background), 57px 57px rgba(0, 0, 0, 0.24), 60px 60px 0 -1px var(--background), 60px 60px rgba(0, 0, 0, 0.22), 63px 63px 0 -1px var(--background), 63px 63px rgba(0, 0, 0, 0.20), 66px 66px 0 -1px var(--background), 66px 66px rgba(0, 0, 0, 0.18), 69px 69px 0 -1px var(--background), 69px 69px rgba(0, 0, 0, 0.16), 72px 72px 0 -1px var(--background), 72px 72px rgba(0, 0, 0, 0.14), 75px 75px 0 -1px var(--background), 75px 75px rgba(0, 0, 0, 0.12), 78px 78px 0 -1px var(--background), 78px 78px rgba(0, 0, 0, 0.10), 81px 81px 0 -1px var(--background), 81px 81px rgba(0, 0, 0, 0.08), 84px 84px 0 -1px var(--background), 84px 84px rgba(0, 0, 0, 0.06), 87px 87px 0 -1px var(--background), 87px 87px rgba(0, 0, 0, 0.04), 90px 90px 0 -1px var(--background), 90px 90px rgba(0, 0, 0, 0.02),93px 93px 0 -1px var(--background), 93px 93px rgba(0, 0, 0, 0.01),96px 96px 0 -1px var(--background), 96px 96px rgba(0, 0, 0, 0.01),99px 99px 0 -1px var(--background), 99px 99px rgba(0, 0, 0, 0.01),102px 102px 0 -1px var(--background), 102px 102px rgba(0, 0, 0, 0.01),105px 105px 0 -1px var(--background), 105px 105px rgba(0, 0, 0, 0.01);} .wedo-page .industry-expertise .icons-part {row-gap:2rem;} .wedo-page .industry-expertise .icons-part img{width:75px;height:75px;object-fit: contain;} .wedo-page .lead-way .card hr,.wedo-page .lead-way .card .overlay hr{margin-bottom:0rem;margin-top:1rem;border-top:0;} .wedo-page .lead-way img {width:100%;height:100%;object-fit: contain;margin:2rem 0;} /*wedo page css end*/ /*careers page css start*/ .careers-page p {font-weight:100;letter-spacing:0.5px;} #careersaccordion button:focus,input:focus,select:focus{box-shadow:none !important;border-radius:0 !important;} #careersaccordion button:hover {background:transparent !important;} .accordion-button:not(.collapsed){box-shadow:none !important;} #careersaccordion .accordion-item {border-bottom: 1px solid #0005 !important;} #careersaccordion button::after {display: none;} /* Hide the default Bootstrap arrow */ #careersaccordion button {position: relative;padding-right: 3rem; background-color: transparent !important;} #careersaccordion button .custom-icon {position: absolute;right: 1rem;top: 50%;width: 1.5rem; height: 1.5rem;transition: transform 0.3s ease;transform:translateY(-50%) rotate(0deg)} #careersaccordion button[aria-expanded="fasle"] .custom-icon {transform: translateY(-50%)} #careersaccordion button[aria-expanded="true"] .custom-icon {transform: translateY(-50%) rotate(180deg); } #careersaccordion .accordion-item.disable button {opacity:0.25;} #careersaccordion .accordion-item .hiring-div {display:flex;} #careersaccordion .accordion-item .not-hiring-div {display:none;} #careersaccordion .accordion-item.disable .hiring-div {display:none;} #careersaccordion .accordion-item.disable .not-hiring-div {display: block;} /*apply now form css*/ .job-apply-form input.form-control, .job-apply-form select.form-select {border-bottom:1.5px solid #0005 !important;} .job-apply-form .form-floating {position: relative;margin-bottom: 1rem;} .job-apply-form .form-floating label {position: absolute;top: 1.75rem;background-color: transparent;color:#000;padding: 0rem;transition: all 0.2s ease;pointer-events: none;} .job-apply-form .form-control:focus ~ label, .job-apply-form .form-select:focus ~ label, .job-apply-form .form-control:not(:placeholder-shown) ~ label, .job-apply-form .form-select:not(:placeholder-shown) ~ label {top: 0rem;font-size: 0.75rem;transform: translateY(0);color:#000;} .job-apply-form .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .job-apply-form .form-floating > .form-select:not(:placeholder-shown) ~ label::after {background-color:transparent !important;} .job-apply-form button.submit-btn{background:#000 !important;padding:0.5rem 1.4rem !important;font-size:0.9rem;} /*--//--*/ /*careers page css end*/ /*pencilz page css start*/ .c-auto {cursor: auto;} .pencilz-page p {letter-spacing:0.5px;} .pencilz-page footer {background-color:#000;margin-top:-1px;} .pencilz-page .who-we-are h3.display-3 {line-height:1.3 !important;} .pencilz-page .our-process{margin-top:5rem;} .pencilz-page section.holding-pencil {background: linear-gradient(to bottom, #ffffff 60%, #000000 40%);} .pencilz-page .video-div {position: relative;width: 100%;margin-top:4rem;} #customVideo {border-radius:3rem;} .pencilz-page .video-div .base-image {border-radius:3rem;object-fit:cover;} .pencilz-page .video-div .play-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);cursor: pointer;width: 100px; height: 100px;} .pencilz-page .video-div .site-logo {position: absolute;top: 50%;left: 50%;width: 45%;height: auto;transform: translate(-50%, -50%);} .pencilz-page .video-div .overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.3);display: flex;align-items: center;justify-content: center;pointer-events: none; border-radius:3rem;} .pencilz-page section.about-crazypencil{background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 50%), linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 10%), linear-gradient(to right, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0)), url(images/team-bgimg.png);background-size: contain;background-position: right center;height: 1080px;background-repeat: no-repeat;} .pencilz-page section.about-crazypencil .left img {width: 50%;height: auto;bottom: 0;z-index: 1;left: -5rem;} /*team slider and carousel css start */ section.teams-slider .swiper {width: 100%;height: 100%;padding:150px 0 100px 0;} section.teams-slider .swiper-wrapper {display: flex;align-items: center;margin-left: -260px;} section.teams-slider .swiper-slide-active {transform: scale(1.1);z-index: 10;width: 580px !important;height: 815px !important;} section.teams-slider .swiper-slide-active .team-infos img {object-fit: cover;border-top-left-radius:10rem;} section.teams-slider .team-shortdesc {top: 0px;display: none;margin-left: 108%;} section.teams-slider .long-description {right: 16.5%;bottom: 9.5%;} section.teams-slider .swiper-slide {background: #636466;transition: transform 0.3s ease;border-top-left-radius:8rem;} section.teams-slider .swiper-slide:not(.swiper-slide-active) {transform: scale(0.9);height:100%;filter:brightness(0.5);} section.teams-slider .swiper-slide:not(.swiper-slide-active) .team-infos img {border-top-left-radius:12rem;} section.teams-slider .swiper-button-next, section.teams-slider .swiper-button-prev { width: 60px;height: 60px; background-size: cover;background-repeat: no-repeat;background-position: center;z-index: 15;cursor: pointer;position: absolute;top: 50%;transform: translateY(-50%);} section.teams-slider .swiper-slide:not(.swiper-slide-active) .swiper-button-next {display: none;} section.teams-slider .swiper-slide:not(.swiper-slide-active) .swiper-button-prev {display: none;} section.teams-slider .swiper-button-next {background-image: url('images/right-arrow.svg');right:-80px;} section.teams-slider .swiper-button-prev {background-image: url('images/left-arrow.svg');left:-80px;} section.teams-slider .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,.swiper-pagination {display:none;} section.teams-slider .swiper .team-infos .name-designation {bottom:20px;right:20px;text-align:end;} section.teams-slider .swiper .team-infos .name-designation h5 {letter-spacing:0.5px;} section.teams-slider .swiper .team-infos .name-designation small {letter-spacing:0.5px;font-size:0.7rem;font-weight:100;} section.teams-slider .swiper-slide.swiper-slide-next {margin-right:-15px !important;} section.teams-slider .team-infos .name-designation {visibility:hidden;} section.teams-slider .swiper-slide.swiper-slide-active .name-designation {visibility:visible;} section.teams-slider .swiper-slide.swiper-slide-active .team-shortdesc {display:block;} @media (max-width: 1800px) {section.teams-slider .long-description {right: 13.5%;}} @media (max-width: 1700px) { section.teams-slider .swiper-wrapper {margin-left: -222px;} section.teams-slider .swiper-slide-active {width: 460px !important;height: 750px !important;} /* section.teams-slider .team-shortdesc {margin-left: 490px;} */ } @media (max-width: 1600px) { section.teams-slider .swiper-wrapper {margin-left: -212px;} section.teams-slider .swiper-slide-active {width: 480px !important;height: 720px !important;} /* section.teams-slider .team-shortdesc {margin-left: 470px;margin-top:2rem;} */ /* section.teams-slider .long-description {right: 200px;bottom: 40px} */ } @media (max-width: 1650px) { section.teams-slider .long-description {bottom:6%;} .pencilz-page section.about-crazypencil {height:900px;} .pencilz-page section.about-crazypencil .left img {width:40%;left:0;} } @media (max-width: 1500px) { section.teams-slider .swiper-slide-active {height: 690px !important;} /* section.teams-slider .long-description {right: 160px;bottom: 10px;} */ } @media (max-width: 1400px) { section.teams-slider .swiper {padding:100px 0 100px 0;} section.teams-slider .swiper-wrapper {margin-left:-170px;} section.teams-slider .swiper-slide{border-top-left-radius:6rem;} section.teams-slider .swiper-slide-active {height: 620px !important;width:450px !important;} section.teams-slider .swiper-slide:not(.swiper-slide-active) {width:326px !important;} /* section.teams-slider .long-description {right: 205px;bottom: 40px;} */ .pencilz-page section.about-crazypencil {height:780px;} } /* @media (max-width: 1300px) {section.teams-slider .long-description {right: 65px;bottom: -45px;}} */ @media (max-width: 1200px) { section.teams-slider .swiper-slide-active {height: 600px !important;} section.teams-slider .swiper-slide:not(.swiper-slide-active) {width:300px !important;} section.teams-slider .long-description {position: relative !important;width: 50%;text-align: center;margin: auto;} } @media (max-width: 1024px) { section.teams-slider .swiper-wrapper {margin-left:-228px;} section.teams-slider .swiper-slide-active {height: 580px !important;}} @media (max-width: 991px) { section.teams-slider-mobile #teamCarousel,section.teams-slider-mobile .carousel-inner {width:fit-content;margin:auto;} section.teams-slider-mobile .team-card {background:#636466;height: 650px;width: 500px;padding: 0 1rem;border-top-left-radius:7rem;margin:auto;} section.teams-slider-mobile .team-card img {object-fit:cover;} section.teams-slider-mobile .team-card .name-designation {bottom: 20px;right: 20px;text-align: end;} section.teams-slider-mobile .team-card .team-shortdesc {bottom:20px;left:20px;} section.teams-slider-mobile .carousel-control-prev-icon {background-image: url('images/left-arrow.svg') !important;} section.teams-slider-mobile .carousel-control-prev-icon, section.teams-slider-mobile .carousel-control-next-icon {display: none;} section.teams-slider-mobile .carousel-control-prev, section.teams-slider-mobile .carousel-control-next {width: 80px !important;height: 80px;background-size: contain !important;background-repeat: no-repeat !important;background-position: center center !important; transform: translateY(-50%);} section.teams-slider-mobile .carousel-control-prev {background-image: url('images/left-arrow.svg') !important;position:absolute;} section.teams-slider-mobile .carousel-control-next {background-image: url('images/right-arrow.svg') !important;position:absolute;} } @media (max-width: 767px) { section.teams-slider-mobile .team-card {height: 600px;width:fit-content;border-top-left-radius:6rem;} section.teams-slider-mobile .carousel-control-prev,section.teams-slider-mobile .carousel-control-next {width: 60px !important;height: 60px;} section.teams-slider-mobile .carousel-control-prev {left:5px;} section.teams-slider-mobile .carousel-control-next {right:5px;} } @media (max-width: 600px) { section.teams-slider-mobile .team-card {height: 550px;border-top-left-radius:5rem;} section.teams-slider-mobile .carousel-control-prev, section.teams-slider-mobile .carousel-control-next {transform: translateY(-150%)} section.teams-slider-mobile .carousel-control-prev,section.teams-slider-mobile .carousel-control-next {width: 50px !important;height: 50px;} } @media (max-width: 480px) { section.teams-slider-mobile .team-card {padding:0;height:100%;width:100%;border-top-left-radius:4rem;} section.teams-slider-mobile #teamCarousel, section.teams-slider-mobile .carousel-inner {width:100%;} } /*--//--*/ /*pencilz page css end*/ /*catchuz page css start*/ .catchuz-page input[type=checkbox]{position:absolute;visibility:hidden;} .catchuz-page input[type=checkbox]:checked + label{color:#F00;background:#656566;border:1px solid #656566;color:#FFF;} .catchuz-page .checkbox label{background:#FFF;padding:3px 15px;color:#656566;border:1px solid #656566;border-radius:50px;cursor:pointer;} .catchuz-page .checkbox label:hover{background:#656566;color:#fff;border:1px solid #656566;} .catchuz-page .form-part textarea + label{font-size:30px;color:#656566;transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);backface-visibility: hidden;transform-origin: 0% 0%;white-space: nowrap;pointer-events: none;display: block;line-height: 1em;top: 2px;left: 0;} .catchuz-page .form-part input + label{font-size:18px;color:#656566;transition: all .2s cubic-bezier(0.645, 0.045, 0.355, 1);backface-visibility: hidden;transform-origin: 0% 0%;white-space: nowrap;pointer-events: none;display: block;line-height: 1em;top: 2px;left: 0;} .catchuz-page .form-part textarea:focus + label{transform:scale(0.7) translate(0, -40px);} .catchuz-page .form-part textarea:focus{outline:0 none;box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0)!important;} .catchuz-page .form-part input{width:100%;border-bottom:1px solid #656566!important;padding-left:0;} .catchuz-page .form-part .form-control:focus ~ label, .catchuz-page .form-part .form-control:not(:placeholder-shown) ~ label {transform:scale(0.7) translate(0, -40px);} .catchuz-page .form-part textarea{padding-bottom:12px;border-bottom:1px solid #656566!important;height:165px;resize: none;padding-left: 0;} .catchuz-page .form-part label{position:absolute;top:0;} .catchuz-page .address-part p {font-size:1.1rem;} .catchuz-page .address-part{border-top-right-radius:50px;} .catchuz-page .range-container {width: 100%;position: relative;} .catchuz-page .range-container label {position: absolute;top:-70%;font-size:18px;} .catchuz-page .range-label {display: flex;justify-content: space-between;margin-bottom: 10px;} .catchuz-page .slider-container {position: relative;height: 50px;} .catchuz-page .range-slider {-webkit-appearance: none;width: 100%;background: #0001;position: absolute;top: 50%;transform: translateY(-50%);margin: 0;} .catchuz-page .range-slider::-webkit-slider-runnable-track {width: 100%;height: 1px;background: #0001;border-radius: 25px;} .catchuz-page .range-slider::-moz-range-track {width: 100%;height: 1px;background: #0001;} .catchuz-page .range-slider::-ms-track {width: 100%;height: 1px;background: #0001;border-color: transparent;color: transparent;} .catchuz-page .range-slider::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 0;height: 0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 8px solid #bb1d80;cursor: pointer;position: relative;top: -10px;z-index: 2;transform: rotate(180deg);left: -3px;} .catchuz-page .range-slider::-moz-range-thumb {width: 0;height: 0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 8px solid #bb1d80;cursor: pointer;position: relative;top: -10px;left: -3px;} .catchuz-page .range-slider::-ms-thumb {width: 0;height: 0;border-left: 7px solid transparent;border-right: 7px solid transparent;border-bottom: 8px solid #bb1d80;cursor: pointer;position: relative;top: -10px;left: -3px;} .catchuz-page .highlighted-range {position: absolute;height: 2px;background: #bb1d80;border-radius: 5px;top: 50%;transform: translateY(-50%);z-index: 0;} .catchuz-page .thumb-label {position: absolute;font-size: 14px;color: #000;transform: translateY(20px);white-space: nowrap;top: 50%;margin-top: -15px;} .catchuz-page .thumb-label.min-label {left: 0;margin-left: 9px;} .catchuz-page .thumb-label.max-label {right: 0;margin-left: -3px;} .catchuz-page .range-value {display: flex;justify-content: space-between;margin-top: 10px;} .catchuz-page .value-display {font-size: 14px;} .catchuz-page .custom-checkbox input {opacity: 0;position: absolute;cursor: pointer;} .catchuz-page .custom-checkbox {display: inline-flex;align-items: center;position: relative;padding-left: 30px; cursor: pointer;user-select: none; } .catchuz-page .checkmark {position: absolute;left: 0;top: 50%;width: 20px;height: 20px; background-color: transparent; border-radius: 50%; transition: background-color 0.3s;transform: translateY(-50%);border:1px solid #c0c0c0; cursor: pointer;} .catchuz-page .custom-checkbox input:checked ~ .checkmark {background-color: #000;} .catchuz-page .checkmark::after {content: "";position: absolute;left: 6px;top: 45%;width: 6px;height: 12px; border: solid white;border-width: 0 2.5px 2.5px 0;transform: translateY(-50%) rotate(45deg);opacity: 0;transition: opacity 0.3s;} .catchuz-page .custom-checkbox input:checked ~ .checkmark::after {opacity: 1;} .catchuz-page button.submit-btn {background: #000 !important;padding: 0.5rem 1.4rem !important;font-size:0.9rem;} .catchuz-page div.row {--bs-gutter-x:5rem !important;} .error-message {font-size: 0.8rem;letter-spacing: 0.5px;color: red;display:none;} /*catchuz page css end*/ /*jollywood page css start*/ .jollywood-page .inner-banner{display:none !important;}.jollywood-page .inner-page-header .site-logo {filter:none;}.jollywood-page p {letter-spacing:0.5px;}.jollywood-page .second-sec {background-image: linear-gradient(to right, #323192 , #7f2a90);margin-top:-1.5rem;}.jollywood-page .left-down-arrow {width:30px;}.jollywood-page .second-sec .left p {letter-spacing:1px;}.jollywood-page .second-sec .left h6:nth-child(2) { background-color: #33baf1;clip-path: polygon(0 0, 100% 0%, 98% 90%, 2.5% 100%);-webkit-clip-path: polygon(0 0, 100% 0%, 98% 90%, 2.5% 100%);}.jollywood-page .second-sec .left h6:nth-child(3){transform:rotate(-1deg);}.jollywood-page .second-sec img {margin-top:-100px;}.jollywood-page .five-sec img {border-radius:2.5rem;}.jollywood-page .five-sec img.big-image {height:650px;object-fit:cover;}.jollywood-page .six-sec { background-image: radial-gradient(circle at 30% 50%, #7c288e, #251061 50%, #150958);}.jollywood-page .six-sec img {margin-top:-40px;height:770px;object-fit: contain;transform: scale(1.08);}.jollywood-page .seven-sec .instagram-post .col:nth-child(even) {margin-top: 10rem;}.jollywood-page .seven-sec p {cursor: pointer;} /* .jollywood-page .video-sec .overlay-div {background-color: rgba(0, 0, 0, 0.7);z-index:1;} .jollywood-page .video-sec .play-icon {left:50%;top:50%;transform: translate(-50%,-50%);z-index:3;cursor: pointer;} */ /*individual projects page like jollywood css start*/ .jollywood-page.ssitmtbars .forth-sec {margin-top: -22rem;} .jollywood-page.brakesindia .six-sec, .jollywood-page.ssitmtbars .six-sec {background-image: none;height:auto;position: relative;} .jollywood-page.brakesindia .six-sec .container {position: absolute;top: 60%;transform: translateY(-50%);right: 15.5%;} .jollywood-page.ssitmtbars .six-sec .container {position: absolute;top: 65%;transform: translateY(-50%);right: 15.5%;} .jollywood-page.brakesindia .six-sec img, .jollywood-page.ssitmtbars .six-sec img {object-fit: cover;transform: scale(1);height:auto;} .jollywood-page.brakesindia .seven-sec .gif-img {border-radius:4rem;} .jollywood-page.brakesindia .seven-sec .full-width-gif, .jollywood-page.brakesindia .seven-sec .full-width-gif .col-12:nth-last-child(1) {gap:5rem;} .jollywood-page .video-sec .cards img{width:80%;} /*--//--*/ /*jollywood page css end*/ @media (max-width: 1400px) {.catchuz-page .address-part p {font-size:0.9rem;}.pencilz-page section.about-crazypencil .left img {width:400px;bottom:30px;}} @media (max-width: 1366px) and (min-width: 1024px) { h6.reduce-size {font-size:2.75rem !important;} } @media (max-width: 1280px) { /*common css code start*/ .main-padding{padding:60px;} .container{max-width:100%!important;} h2.section-heading{font-size:65px!important;} /*common css code end*/ /*menu css coede start*/ .navbar-nav li a{font-size:18px;} /*menu css coede end*/ /*logo css code start*/ .crazy-logo img{width:auto;height:37px;} .pencilz-logo img{width:auto;height:30px;} /*logo css code end*/ /*home page css code start*/ /*hero sec css code start*/ .Pencilz-sec img{width:700px;} .Pencilz-sec ul{gap:25px;} .Pencilz-sec .scribble-down img{width:25px;} /*hero sec css code end*/ /*home page css code end*/ /*wedo page css start*/ .wedo-page .black-cards {--bs-gutter-x:5rem !important;} /*wedo page css end*/ } @media (max-width: 1200px) {.jollywood-page .seven-sec .instagram-post .col:nth-child(even) {margin-top: 6rem;} .jollywood-page.brakesindia .six-sec, .jollywood-page.ssitmtbars .six-sec {height:auto;} .jollywood-page.brakesindia .six-sec img, .jollywood-page.ssitmtbars .six-sec img {position: relative;} .jollywood-page .video-sec .cards img, .jollywood-page.brakesindia .seven-sec .col img {width:70%;} /*card image*/ } @media (max-width: 1150px) {.wedo-page .black-cards {--bs-gutter-x:4rem !important;}} @media (max-width: 1024px) { /*common css code start*/ .main-padding{padding:40px;} .padding-lr{padding:40px;} h2.section-heading{font-size:60px!important;} /*common css code end*/ /*home page css code start*/ /*hero sec css code start*/ .Pencilz-sec{gap:40px;} .Pencilz-sec img{width:520px;} .Pencilz-sec ul{gap:15px;} .Pencilz-sec ul li{gap:5px;} .Pencilz-sec ul li h6{font-size:16px;} .Pencilz-sec .scribble-down img{width:25px;} .scribble-down{font-size:15px;} .carousel-control-next {right:-15px;} .carousel-control-prev{left:-15px;} /*hero sec css code end*/ /*home page css code end*/ /*wedo page css start*/ .wedo-page .black-cards {--bs-gutter-x:2.5rem !important;} .wedo-page .black-cards .card {width:400px;height:fit-content;} .wedo-page .black-cards .card img {width:95%;} .wedo-page .black-cards .card p {font-size:1rem;} .wedo-page .black-cards .card .overlay ul {font-size: 0.9rem !important;line-height:1.8 !important;} .wedo-page .industry-expertise {margin-top:5rem;} .wedo-page.wedo-inner-page .industry-expertise {margin-top:0 !important;} /*wedo page css end*/ .join-Dotz-sec .container{gap:15px;} .footer-link{margin:15px 0;} } @media (max-width: 991px) { /*secton heading css code start*/ h2.section-heading{font-size:3rem!important;} /*--//--*/ .title span{font-size:28px;} /*menu css code start*/ .navbar-nav{column-gap:40px;} /*--//--*/ /*landing sec css code start*/ body #landing-sec #site-logo {width:150px;} body.scroll10 #landing-sec #site-logo {width:100px;} #site-logo.change-zlogo {width:40px !important;} .join-Dotz-sec h3 {font-size:clamp(3rem, 6vw, 5rem);} .footer-link ul{gap:20px;} /*landing sec css code end*/ /*print sec css code start*/ .print-sec .card {position: relative;margin-bottom:30px !important;} .print-sec .card .parent-div {border-radius:2rem;padding:2.5rem;} .print-sec .card .img-div {height:450px;} .print-sec .card .content .print-heading-img{margin-top:1.5rem !important;} .print-sec .card .content h6{font-size:18px;} .print-sec .card .card__inner {scale:1 !important;filter: none !important;} /*--//--*/ /*wedo page css start*/ .wedo-page .black-cards .col:nth-child(1) .card {margin-top:0 !important;} .wedo-page .black-cards .col:nth-child(odd) .card {margin-top:12.5rem;} .wedo-page .black-cards .col:nth-child(3) .card .overlay p, .wedo-page .black-cards .col:nth-child(6) .card .overlay p {line-height:1;} .wedo-page .industry-expertise .icons-part .col:nth-last-child(1).last-many-more {margin-top:3rem !important;justify-content: left !important;} .wedo-page .industry-expertise .icons-part {row-gap:1rem;} .wedo-page .lead-way .black-cards .col:nth-child(3) .card, .wedo-page .lead-way .black-cards .col:nth-child(even) .card {margin-top:3rem !important;} .catchuz-page div.row {--bs-gutter-x:2rem !important;} /*--//--*/ /*pencilz page css start*/ .pencilz-page .our-process{margin-top:1.5rem;} .pencilz-page section.about-crazypencil .left img {width:15%;top:0;right:0;left: auto;} /*--//--*/ /*jollywood page css start*/ .jollywood-page .first-sec img{width:350px;} .jollywood-page .second-sec {margin-top:0;} .jollywood-page .second-sec img,.jollywood-page .six-sec img {margin-top:0px;} .jollywood-page .third-sec .right ul {display:flex;flex-wrap:wrap;} .jollywood-page .third-sec .right ul li{display:flex;} .jollywood-page .five-sec img.big-image {height:100%;} .jollywood-page .five-sec img {border-radius:2rem;} .jollywood-page .six-sec {background-image: radial-gradient(circle at 50% 60%, #7c288e, #251061 50%, #150958);height: 100%;} .jollywood-page .seven-sec .instagram-post .col:nth-child(even) {margin-top:3rem;} .jollywood-page .seven-sec .instagram-post img, .jollywood-page.brakesindia .seven-sec .instagram-post .col img{width:100%;} .jollywood-page .six-sec img {height:100%;transform: scale(0.95);} .jollywood-page.ssitmtbars .forth-sec {margin-top: -5rem;} .jollywood-page .video-sec .cards img,.jollywood-page.brakesindia .seven-sec .col img,.jollywood-page .seven-sec .col img{width:100%;} /*card image*/ .jollywood-page.brakesindia .seven-sec .gif-img{width:100%;border-radius:2rem;} .jollywood-page.brakesindia .seven-sec .full-width-gif, .jollywood-page.brakesindia .seven-sec .full-width-gif .col-12:nth-last-child(1) {gap:2rem;} .jollywood-page .video-sec .play-icon {width:70px;} /*--//--*/ } @media (max-width: 767px) { /*common css code start*/ .main-padding{padding:20px;} .padding-lr{padding:20px;} .title span{font-size:22px;} .fw-500{font-weight:600!important;} /*common css code end*/ /*menu css coede start*/ .navbar-nav{column-gap:35px;} .sticky-menu header .z-logo img{width:35px;} /*menu css coede end*/ /*preloader css start*/ #preloader img{width:80%;margin: auto;display: flex;}#preloader h6{margin-top: -15px;} /*--//--*/ /*home page css code start*/ /*hero sec css code start*/ .Pencilz-sec{gap:40px;} .Pencilz-sec img{width:400px;} .Pencilz-sec ul{gap:15px;} #carouselExample .carousel-indicators {display: block;margin: auto;position: absolute;bottom:-55px;text-align: center;} #carouselExample .carousel-indicators button {width:10px;border-bottom:10px solid #000 !important;padding: 0 !important;background: transparent !important} #carouselExample .carousel-indicators button.active{border-bottom:10px solid #bb1d80 !important;} #carouselExample .carousel-control-prev, #carouselExample .carousel-control-next{display:none;} /*hero sec css code end*/ /* .landing-sec .logo {position: relative;top:20%;} */ /*print sec css code start*/ .print-sec .card:nth-last-child(1) {padding-bottom:20px !important;} .print-sec .card .parent-div {border-radius:1.8rem;padding:2rem;} .print-sec .card .img-div {height:400px;} /* .print-sec .card .content .print-heading-img{width:200px;} */ /* .print-sec .card:nth-last-child(1) .content .print-heading-img{width:280px;} */ .print-sec .card button {margin-top:2rem !important;} /*--//--*/ /*clientz sec css code start*/ /* .clientz-section .col img {width:90px;} */ .clientz-section .col img {width: 80%;} .clientz-section .col:nth-child(1) img, .clientz-section .col:nth-child(4) img, .clientz-section .col:nth-child(5) img, .clientz-section .col:nth-child(6) img, .clientz-section .col:nth-child(12) img, .clientz-section .col:nth-child(21) img, .clientz-section .col:nth-child(25) img, .clientz-section .col:nth-child(28) img, .clientz-section .col:nth-child(29) img, .clientz-section .col:nth-child(30) img{width: 60%;} .clientz-section .col:nth-child(7) img, .clientz-section .col:nth-child(8) img, .clientz-section .col:nth-child(11) img, .clientz-section .col:nth-child(13) img, .clientz-section .col:nth-child(19) img , .clientz-section .col:nth-child(20) img, .clientz-section .col:nth-child(26) img, .clientz-section .col:nth-child(7) img, .clientz-section .col:nth-child(27) img{width: 45%;} .clientz-section .col:nth-child(3) img, .clientz-section .col:nth-child(15) img, .clientz-section .col:nth-child(3) img {width: 35%;} /*clientz sec css code end*/ .join-Dotz-sec h3 {font-size:clamp(2.5rem, 6vw, 5rem);} /*home page css code end*/ .float-social-icons.scrollY {right:1rem;} .float-social-icons {right:2.5%;bottom:2%;} /*mobile share icons css style*/ .tooltip-container {background: #bb1d80;position: relative;cursor: pointer;font-size: 17px;padding:0.7em 0.7em 0.7em 0.6em;border-radius: 5px 50% 50% 50%;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);z-index:10000;} .tooltip-container svg {margin-top:-1px;} .tooltip-container:hover {transition: all 0.6s;} .tooltip-container .text {display: flex;align-items: center;justify-content: center;fill: #fff;transition: all 0.2s;} .tooltip-container:hover .text {fill: #fff;transition: all 0.6s;} .tooltip1,.tooltip2,.tooltip3,.tooltip4,.tooltip5 {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);opacity: 0;visibility: hidden;background: none !important;padding: 10px;border-radius: 50px;transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;z-index: 1;} .tooltip-container:hover .tooltip1, .tooltip-container:hover .tooltip2, .tooltip-container:hover .tooltip2, .tooltip-container:hover .tooltip3, .tooltip-container:hover .tooltip4, .tooltip-container:hover .tooltip5 {opacity: 1;background: #fff;transform: translate(-50%, -5px);border-radius: 50px;display: flex;align-items: center;justify-content: center;} .tooltip-container:hover .tooltip1:hover a,.tooltip-container:hover .tooltip2:hover a, .tooltip-container:hover .tooltip3:hover a, .tooltip-container:hover .tooltip4:hover a, .tooltip-container:hover .tooltip5:hover a{ background: #bb1d80; color:#fff !important; border: 1.2px solid #636466 !important; } .tooltip-container:hover .tooltip1{top: -215%;} .tooltip-container:hover .tooltip2{top:-115%;} .tooltip-container:hover .tooltip3{top:-315%;} .tooltip-container:hover .tooltip4{top:-415%;} .tooltip-container:hover .tooltip5{top:-515%;} .float-social-icons .tooltip-container a{padding-top:0px !important;} /*mobile share icons css style*/ /*--//--*/ /*wedo page css start*/ .wedo-page p,.careers-page p,.pencilz-page p,.jollywood-page p{font-size:1.2rem !important;} .wedo-page .black-cards .card {width:350px;} .wedo-page .black-cards .col:nth-child(1) .card {height:340px} .wedo-page .black-cards .card img {width:85%;} .wedo-page .black-cards .col:nth-child(odd) .card {margin-top:10rem;} .wedo-page .black-cards .col:nth-child(even) .card {margin-top:10rem !important;} .wedo-page .black-cards .col:nth-child(3) .card .overlay p, .wedo-page .black-cards .col:nth-child(6) .card .overlay p {line-height:inherit;} .wedo-page .industry-expertise {margin-top:6.5rem;} .wedo-page .industry-expertise .icons-part {row-gap:0.5rem;} .wedo-page .industry-expertise .icons-part img {width:70px;height:70px;} /*--//--*/ /*pencilz page css start*/ .pencilz-page .our-process .row:nth-child(1) {margin-top:-3rem !important;} .pencilz-page .our-process div.icon img {width:120px;} .pencilz-page .our-process .black-card-div .left{width:150px !important;} /*--//--*/ /*jollywood page css start*/ .jollywood-page .first-sec img{width:80%} .jollywood-page .five-sec img {border-radius:1.5rem;} .jollywood-page .six-sec {background-image: radial-gradient(circle at 50% 80%, #7c288e, #251061 50%, #150958);} /*--//--*/ .print-sec .mobile-img{display:block;} .print-sec .desktop-img{display:none;} .footer-link ul button{font-size:15px;} .join-Dotz-sec button{font-size:14px;} .footer-link ul{gap:15px;} .copyrights{font-size:16px;} } @media (max-width: 600px) { /*landing sec css code start*/ .navbar{padding:0px 30px;} .navbar-nav{row-gap:10px !important;} .landing-sec .container{display:flex;flex-flow:wrap;justify-content:center;align-items:normal;height:100%;} .landing-sec{justify-content:center;gap:0;} /* .landing-sec .logo {top:5%;} */ /*landing sec css code end*/ /*home page css code start*/ /*hero sec css code start*/ .Pencilz-sec ul li h6{font-size:13px;} .Pencilz-sec ul li img{width:18px;} .Pencilz-sec img{width:80%;} .Pencilz-sec ul{gap:10px;} /*--//--*/ /*print sec css code start*/ .print-sec .card .content h6 {margin-top:1rem !important;} /* .print-sec .card .content .print-heading-img{width:190px;} */ /* .print-sec .card:nth-last-child(1) .content .print-heading-img{width:270px;} */ .print-sec .card button {margin-top: 1.5rem !important;} /*--//--*/ .join-Dotz-sec h3 {font-size:clamp(2rem, 6vw, 5rem);} /*home page css code end*/ .footer-link ul button{font-size:13px;} .footer-link ul{gap:8px;row-gap:10px;} .footer-link{margin:5px 0;} .footer-logo-part{padding-bottom:1.5rem;} .copyrights{font-size:14px;} } @media (max-width: 576px) { h2.section-heading{font-size:2.4rem!important;} /*menu css coede start*/ .navbar-nav{column-gap:20px;flex-direction: row;flex-wrap: wrap;justify-content: center;} .navbar-nav li a{font-size:16px;} /*--//--*/ /*landing sec css code start*/ body #landing-sec #site-logo {width:130px;} body.scroll10 #landing-sec #site-logo {width:70px;} .landing-sec{gap:2rem;} #hero-sec div.container-fluid {height:100% !important;} /*--//--*/ /*print sec css code start*/ .print-sec {padding-left:10px !important;padding-right:10px !important;} .print-sec .card .parent-div {padding:1rem 1rem 1.5rem 1rem;} .print-sec .card .img-div {height:300px;} .print-sec .card .content h2{font-size:3.5rem;} .print-sec .card .content h6{font-size:16px;} /*--//--*/ /*wedo page css start*/ .wedo-page p,.careers-page p,.pencilz-page p,.jollywood-page p {font-size:1rem !important;} .wedo-page .black-cards .col:nth-child(odd) .card {margin-top:8rem;} .wedo-page .black-cards .col:nth-child(even) .card {margin-top:8rem !important;} .wedo-page .industry-expertise .icons-part img {width:60px;height:60px;} .wedo-page .industry-expertise .icons-part {row-gap:0rem;--bs-gutter-y:2rem !important;} .wedo-page .industry-expertise .icons-part .col:nth-last-child(1) {margin-top:2rem !important;} .wedo-page .industry-expertise .icons-part .col:nth-last-child(1) p{width:100%;text-align: center;} /*--//--*/ /*pencilz page css start*/ .pencilz-page section.holding-pencil {background:linear-gradient(to bottom, #ffffff 70%, #000000 30%);} /*--//--*/ /*jollywood page css start*/ .jollywood-page .seven-sec .instagram-post .col:nth-child(even) {margin-top:1rem;} .jollywood-page .seven-sec .instagram-post .col:nth-last-child(1){margin-bottom:2rem;} .jollywood-page.brakesindia .seven-sec .full-width-gif, .jollywood-page.brakesindia .seven-sec .full-width-gif .col-12:nth-last-child(1) {gap:1.2rem;} .jollywood-page.brakesindia .seven-sec .gif-img {border-radius:1rem;} /*--//--*/ } @media (max-width: 480px) { /*common css code start*/ h2.section-heading{font-size:1.8rem!important;} /*button css code start*/ .custom-btn{padding:7px 14px;} .custom-btn.click-here{padding:8px 14px;font-size:14px !important;} /*----*/ #mobile-menu a {font-size:1.15rem !important;} /*--//--*/ .join-Dotz-sec h3 {font-size:clamp(1.5rem, 6vw, 5rem);} @media (max-width: 355px) { .join-Dotz-sec h3 {font-size:clamp(1.3rem, 6vw, 5rem);}} /*wedo page css start*/ .wedo-page h6 {font-size:1.6rem;}.wedo-page .black-cards .col:nth-child(odd) .card {margin-top:7rem;}.wedo-page .black-cards .col:nth-child(even) .card {margin-top:7rem !important;}.wedo-page .black-cards .card {width:310px;}.wedo-page .black-cards .card hr {margin: 1.5rem 0rem;}.wedo-page .black-cards .card .overlay ul {font-size:0.8rem !important;}.wedo-page .black-cards .card .overlay ul li i {font-size: 0.9rem !important;margin-top: 0.1rem;}.wedo-page .industry-expertise .icons-part img {width:50px;height:50px;}.wedo-page .industry-expertise .icons-part .content{flex-direction:column;text-align: center;}.wedo-page .industry-expertise .icons-part .content p {margin-left:0 !important;margin-top:0.5rem;}.wedo-page .lead-way .black-cards .col:nth-child(3) .card, .wedo-page .lead-way .black-cards .col:nth-child(even) .card {margin-top:1.5rem !important;}.wedo-page .lead-way .black-cards .card hr {margin: 1.5rem 0rem 0rem;} .wedo-page .industry-expertise .icons-part {--bs-gutter-x:2rem !important;} /*--//--*/ /*pencilz page css start*/ .pencilz-page .our-process .black-card-div .left{width:125px !important;}.pencilz-page .our-process div.icon img {width:100px;}.pencilz-page section.holding-pencil {background:linear-gradient(to bottom, #ffffff 70%, #000000 30%);}.pencilz-page .video-div {margin-top:2.5rem;}.pencilz-page .video-div .base-image {border-radius:2rem;}.pencilz-page .video-div .overlay {border-radius:2rem;}.pencilz-page .video-div .play-icon {width:60px;height:60px;}.pencilz-page section.about-crazypencil {background-size: 1000px;background-position: right bottom;height:850px;background-repeat: no-repeat;}.pencilz-page section.about-crazypencil .left img {width:90px;top:10px;} /*--//--*/ /*jollywood page css start*/ .jollywood-page .left-down-arrow {width:20px;} .jollywood-page.ssitmtbars .forth-sec {margin-top: 0rem;} /*--//--*/ .float-social-icons {right:3.5%;} } /*arun anna mobile screen*/ @media (max-width: 385px) { h2.section-heading{font-size:1.5rem!important;} .navbar-nav li a{font-size:14px;} .footer-link .button{padding:0 0.5rem !important;height:2.5rem;font-size:14px;} .float-social-icons a{width:30px;height:30px;padding-top:0.1rem;} .float-social-icons a i {font-size:14px !important;} .tooltip-container {margin-bottom: 10px;} .float-social-icons .tooltip-container a i {font-size:14px !important;} /*mobile share icons css style*/ .tooltip-container:hover .tooltip1 {top: -190%;}.tooltip-container:hover .tooltip2{top:-105%;}.tooltip-container:hover .tooltip3{top:-280%;}.tooltip-container:hover .tooltip4{top:-370%;}.tooltip-container:hover .tooltip5{top:-458%;} /*--//--*/ /*print sec css code start*/ /* .print-sec .card .content .print-heading-img{width:180px;} */ /* .print-sec .card:nth-last-child(1) .content .print-heading-img{width:280px;} */ /*--//--*/ /*pencilz page css start*/ .pencilz-page section.holding-pencil {background:linear-gradient(to bottom, #ffffff 76.5%, #000000 22%)}.pencilz-page .video-div {margin-top:1.5rem;} /* .pencilz-page .video-div .base-image {height:250px;} */ /*--//--*/ /*jollywood page css start*/ .jollywood-page .strategy-branding span {margin-left:0.4rem !important; margin-right:0.4rem !important;}.jollywood-page .left-down-arrow {width:15px;} /*--//--*/ } @media (max-width: 350px) { /*wedo page css start*/ .wedo-page p,.careers-page p,.pencilz-page p,.jollywood-page p {font-size:0.9rem !important;}.wedo-page .black-cards .card {width:280px;}.wedo-page .black-cards .card hr {margin: 1.2rem 0rem;}.wedo-page .black-cards .card .overlay {padding-top:1rem !important;}.wedo-page .black-cards .card .overlay ul {font-size:0.7rem;padding-top:0.5rem !important;} /*--//--*/ } /*this css works only in firefox*/ @-moz-document url-prefix() { #inner-mask { transform-origin: 41.8% 40% !important; } } :focus-visible {outline:none !important;} /*landing-sec trasition css*/ body #landing-sec #element {transition:1s all ease-in-out;opacity: 1;top:50%;transform: translateY(-50%);} body.scroll10 #landing-sec #element {transform: translateX(45%);transition: 1s all ease-in-out;position: fixed !important;top: 2% !important;} body #landing-sec #element ul {transition:1s all ease-in-out;} body.scroll10 #landing-sec #element ul {transition:1s all ease-in-out;flex-direction: column;row-gap:0 !important;text-align: right;} body.scroll10 #landing-sec #element ul li{transition:1s all ease-in-out;} body.scroll10 #landing-sec #element ul.aaaaaaaaaaaaaa{display: none;} @media (max-width: 991px) {body.scroll10 #landing-sec #element {transform: translateX(40%);}} @media (max-width: 576px) {body.scroll10 #landing-sec #element {transform: translateX(37%);}} @media (max-width: 480px) { .menu-bar {padding:0.84rem 0.3rem} #menu-icon.active {padding:0.9rem 0.9rem;} #menu-icon.active .dot:nth-child(1),#menu-icon.active .dot:nth-child(3) {width:16px;} } #home-page .abcd {visibility:hidden;} #home-page.scroll10 .abcd {visibility:visible;} /*form alert design css start*/ .alert.bs-alert{margin: 0;position: fixed;top: 10px;padding: 1.4rem 1rem;right: 10px;z-index: 10000;font-size: 14px;letter-spacing: 0.5px;border: 0;background: #fff;display: flex;align-items: center;}.alert.bs-alert button {position: relative;font-size: 15px;cursor: pointer;padding: 0;}.alert.bs-alert img {width:25px;} /*--//--*/ /*custom drop-down field in job-apply form*/ .custom-dropdown {position: relative;display: inline-block;} #dropdownToggle {width: 100%;padding: 1.6rem 0rem 1rem;border-bottom: 1.5px solid #0005 !important;background-color: #fff;cursor: pointer;text-align: left;font-size: 1rem;border:0;} #dropdownMenu {display: none;position: absolute;width: 100%;border: 0;border-radius: 0.5rem;background-color: #fff;box-shadow: 0 2px 5px rgba(0,0,0,0.2);z-index: 1000;max-height: 200px;overflow-y: auto;margin-top:5px;padding: 0;} #dropdownMenu.show{display: block;animation: zoom-in 0.5s linear;} @keyframes zoom-in {0% {scale: 80%;}100% {scale: 100%;}} #dropdownMenu .dropdown-option {padding: 0.5rem 1rem;border-bottom: 1px solid #eee;cursor: pointer;font-size: 0.9rem;} #dropdownMenu .dropdown-option:hover {background-color: #f1f1f1;} #dropdownMenu .dropdown-option:last-child {border-bottom: none;} #dropdownToggle::after {content: '';position: absolute;right: 1rem;top: 50%;transform: translateY(-50%);font-size: 1.5rem;color: #333;pointer-events: none;background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDE2LjVsLTQuNSA0LjVoOS00LjUgLTQuNSA0LjV6Ii8+PC9zdmc+') no-repeat center;background-size: contain;margin: 0;} /*--//--*/