@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v23/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden} /*date: 2 march 2025 website: Seller developer: Vandna Agarwal objective: styling for all buttons*/ /*button-css-start*/ .common_btn { font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; letter-spacing: 0.1px; border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -khtml-border-radius: 100px; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 10px 24px; text-decoration: none; cursor: pointer; text-transform: capitalize; } .common_lg_btn { font-weight: 500; font-size: 16px; line-height: 24px; text-align: center; letter-spacing: 0.1px; border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -khtml-border-radius: 100px; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 14px 24px; text-decoration: none; cursor: pointer; text-transform: capitalize; } .common_btn:hover, .common_lg_btn:hover, .common_btn:focus{ box-shadow:none; -o-box-shadow:none; -ms-box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; outline: 0 !important; color: #fff; text-decoration: none; } .common_sm_btn { font-weight: 500; font-size: 14px; line-height: 20px; text-align: center; letter-spacing: 0.1px; border-radius: 100px; -o-border-radius: 100px; -ms-border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -khtml-border-radius: 100px; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 10px 20px; text-decoration: none; cursor: pointer; text-transform: capitalize; } .common_btn:hover, .common_sm_btn:hover, .common_btn:focus{ box-shadow:none; -o-box-shadow:none; -ms-box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; outline: 0 !important; color: #fff; text-decoration: none; } .text_lg_btn{ font-weight: 500; font-size: 16px; line-height: 24px; text-align: center; letter-spacing: 0.1px; border-radius: 100px; color: #034bb8; -o-border-radius: 100px; -ms-border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; -khtml-border-radius: 100px; box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 14px 16px; text-decoration: none; cursor: pointer; text-transform: capitalize; text-decoration: none; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .text_lg_btn:hover{ box-shadow:none; -o-box-shadow:none; -ms-box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none; outline: 0 !important; color: #034bb8; background-color: #AFBEFF; text-decoration: none; } .common_btn + .common_btn{ margin-right: 8px; } .filled_btn{ background: #034BB8; color: #fff; border: 1px solid #034BB8; } .filled_btn:hover, .filled_btn:focus { background: #034BB8; color: #fff; } .outlined_btn{ background: none; border: 1px solid #857370 !important; color: #c00000; }; .outlined_btn:hover { background:rgba(193, 0, 1, 0.08); color: #c00000; } .outlined_btn:focus { background:rgba(193, 0, 1, 0.12); color: #c00000; border: 1px solid #C00001 !important; } .outlined_btn_blue{ background: none; border: 1px solid #e0e0e0 !important; color: #034bbb !important; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; } .outlined_btn_blue:hover { background:#AFBEFF !important; color: #034bbb !important; } .outlined_btn_blue:focus { background:rgba(3, 75, 187, 0.12); color: #034bbb !important; border: 1px solid #034bbb !important; } .text_btn{ background:none; color: #034BB8; border: 0px; padding: 0; text-decoration: none; } .text_btn:hover, .text_btn:focus { color: #034BB8; } .elevated_btn{ background: #fcd0c6; border: 1px solid #fcd0c6; color: #C00001; } .elevated_btn:hover { background:#F9DEDB; border: 1px solid #F9DEDB; color:#C00001; } .elevated_btn:focus { background:#F7D4D2; color:#C00001; } .tonal_btn{ background: #FFDAD4; border: 1px solid #FFDAD4; color: #2C1512; } .tonal_btn:hover, .tonal_btn:focus { color: #2C1512; background:#edcbc6; border: 1px solid #edcbc6; } .disabled_btn{ background: #cccccc; border: 1px solid #cccccc; color: #fff; } .disabled_btn:hover, .disabled_btn:focus { cursor: not-allowed; } .btn-filled-white, .btn { display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; border: 2px solid transparent; padding: 0.375rem 0.75rem; font-size: 1rem; border-radius: 999px; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .btn:hover, .btn:focus, .btn:active { text-decoration: none; outline: none; box-shadow: none; } .btn-large { padding: 14px 24px; cursor: pointer; font-size: 16px; line-height: 24px; font-weight: 500; border-radius: 28px; } .btn-small { padding: 8px 18px; cursor: pointer; font-size: 14px; line-height: 20px; font-weight: 500; font-family: var(--font); border-radius: 20px; } .btn-primary-text { color: var(--primary); background-color: transparent; border-color: transparent; } .btn-primary-text:hover { color: var(--primary-hover); background-color: var(--primary-op-8); border-color: var(--primary-op-8); } .btn-primary-text:focus { color: var(--primary-hover); background-color: var(--primary-op-12); border-color: var(--primary-op-12); } .btn-primary-text:active { color: var(--primary-hover); background-color: var(--primary-op-12); border-color: var(--primary-op-12); } .btn-primary-text:disabled, .btn-primary-text.disabled { color: var(--text-secondary); background-color: transparent; border-color: transparent; } /* Primary button */ .btn-primary-filled { color: #fff; background-color: var(--primary); border-color: var(--primary); } .btn-primary-filled:hover { color: #fff; background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary-filled:focus { color: #fff; background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary-filled:active { color: #fff; background-color: var(--primary-hover); border-color: var(--primary-hover); } .btn-primary-filled:disabled, .btn-primary-filled.disabled { color: var(--text-secondary); background-color: #d3d3d3; border-color: #d3d3d3; opacity: 0.65; } /* white button */ .btn-filled-white { color: var(--primary); background-color: #fff; border-color: #fff; } /* Secondary button */ .btn-secondary-filled { color: #fff; background-color: var(--secondary); border-color: var(--secondary); } .btn-secondary-filled:hover { color: #fff; background-color: var(--secondary-hover); border-color: var(--secondary-hover); } .btn-secondary-filled:focus { color: #fff; background-color: var(--secondary-hover); border-color: var(--secondary-hover); } .btn-secondary-filled:active { color: #fff; background-color: var(--secondary-hover); border-color: var(--secondary-hover); } .btn-secondary-filled:disabled, .btn-secondary-filled.disabled { color: var(--text-secondary); background-color: #d3d3d3; border-color: #d3d3d3; opacity: 0.65; } /* tertiary button */ .btn-tertiary-filled { color: #fff; background-color: var(--tertiary); border-color: var(--tertiary); } .btn-tertiary-filled:hover { color: #fff; background-color: var(--tertiary-hover); border-color: var(--tertiary-hover); } .btn-tertiary-filled:focus { color: #fff; background-color: var(--tertiary-hover); border-color: var(--tertiary-hover); } .btn-tertiary-filled:active { color: #fff; background-color: var(--tertiary-hover); border-color: var(--tertiary-hover); } .btn-tertiary-filled:disabled, .btn-tertiary-filled.disabled { color: var(--text-secondary); background-color: #d3d3d3; border-color: #d3d3d3; opacity: 0.65; } /* accent-yellow button */ .btn-accent-yellow-filled { color: #fff; background-color: var(--accent-yellow); border-color: var(--accent-yellow); } .btn-accent-yellow-filled:hover { color: #fff; background-color: var(--accent-yellow-hover); border-color: var(--accent-yellow-hover); } .btn-accent-yellow-filled:focus { color: #fff; background-color: var(--accent-yellow-hover); border-color: var(--accent-yellow-hover); } .btn-accent-yellow-filled:active { color: #fff; background-color: var(--accent-yellow-hover); border-color: var(--accent-yellow-hover); } .btn-accent-yellow-filled:disabled, .btn-accent-yellow-filled.disabled { color: var(--text-secondary); background-color: #d3d3d3; border-color: #d3d3d3; opacity: 0.65; } /* accent-yellow button */ .btn-accent-green-filled { color: #fff; background-color: var(--accent-green); border-color: var(--accent-green); } .btn-accent-green-filled:hover { color: #fff; background-color: var(--accent-green-hover); border-color: var(--accent-green-hover); } .btn-accent-green-filled:focus { color: #fff; background-color: var(--accent-green-hover); border-color: var(--accent-green-hover); } .btn-accent-green-filled:active { color: #fff; background-color: var(--accent-green-hover); border-color: var(--accent-green-hover); } .btn-accent-green-filled:disabled, .btn-accent-green-filled.disabled { color: var(--text-secondary); background-color: #d3d3d3; border-color: #d3d3d3; opacity: 0.65; } /* Primary button */ .btn-primary-outlined { color: var(--primary); background-color: transparent; border-color: var(--primary-200); } .btn-primary-outlined:hover { color: var(--primary); background-color: var(--primary-op-8); border-color: var(--primary); } .btn-primary-outlined:focus { color: var(--primary); background-color: var(--primary-op-12); border-color: var(--primary); } .btn-primary-outlined:active { color: var(--primary); background-color: var(--primary-op-12); border-color: var(--primary); } .btn-primary-outlined:disabled, .btn-primary-outlined.disabled { color: var(--text-secondary); background-color: transparent; border-color: var(--border); opacity: 0.65; } /* Secondary button */ .btn-secondary-outlined { color: var(--secondary); background-color: transparent; border-color: var(--secondary-200); } .btn-secondary-outlined:hover { color: var(--secondary); background-color: var(--secondary-op-8); border-color: var(--secondary); } .btn-secondary-outlined:focus { color: var(--secondary); background-color: var(--secondary-op-12); border-color: var(--secondary); } .btn-secondary-outlined:active { color: var(--secondary); background-color: var(--secondary-op-12); border-color: var(--secondary); } .btn-secondary-outlined:disabled, .btn-secondary-outlined.disabled { color: var(--text-secondary); background-color: #d3d3d3; border-color: #d3d3d3; opacity: 0.65; } /* tertiary button */ .btn-tertiary-outlined { color: #fff; background-color: transparent; border-color: var(--tertiary-200); } .btn-tertiary-outlined:hover { color: #fff; background-color: var(--tertiary-op-8); border-color: var(--tertiary); } .btn-tertiary-outlined:focus { color: #fff; background-color: var(--tertiary-op-12); border-color: var(--tertiary); } .btn-tertiary-outlined:active { color: #fff; background-color: var(--tertiary-op-12); border-color: var(--tertiary); } .btn-tertiary-outlined:disabled, .btn-tertiary-outlined.disabled { color: var(--text-secondary); background-color: transparent; border-color: #d3d3d3; opacity: 0.65; } /* accent-yellow button */ .btn-accent-yellow-outlined { color: #fff; background-color: transparent; border-color: var(--accent-yellow-200); } .btn-accent-yellow-outlined:hover { color: #fff; background-color: var(--accent-yellow-op-8); border-color: var(--accent-yellow); } .btn-accent-yellow-outlined:focus { color: #fff; background-color: var(--accent-yellow-op-12); border-color: var(--accent-yellow); } .btn-accent-yellow-outlined:active { color: #fff; background-color: var(--accent-yellow-op-12); border-color: var(--accent-yellow); } .btn-accent-yellow-outlined:disabled, .btn-accent-yellow-outlined.disabled { color: var(--text-secondary); background-color: transparent; border-color: #d3d3d3; opacity: 0.65; } /* accent-yellow button */ .btn-accent-green-outlined { color: var(--accent-green-600); background-color: transparent; border-color: var(--accent-green-200); } .btn-accent-green-outlined:hover { color: var(--accent-green-600); background-color: var(--accent-green-op-8); border-color: var(--accent-green); } .btn-accent-green-outlined:focus { color: var(--accent-green-600); background-color: var(--accent-green-op-12); border-color: var(--accent-green); } .btn-accent-green-outlined:active { color: var(--accent-green-600); background-color: var(--accent-green-op-12); border-color: var(--accent-green); } .btn-accent-green-outlined:disabled, .btn-accent-green-outlined.disabled { color: var(--text-secondary); background-color: #d3d3d3; border-color: transparent; opacity: 0.65; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ----------------- Header CSS (Note: Delete it when header is common on all pages) ----------------------------- */ .marketplace_header { background-color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 16px 50px; position: sticky; top: 0; z-index: 999; } header.scrolled { border-bottom: 1px solid #E8E8EA; /* Show border when scrolled */ } .marketplace_header .nav-links { display: flex; align-items: center; gap: 24px; } .logo_anch { height: 44px; } .marketplace_header .nav-links a, .marketplace_header .nav-links .menu .menu-button, .marketplace_header .nav-links .seller-menu .menu-button { font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; color: #034bbb; cursor: pointer; font-family: var(--font); } a.btn-imp { position: relative; padding: 12px 16px; border-radius: 38px; background: linear-gradient(45deg, #034bb824, #832bb83b, #f4242e36); z-index: 0; } a.btn-imp::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(45deg, #034BB8, #832BB8, #F4242E); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } .marketplace_header .nav-links a:hover { color: #2570e9; text-decoration: none; } .mobile_header { display: none; } .menu, .seller-menu { position: relative; display: inline-block; } .menu-button { background: none; border: none; font-size: 16px; cursor: pointer; display: flex; align-items: center; gap: 0px; } .menu-button img { width: 24px; height: 24px; transition: transform 0.3s ease; } .menu.open .menu-button img { transform: rotate(180deg); } .seller-menu.open .menu-button img { transform: rotate(180deg); } .service-dropdown, .seller-dropdown { display: none; max-height: 0; overflow: hidden; opacity: 0; position: absolute; top: 36px; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); min-width: 400px; padding: 0; z-index: 1000; transition: all 0.3s ease; } .menu.open .service-dropdown, .seller-menu.open .seller-dropdown { max-height: 600px; /* Large enough to fit all items */ opacity: 1; padding: 8px; display: block; } .marketplace_header .nav-links .menu .service-dropdown a, .marketplace_header .nav-links .seller-menu .seller-dropdown a { display: flex; align-items: center; gap: 32px; padding: 10px 16px; text-decoration: none; color: var(--text); font-size: 16px; line-height: 24px; border-radius: 16px; transition: background 0.2s ease; } .service-dropdown a:hover, .seller-dropdown a:hover, .service-dropdown a.active, .seller-dropdown a.active{ background: var(--primary-op-8); color: var(--primary) !important; } .marketplace_header .nav-links .menu .service-dropdown a img { width: 40px; } .marketplace_header .nav-links .seller-menu .seller-dropdown a img { width: 40px; } .mobile-menu { display: block; } .left-menu-wrapper { display: flex; gap: 24px; } @media (max-width: 768px) { .logo { width: 180px; } .logo img { width: 100%; } .marketplace_header { display: none; } .mobile_header { display: flex; justify-content: space-between; align-items: center; padding: 16px; } .menu-btn-wrapper { display: flex; align-items: center; justify-content: center; gap: 16px; } .burger-menu, .menu-list-btn { background: 0 0; border: none; cursor: pointer; } .mobile-nav-links { display: none; position: absolute; top: 76px; right: 0; background: #fff; width: 100%; flex-direction: column !important; padding: 24px; box-shadow: 0 2px 5px rgba(0, 0, 0, .1); z-index: 1000; max-height: calc(100vh - 69px); overflow-y: auto; } .mobile-nav-links a, .mobile-nav-links .menu-mobile .service-menu-button-mobile, .mobile-nav-links .menu-mobile .seller-menu-button-mobile { padding: 16px 0; font-family: var(--font); font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; color: #034bbb; cursor: pointer; text-align: left; } .mobile-nav-links.visible { display: flex; } .mobile-menu { display: block; } } /* Mobile Menu Dropdown */ .menu-mobile { display: block; width: 100%; } .service-menu-button-mobile, .seller-menu-button-mobile { background: none; border: none; display: flex; justify-content: space-between; align-items: center; width: 100%; } .service-menu-button-mobile img, .seller-menu-button-mobile img { width: 24px; height: 24px; transition: transform 0.3s ease; } .menu-mobile.open .service-menu-button-mobile img, .menu-mobile.open .seller-menu-button-mobile img { transform: rotate(180deg); } .dropdown-mobile { max-height: 0; overflow: hidden; opacity: 0; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); width: 100%; padding: 0; transition: all 0.3s ease; } .menu-mobile.open .dropdown-mobile { max-height: 1000px; /* large enough to fit all items */ opacity: 1; padding: 8px 0; } .dropdown-mobile a { display: flex; align-items: center; gap: 32px; padding: 12px 0px; text-decoration: none; color: #222; font-size: 16px; font-weight: 400; transition: background 0.2s ease; } .dropdown-mobile a:hover, .dropdown-mobile a.active, .dropdown-mobile a:focus { background: var(--primary-op-8); } .dropdown-mobile a img { width: 24px; height: 24px; } /* ------Profile pic css-------- */ .user_actions { display: flex; gap: 8px; } .user_actions .avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin-left: 4px; cursor: pointer; border: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center; position: relative; } .user_actions .avatar a img{ width: 100%; height: 100%; object-fit: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* ---------------------------- Header CSS ends here --------------------------------- */ /* ----------------- Footer CSS (Note: Delete it when footer is common on all pages) ----------------------------- */ .mp-footer-container { background-color: #f0f0f0; padding: 96px 50px; position: relative; overflow: hidden; } .mp-main-content { display: flex; flex-direction: column; gap: 48px; } .mp-main-content hr { border: 1px solid #e0e0e0; } /* Main Links Section */ .mp-links-section { display: flex; gap: 96px; width: 100%; } .mp-column { flex: 1; display: flex; flex-direction: column; gap: 24px; min-width: 200px; } .mp-column-title { font-weight: 600; font-size: 16px; color: var(--text); line-height: 24px; } .mp-column-links { display: flex; flex-direction: column; } .mp-column-link { font-weight: 400; font-size: 16px; color: var(--text-secondary); line-height: 24px; text-decoration: none; padding: 8px 0; transition: all 0.3s ease; display: flex; align-items: center; } .mp-column-link:hover { text-decoration: none; color: var(--text); } .mp-column-link:hover img { opacity: 1; } .mp-column-link img { width: 24px; margin-right: 16px; opacity: .6; fill: blue; } /* Bottom Section */ .mp-bottom-section { display: flex; gap: 96px; align-items: center; width: 100%; padding: 16px 0; border-top: 1px solid #aeaeb2; border-bottom: 1px solid #aeaeb2; } .mp-logo-section { width: 249px; height: 67px; background-color: #ddd; border-radius: 4px; } /* Talentrack Logo */ .mp-talentrack-logo { margin: 48px 0 0; width: 100%; height: auto; max-width: 1820px; } .mp-talentrack-svg { width: 100%; height: 100%; } .new_footer { background: #333; padding: 20px 0 !important; text-align: center; } .new_footer .tr_quote { color: #fff; margin: 0; } /* Responsive Design */ @media (max-width: 1024px) { .mp-footer-container { padding: 48px 25px; } .mp-links-section { gap: 48px; } .mp-bottom-section { gap: 48px; } .mp-talentrack-logo { left: 25px; width: calc(100% - 50px); max-width: none; } } @media (max-width: 768px) { .mp-links-section { flex-direction: column; gap: 32px; } .mp-bottom-section { flex-direction: column; gap: 24px; align-items: flex-start; } .mp-app-badges { flex-direction: column; gap: 8px; } .mp-talentrack-logo { position: static; margin-top: 48px; width: 100%; } } /* ---------------------------- Footer CSS ends here --------------------------------- */ /*****************css for Enquiry form seller-details**************/ /* Blur overlay style */ .enquiry-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 999; display: none; backdrop-filter: blur(5px); } /* Enquiry form style */ .enquiry-form { position: fixed; top: 0; right: 0; width: 100%; max-width: 470px; height: 100%; background-color: #fff; padding: 20px; box-sizing: border-box; z-index: 1001; transform: translateX(100%); transition: transform 0.5s ease-in-out; /* overflow-y: scroll; */ } .enquiry-form.open { transform: translateX(0); box-shadow: -4px 0px 48px rgba(0, 0, 0, 0.3); } .enquiry-form h2 { margin-top: 0; } .enquiry-form input, .enquiry-form textarea { width: 100%; padding: 14px; border: 1px solid #ccc; /* border-radius: 5px; */ } .enquiry-form button { background-color: #4CAF50; color: white; border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; } .enquiry-form button:hover { background-color: #45a049; } .enquiry-form #submitreport { width: auto; } .coll_cat_wrapper { margin: 0 auto 40px; padding: 56px 0 0; width: 1000px; } .coll_categories_wrap { align-items: stretch; display: flex; justify-content: space-between; margin-bottom: 20px; } .category_quote { color: #212121; font-size: 20px; line-height: 24px; } .brief_us_quote { color: #fff; font-size: 34px; font-weight: normal; line-height: 48px; margin-bottom: 36px; } .coll_brief_icon { background-color: #d10001; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; bottom: 20px; cursor: pointer; height: 52px; width: 52px; position: fixed; right: 12px; z-index: 99997; display: flex; justify-content: center; align-items: center; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); cursor: pointer; padding: 0 10px; } .coll_brief_icon img { width: 26px; height: 26px; } .crisp_chat { display: none; } .submit_btn_screen { background-color: #fff; -o-border-radius: 20px; -ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); bottom: 44px; display: none; overflow: hidden; position: fixed; right: 20px; width: 320px; z-index: 99998; } .submit_btn_screen img { display: block; width: 100%; } .brief_txt { color: #212121; font-size: 20px; line-height: 24px; margin-bottom: 30px; padding: 22px 25px 0; } .brief_btn_wrap { padding: 0 25px 25px; text-align: right; } .call_submit { cursor: pointer; } .submit_screen { background-color: #fff; display: none; position: fixed; right: 0; top: 0; overflow: auto; width: 100%; z-index: 1100000; height: 100vh; /* padding: 40px 48px 40px; */ } .coll_form_wrap { padding: 40px 48px 40px; /* max-height: calc(100vh - 150px); overflow-y: auto;*/ } .coll_form_wrap p { margin-bottom: 24px; } .collab_input { border: solid 1px #E1E1E1; -o-border-radius: 10px; -ms-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #666; font-size: 16px; height: 48px; line-height: 48px; padding: 0 16px; width: 100%; } .collab_input:hover, .collab_input:active, .collab_input:focus { border: solid 1px #E1E1E1; outline: none; } .collab_form_input { min-height: 72px; } .collab_form_textarea { min-height: 144px; } .collab_form_textarea .collab_input { min-height: 120px; padding-top: 12px; resize: none; line-height: 24px; font-size: 16px; } .dropdown-form-toggle:hover { border-color: #007bff; } .dropdown-form-toggle::after { content: '▾'; font-size: 14px; color: #555; transition: transform 0.3s ease; } .dropdown-form.active .dropdown-form-toggle::after { transform: rotate(180deg); } .dropdown-form-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: 10px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 10; } .dropdown-form.active .dropdown-form-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-form-menu div { padding: 12px 16px; cursor: pointer; transition: background 0.2s; } .dropdown-form-menu div:hover { background: #007bff; color: #fff; } .form_error, .inline-error { color: #e82c0c; font-size: 11px; line-height: 18px; } .text-danger { color: #e82c0c;/*#dc3545;*/ } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #666; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #666; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #666; } .coll_btn_wrap { padding-top: 17px; text-align: right; } .cancel_btn { border: 0; color: #d10001; cursor: pointer; display: inline-block; font-size: 14px; height: 48px; line-height: 48px; margin-right: 24px; padding: 0 20px; text-decoration: none; outline: none; } .collaboration_close_bg { background-color: rgba(0, 0, 0, 0.2); display: none; position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 99998; } .open_screen+.collaboration_close_bg { display: block; } .submit_screen.open_screen { animation: opnInq 0.2s forwards ease; -webkit-animation: opnInq 0.2s forwards ease; display: block; } @keyframes opnInq { from { opacity: 0; right: -500px; } to { opacity: 1; right: 0; } } @-webkit-keyframes opnInq { from { opacity: 0; right: -500px; } to { opacity: 1; right: 0; } } .submit_screen.close_screen { animation: clsInq 0.2s forwards ease-in; -webkit-animation: clsInq 0.2s forwards ease-in; display: block; } @keyframes clsInq { from { opacity: 1; right: 0; } to { opacity: 0; right: -500px; } } @-webkit-keyframes clsInq { from { opacity: 1; right: 0; } to { opacity: 0; right: -500px; } } .submit_screen>form>img { display: block; width: 100%; } .failed_msge { color: #e82c0c; font-size: 12px; line-height: 14px; padding: 0 48px 0; } .success_msge p { color: #212121; font-size: 28px; line-height: 38px; font-weight: 500; margin: 30px; text-align: center; } .donebtn { margin-top: 25px; display: block; } .success_msge { /* height: calc(100vh - 150.6px); */ /* padding: 40px 48px 40px; */ display: flex; align-items: center; justify-content: center; height: 100vh; } .submit_btn_screen.open_bt_sb { display: none !important; } div.mini_alert_wrp.open_wrp, div.mini_alert_wrp { display: none; } .page_container { margin: 0 auto; max-width: 1000px; } .enq_form_title { font-size: 28px; margin-top: 0px; font-weight: 600; line-height: 42px; margin-bottom: 24px; } .cancel_btn { border: 0; color: #034bb8; cursor: pointer; display: inline-block; font-size: 14px; height: 48px; line-height: 48px; margin-right: 24px; padding: 0 20px; text-decoration: none; outline: none; } .form_title { font-size: 28px; margin-top: 0px; font-weight: 600; line-height: 42px; margin-bottom: 48px; color: var(--text) } .form_title span { white-space: nowrap; } /* Responsive Design */ @media (max-width: 576px) { .coll_form_wrap { padding: 40px 24px 40px; } } @media (max-width: 480px) {} @media (max-width: 360px) {} .faq_section { display: flex; gap: 22px; } .faq_title_bx{ display: flex; align-items: flex-start; justify-content: space-between; } .faq_title_bx h3, .faq_title_bx h2 { margin-bottom: 16px; } .faq_title_bx p { font-weight: 400; font-size: 16px; line-height: 24px; margin-bottom: 32px; } .section-title { margin: 0px; background-clip: text; font-size: clamp(2rem, 6vw, 3rem); line-height: 48px; font-weight: 500; color: var(--text); } .faq-container{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; } .faq-item { border-bottom: 1px solid #C1C1C1; } ul.faqlist { margin: 0px 0 24px; font-size: 16px; line-height: 24px; font-weight: 400; } ul.faqlist li { list-style: inside; margin-bottom: 8px; } ul.faqlist li:last-child { margin-bottom: 0px; } .faq-header.active { border-bottom: 0px solid #C1C1C1; } .faq-header { position: relative; transition: background 0.3s ease; width: 100%; text-align: left; padding: 16px 20px 0 0px; background: none; color: var(--text); font-weight: 500; font-size: 20px; line-height: 26px; border: none; cursor: pointer; height: 88px; display: flex; align-items: center; } .faq-header::after { content: "+"; position: absolute; right: 20px; font-size: 20px; transition: transform 0.3s; } .faq-header.active::after { content: "-"; transform: rotate(180deg); } .faq-content { overflow: hidden; max-height: 0; transition: max-height 0.5s ease-out, padding 0.3s ease-out; padding-right: 28px; } .faq-content p { margin: 0px 0 24px; font-size: 16px; line-height: 24px; font-weight: 400; } .view_all{ display: block; text-align: center; } .knowledge_content { width: calc(100% - 40%); } .knowledge_title_bx { justify-content: center; text-align: center; } .knowledge_section { align-items: center; justify-content: center; } .knowledge_container { background: rgb(240, 240, 240); padding: 48px; border-radius: 56px; } @media (max-width: 768px) and (min-width: 320px) { .knowledge_container{ padding: 28px } .faq_title_bx { flex-direction: column; } .faq-header { padding: 18px 34px 18px 0; font-size: 16px; line-height: 20px; } .faq-container { grid-template-columns: repeat(1, 1fr); gap: 0; } .faq_section{ display: inline-block; margin-bottom: 0px !important; } .knowledge_content, .faq_content{ width: 100%; border:0px; } .faq-header{ font-size: 14px; line-height: 20px; padding: 16px 28px 16px 0; } ul.faqlist, .faq-content p{ font-size: 14px; line-height: 24px; } .section_title { background-clip: text; color: #333; text-align: center; font-size: 32px; line-height: 42px; font-weight: 600; margin-bottom: 22px; margin-top: 16px; } .faq_title_bx p { font-weight: 400; font-size: 14px; line-height: 22px; margin-bottom: 24px; } } .mp-footer-container { background-color: #f0f0f0; padding: 96px 50px; position: relative; overflow: hidden; } .mp-main-content { display: flex; flex-direction: column; gap: 48px; } .mp-main-content hr { border: 1px solid #e0e0e0; } /* Main Links Section */ .mp-links-section { display: flex; gap: 96px; width: 100%; } .mp-column { flex: 1; display: flex; flex-direction: column; gap: 24px; min-width: 200px; } .mp-column-title { font-weight: 600; font-size: 16px; color: var(--text); line-height: 24px; } .mp-column-links { display: flex; flex-direction: column; } .mp-column-link { font-weight: 400; font-size: 16px; color: var(--text-secondary); line-height: 24px; text-decoration: none; padding: 8px 0; transition: all 0.3s ease; display: flex; align-items: center; } .mp-column-link:hover { text-decoration: none; color: var(--text); } .mp-column-link:hover img { opacity: 1; } .mp-column-link img { width: 24px; margin-right: 16px; opacity: .6; fill: blue; } /* Bottom Section */ .mp-bottom-section { display: flex; gap: 96px; align-items: center; width: 100%; padding: 16px 0; border-top: 1px solid #aeaeb2; border-bottom: 1px solid #aeaeb2; } .mp-logo-section { width: 249px; height: 67px; background-color: #ddd; border-radius: 4px; } /* Talentrack Logo */ .mp-talentrack-logo { margin: 48px 0 0; width: 100%; height: auto; max-width: 1820px; } .mp-talentrack-svg { width: 100%; height: 100%; } .new_footer { background: #333; padding: 20px 0 !important; text-align: center; } .new_footer .tr_quote { color: #fff; margin: 0; } /* Responsive Design */ @media (max-width: 1024px) { .mp-footer-container { padding: 48px 25px; } .mp-links-section { gap: 48px; } .mp-bottom-section { gap: 48px; } .mp-talentrack-logo { left: 25px; width: calc(100% - 50px); max-width: none; } } @media (max-width: 768px) { .mp-links-section { flex-direction: column; gap: 32px; } .mp-bottom-section { flex-direction: column; gap: 24px; align-items: flex-start; } .mp-app-badges { flex-direction: column; gap: 8px; } .mp-talentrack-logo { position: static; margin-top: 48px; width: 100%; } } .footer-category-links { color: #333; } .footer-category-links section h4 { font-size: 16px; color: var(--text); padding-bottom: 8px; font-weight: 500; } .footer-category-links ul { list-style: none; padding-left: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .footer-category-links a { display: block; padding: 6px 10px; border: 1px solid #e0e0e0; border-radius: 4px; text-decoration: none; color: #666; font-size: 14px; transition: all 0.3s ease-in-out; } .footer-category-links a:hover { border-color: var(--text); color: var(--text); } .pd_bottom32{ padding-bottom:32px } * { margin: 0; padding: 0; box-sizing: border-box; } body.loading { overflow: hidden; } a { text-decoration: none; } .d-none { display: none !important; } /* Scrollbar track */ ::-webkit-scrollbar { width: 8px; /* or height for horizontal */ } ::-webkit-scrollbar-track { background: #00000011; } /* Scrollbar thumb (the draggable part) */ ::-webkit-scrollbar-thumb { background: #034BB8; border-radius: 0px; background-clip: content-box; } /* Hover effect */ ::-webkit-scrollbar-thumb:hover { background: #034BB8; } body { font-family: var(--font); line-height: 1.6; color: var(--text); background-color: #ffffff; overscroll-behavior: none; overflow-x: hidden; } /* ----------------- Footer CSS (Note: Delete it when footer is common on all pages) ----------------------------- */ .mp-footer-container { background-color: #f0f0f0; padding: 96px 50px; position: relative; overflow: hidden; } .mp-main-content { display: flex; flex-direction: column; gap: 48px; } .mp-main-content hr { border: 1px solid #e0e0e0; } /* Main Links Section */ .mp-links-section { display: flex; gap: 96px; width: 100%; } .mp-column { flex: 1; display: flex; flex-direction: column; gap: 24px; min-width: 200px; } .mp-column-title { font-weight: 600; font-size: 16px; color: var(--text); line-height: 24px; } .mp-column-links { display: flex; flex-direction: column; } .mp-column-link { font-weight: 400; font-size: 16px; color: var(--text-secondary); line-height: 24px; text-decoration: none; padding: 8px 0; transition: all 0.3s ease; display: flex; align-items: center; } .mp-column-link:hover { text-decoration: none; color: var(--text); } .mp-column-link:hover img { opacity: 1; } .mp-column-link img { width: 24px; margin-right: 16px; opacity: .6; fill: blue; } /* Bottom Section */ .mp-bottom-section { display: flex; gap: 96px; align-items: center; width: 100%; padding: 16px 0; border-top: 1px solid #aeaeb2; border-bottom: 1px solid #aeaeb2; } .mp-logo-section { width: 249px; height: 67px; background-color: #ddd; border-radius: 4px; } /* Talentrack Logo */ .mp-talentrack-logo { margin: 48px 0 0; width: 100%; height: auto; max-width: 1820px; } .mp-talentrack-svg { width: 100%; height: 100%; } .new_footer { background: #333; padding: 20px 0 !important; text-align: center; } .new_footer .tr_quote { color: #fff; margin: 0; } /* Responsive Design */ @media (max-width: 1024px) { .mp-footer-container { padding: 48px 25px; } .mp-links-section { gap: 48px; } .mp-bottom-section { gap: 48px; } .mp-talentrack-logo { left: 25px; width: calc(100% - 50px); max-width: none; } } @media (max-width: 768px) { .mp-links-section { flex-direction: column; gap: 32px; } .mp-bottom-section { flex-direction: column; gap: 24px; align-items: flex-start; } .mp-app-badges { flex-direction: column; gap: 8px; } .mp-talentrack-logo { position: static; margin-top: 48px; width: 100%; } } /* ---------------------------- Footer CSS ends here --------------------------------- */ .no-js .slide-up { opacity: 1; transform: none; } .slide-up { opacity: 0; transform: translateY(80px); will-change: transform, opacity; } p { margin: 0; padding: 0; color: var(--text); font-size: 16px; line-height: 24px } .text-white { color: #fff !important; } .nxt_prv_icon_btn { width: 40px; height: 40px; border: none; border-radius: 50%; background-color: var(--primary-100); color: var(--primary); font-size: 18px; cursor: pointer !important; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; outline: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; transition: all 0.3s ease-in-out; } .nxt_prv_icon_btn:hover { background-color: var(--primary-200); color: var(--primary-700); } .nxt_prv_icon_btn:focus { background-color: var(--primary-100); color: var(--primary); } a.scroll-to-btn { position: absolute; height: 72px; width: 42px; border: 4px solid #ffffff; margin: auto; left: 0; right: 0; /*bottom: 64px;*/ bottom: 16px; border-radius: 24px; } a.scroll-to-btn::before { position: absolute; content: ""; margin: auto; left: 0; right: 0; top: 8px; height: 12px; width: 12px; background-color: #ffffff; border-radius: 50%; animation: move-down 2s infinite; } @keyframes move-down { 80% { opacity: 0.5; } 100% { transform: translateY(36px); opacity: 0; } } .action-btn-container { margin-top: 48px; text-align: center; } .section-gradient { background: linear-gradient(135deg, #E6D5F1, #CCEBD9, #CDDBF1, #fff, #FDD3D5, #FFF7CC); background-size: 200% 200%; animation: gradient 8s ease infinite; padding: 96px 50px; /* height: 100vh; */ } .text-gradient { background: linear-gradient(135deg, #d6aff0, #b8ffd6, #a4c7ff, #fff, #ff9da2, #ffef95); background-size: 200% 200%; animation: gradient 8s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; /* For Firefox */ background-clip: text; color: transparent; } .hero-video-gradient { /* background: linear-gradient(135deg, #9a00ffcf, #172ea0b8, #020c2f94, #2e2121c0, #c71b24b8, #925b00c4); */ background: #0000008f; background-size: 200% 200%; animation: gradient 16s ease infinite; padding: 96px 50px; height: 80vh; } .hero-video-black { background: black; opacity: .5; background-size: 200% 200%; animation: gradient 16s ease infinite; padding: 96px 50px; height: 80vh; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .container { width: 100%; margin: 0 auto; padding: 0 50px; } /* Header Styles */ .header { background: white; padding: 20px 0; /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */ } .mp-slider-list-wrapper { display: flex; gap: 24px; } .logo { display: flex; align-items: center; gap: 12px; } .logo-icon { width: 32px; height: 32px; position: relative; } .logo-squares { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 100%; height: 100%; } .square { width: 14px; height: 14px; border-radius: 3px; } .square.red { background-color: var(--tertiary); } .square.blue { background-color: var(--primary); } .square.yellow { background-color: var(--accent-yellow); } .square.green { background-color: var(--accent-green); } .logo-text { font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; } /* Hero Section */ .hero { color: white; padding: 96px 0; margin: 24px 50px 0px 50px; border-radius: 56px; position: relative; } .banner_img img { width: 100%; } .banner_img { display: flex; align-items: center; justify-content: center; height: 60vh; overflow: hidden; position: relative; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-text h1 { font-size: clamp(2rem, 6vw, 4rem); font-weight: 700; line-height: 1.3; margin-bottom: 20px; } .hero-text h2, .hero-text p { font-size: 18px; margin-bottom: 48px; opacity: 0.9; color: #fff; } /* Hero Video */ .hero-video { color: white; /* padding: 96px 0; */ margin: 0px 50px 0px 50px; border-radius: 56px; overflow: hidden; height: 80vh; position: relative; } .hero-video .container { width: 100%; margin: 0; padding: 0; } .hero-video-content { position: relative; height: 80vh; } .video-overlay { position: absolute; width: 100%; z-index: 1; height: 100%; } .hero-video-content .hero-text { width: 60%; padding: 0 0 0 48px; display: flex; flex-direction: column; height: 100%; justify-content: center; align-items: start; } .hero-video-content .hero-text h1 { font-size: clamp(2rem, 5vw, 4rem); } .hero-video-wrapper { position: absolute; width: 100%; height: 80vh; top: 0; overflow: hidden; left: 50%; transform: translate(-50%); z-index: -1; } .hero-video-wrapper video { /* width: 100%; */ /* object-fit: cover; */ /* height: 100%; */ position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translate(-50%, -50%); object-fit: cover; z-index: 0; } .form-container { background: white; border-radius: 56px; /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); */ padding: 40px; max-width: 500px; width: 100%; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background-image: linear-gradient(180deg, var(--primary-100), var(--primary-200)); } .form-container h2 { margin-bottom: 16px; color: #333; } form input, form textarea { width: 100%; padding: 12px 16px; /* margin-bottom: 20px; */ border: 1px solid #ccc; border-radius: 8px; font-size: 16px; line-height: 24px; box-sizing: border-box; font-family: var(--font); } form input:focus, form textarea:focus, form input:focus-visible, form textarea:focus-visible { border-color: var(--primary); outline: none; } .row { display: flex; gap: 16px; } .row input { width: 100%; } textarea { height: 100px; resize: vertical; } .captcha { margin-bottom: 20px; } /* Banner form */ .form-container-wrapper { position: relative; min-height: 64vh; } .floating-icons { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .icon { position: absolute; width: 40px; height: 40px; /* background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 1); */ border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */ animation: float 3s ease-in-out infinite; } .influencer-icon-1, .brand-icon-1 { top: -23%; left: 25%; animation-delay: 0s; font-size: 86px; width: 96px; height: 96px; rotate: -43deg; z-index: 2; } .influencer-icon-2, .brand-icon-2 { top: 30%; right: 12%; font-size: 44px; width: 72px; height: 72px; rotate: -43deg; rotate: 45deg; } .influencer-icon-3, .brand-icon-3 { bottom: 150px; right: -20px; animation-delay: 1s; } .influencer-icon-4, .brand-icon-4 { bottom: 30%; left: 24%; animation-delay: 1.5s; rotate: -16deg; } .influencer-icon-4 img, .brand-icon-4 img { width: 94px; } .influencer-icon-5, .brand-icon-5 { bottom: 15%; right: 22%; width: 96px; height: 96px; font-size: 100px; animation-delay: 2s; z-index: 2; } .brand-icon-5 img { width: 96px; } .influencer-icon-6, .brand-icon-6 { top: 0; right: 30%; animation-delay: 1.5s; } .influencer-icon-6 img, .brand-icon-6 img { width: 156px; } .person-placeholder { width: 600px; height: 540px; /* background: linear-gradient(135deg, var(--secondary) 0%, var(--tertiary) 100%); */ border-radius: 15px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; /* align-items: center; */ justify-content: center; } .person-placeholder img { height: 100%; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Main Content */ .main-content { padding: 0px 0 16vh; background: white; } .container { position: relative; } .content-header { /* text-align: center; */ margin: 16vh 0; position: relative; } #confetti-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10; } .content-header h2 { font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.2; font-weight: 500; color: var(--text); padding-bottom: 48px; max-width: 1000px; margin-left: auto; margin-right: auto; overflow: hidden; } .content-header p { line-height: 1.4; color: var(--text-secondary); max-width: 1000px; margin-left: auto; margin-right: auto; font-size: clamp(1rem, 2vw, 1.5rem); color: #444; opacity: 1; } .emoji-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .floating-emoji { position: absolute; opacity: 0; transform: scale(0.8); filter: grayscale(0.3) opacity(0.4); transition: all 0.3s ease; } /* ------------------------- Accordion - Start -------------------------------- */ .accordion-container { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; /* padding: 40px; */ max-width: 1440px; margin: auto; gap: 16%; } .accordion { flex: 1; display: flex; flex-direction: column; margin-top: 12vh; max-width: 36%; } .accordion-item { cursor: pointer; padding: 20px 0; border-bottom: 1px solid #ddd; } .accordion-item:last-child { border-bottom: none; } .accordion-title { display: flex; justify-content: space-between; align-items: center; } .accordion-title h3 { font-size: 20px; font-weight: 600; color: var(--text); } .accordion-icon { position: relative; width: 24px; height: 24px; margin-left: 8px; } .accordion-icon .arrow-icon { position: absolute; top: 0; left: 0; transition: all 0.2s ease-in-out; opacity: 0; } .accordion-item.active .accordion-icon .icon-up { opacity: 1; } .accordion-item:not(.active) .accordion-icon .icon-down { opacity: 1; } .accordion-description-wrapper { overflow: hidden; transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .accordion-description { margin-top: 10px; font-size: 16px; color: var(--gray); padding-bottom: 10px; opacity: 0; transition: opacity 0.3s ease-in-out; } .accordion-item.active .accordion-description { opacity: 1; } .image-preview { flex: 1; position: relative; height: 56vh; } .image-preview img { width: 100%; height: 100%; object-fit: contain; border-radius: 20px; position: absolute; top: 50%; left: 50%; opacity: 0; transform: scale(0.98) translate(-50%, -50%); transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; } .image-preview img.active { opacity: 1; transform: scale(1) translate(-50%, -50%); z-index: 1; } .mobile-image { display: none; margin-top: 16px; } .mobile-image img { width: 100%; border-radius: 16px; } @media (max-width: 768px) { .container { flex-direction: column; padding: 24px; gap: 32px; } .image-preview { display: none; } .mobile-image { display: block; } } /* ------------------------- Accordion - End -------------------------------- */ /* ------------------------- Case study -------------------------------- */ .cs-container { max-width: 1000px; margin: 0 auto; } .cs-container .swiper { padding: 0 0 8px; } .cs-list-item { border-radius: 56px; display: flex; flex-direction: column; justify-content: space-between; } .cs-list-item p { max-width: 580px; /* margin: 0 auto; */ font-size: clamp(1rem, 4vw, 1.25rem); line-height: 1.4; align-items: flex-end; } .cs-list-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .cs-video-wrapper { position: relative; width: 100%; height: 48vh; max-height: 580px; margin-bottom: 64px; overflow: hidden; } .cs-video-wrapper a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; overflow: hidden; border-radius: 56px; } .cs-video-wrapper:hover img { scale: 1.05; } .cs-video-wrapper img { width: 100%; height: 100%; object-fit: cover; border-radius: 56px; transition: all .3s ease-in-out; } .cs-discover-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180px; height: 56px; background: rgba(0, 0, 0, 0.6) url('play-icon.svg') center center no-repeat; background-size: 32px 32px; border-radius: 56px; display: none; font-size: 16px; color: white; text-align: center; line-height: 56px; font-weight: 600; text-transform: capitalize; } .cs-content { display: flex; flex-direction: row; gap: 96px; justify-content: space-between; } .cs-list-item h3 { font-size: clamp(1.25rem, 4vw, 2rem); line-height: 48px; font-weight: 500; color: var(--text); line-height: 1.4; margin: 0 0 8px; } .cs-swiper .swiper-wrapper { margin: 0 0 48px; } .cs-slide-bottom-wrapper { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 16px; box-sizing: border-box; } .cs-slide-bottom-wrapper .swiper-pagination { text-align: left; padding: 0 16px; max-width: 40%; } .swiper-pagination-bullet { background: var(--primary-500); opacity: 0.3; width: 8px; height: 8px; border-radius: 4px; transition: all 0.3s ease-in-out; } .swiper-pagination-bullet-active { opacity: 1; width: 16px; } .cs-controls { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; } .cs-btn-wrapper { display: flex; gap: 12px; } .cs-button img { width: 24px; height: 24px; } .brand-cs-list, .staffing-cs-list { padding: 0 0 16vh; } #customCursor { position: fixed; top: 0; left: 0; width: 80px; height: 80px; border-radius: 50%; background-color: black; color: white; font-size: 14px; font-weight: bold; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 9999; opacity: 0; transform: scale(0.8); /* ONLY scale, no translate */ will-change: transform; transition: none; } #discoverCursor { position: fixed; top: 0; left: 0; width: 120px; height: 120px; border-radius: 50%; background-color: #000000dc; color: white; font-size: 14px; font-weight: bold; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 9999; opacity: 0; transform: scale(0.8); /* ONLY scale, no translate */ will-change: transform; transition: none; } /* ------------------------- Case study - End -------------------------------- */ .influencers-section { padding: 0 50px; } .talent-list-section { padding: 16vh 50px; } .talent-list-item { padding: 24px; background-color: var(--primary-100); border-radius: 28px; display: flex; flex-direction: column; justify-content: space-between; } .talent-list-item img { width: 100%; } .talent-container h2 { font-size: clamp(2rem, 6vw, 3rem); line-height: 48px; font-weight: 500; color: var(--text); } .talent-list-item h3 { font-size: 28px; font-weight: 500; color: var(--text); line-height: 1.4; } .talent-list-item p { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text); margin-bottom: 24px; } .talent-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; } .talent-header .controls, .talent-container .controls { display: flex; align-items: center; gap: 12px; margin-top: 12px; } .talent-container .controls-bottom { display: none; } .inf-btn-wrapper { display: flex; gap: 12px; } .thumb-img-wrapper { overflow: hidden; aspect-ratio: 1; border-radius: 16px; } /* ------------------------- Horizontal Slider (hr) - Start -------------------------------- */ .hr-slide-container { position: relative; overflow: hidden; width: 100%; padding: 0 50px; } .hr-slide-container .swiper { overflow: visible; } .hr-slide { position: relative; overflow: hidden; height: 600px; padding: 32px 32px; border-radius: 28px; } .hr-slide-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .swiper-button-disabled { opacity: 0.3; pointer-events: none; cursor: not-allowed; } .hr-slide-img img { width: 100%; height: 100%; object-fit: cover; } .hr-slide-bottom-wrapper { margin: 48px 0 0; } .hr-btn-wrapper { display: flex; gap: 16px; align-items: center; justify-content: end; } /* ------------------------- Horizontal Slider (hr) - End -------------------------------- */ .cta-footer-button-wrapper { position: relative; margin-bottom: 16vh; } .hover-button { width: 100%; position: relative; padding: 5rem 2.5rem; font-size: clamp(1.25rem, 6vw, 2rem); font-weight: 500; line-height: 1.2; color: #fff; background: var(--primary); border: none; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 1rem; border-radius: 200px; } .hover-circle { position: absolute; width: 1200px; height: 1200px; background: var(--primary-700); border-radius: 50%; transform: scale(0); z-index: 1; pointer-events: none; } .hover-button span { position: relative; z-index: 2; transition: color 0.3s ease; } .call-icon { position: relative; z-index: 2; width: 40px; height: 40px; fill: currentColor; animation: pulse 2s infinite ease-in-out; } .banner_heading { color: #fff; font-size: 48px; font-weight: normal; line-height: 52px; margin-bottom: 44px; margin-top: 10px; text-transform: uppercase; } .main_bann_fl:first-child { text-align: left; } .main_bann_fl .brief_submit_btn { animation: brandAnimBtn 2s forwards ease-in-out; -webkit-animation: brandAnimBtn 2s forwards ease-in-out; display: inline-block; position: relative; } @keyframes brandAnimBtn { from { top: 50px; opacity: 0; } to { top: 0; opacity: 1; } } @-webkit-keyframes brandAnimBtn { from { top: 50px; opacity: 0; } to { top: 0; opacity: 1; } } .main_bann_fl .banner_heading, .main_bann_fl .banner_creative { animation: brandAnimHead 2s forwards ease, step-start; -webkit-animation: brandAnimHead 2s forwards ease, step-start; display: block; position: relative; } @keyframes brandAnimHead { from { top: 50px; opacity: 0; } to { top: 0; opacity: 1; } } @-webkit-keyframes brandAnimHead { from { top: 50px; opacity: 0; } to { top: 0; opacity: 1; } } .page_sec_heading { color: #000; font-weight: normal; font-size: 48px; line-height: 72px; margin-bottom: 30px; } .para_sec_sub { color: #666; font-size: 20px; line-height: 28px; margin: 0; padding-right: 40px; } .mid_box:first-child { padding-right: 60px } .page_head_fl { color: #212121; font-size: 48px; font-weight: normal; line-height: 72px; } .capa_sub_head { color: #666; font-size: 20px; line-height: 30px; margin-bottom: 0; } .cta_content_services { background: rgb(240, 240, 240); padding: 48px; border-radius: 56px; display: flex; align-items: center; justify-content: space-between; gap: 48px; } .cta_content_services p { font-weight: 500; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.4; color: var(--text); margin: 0; } .cta_content { display: flex; align-items: center; justify-content: space-between; height: 100%; } .cta_content p { font-weight: 600; font-size: 32px; line-height: 40px; color: #fff; margin: 0; } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } @media (max-width: 1536px) { .influencer-icon-1, .brand-icon-1 { top: -23%; left: 18%; animation-delay: 0s; font-size: 86px; width: 96px; height: 96px; rotate: -43deg; z-index: 2; } .influencer-icon-4, .brand-icon-4 { bottom: 30%; left: 15%; } .influencer-icon-5, .brand-icon-5 { bottom: 15%; right: 13%; font-size: 87px; } } @media (max-width: 1280px) { .hero-video-content .hero-text { width: 100%; align-items: center; padding: 0 16px; } .hero-video-content .hero-text h1 { text-align: center; } .hero-video-content .hero-text p { text-align: center; } .influencer-icon-1, .brand-icon-1 { top: -23%; left: 12%; animation-delay: 0s; font-size: 86px; width: 96px; height: 96px; rotate: -43deg; z-index: 2; } .influencer-icon-4, .brand-icon-4 { bottom: 30%; left: 0; } .influencer-icon-5, .brand-icon-5 { bottom: 9%; right: 6%; font-size: 87px; } .influencer-icon-6, .brand-icon-6 { top: 0; right: 19%; animation-delay: 1.5s; } .cs-container .swiper { padding: 0 16px 8px; } .accordion { max-width: 100%; } } @media (max-width: 992px) { .hero-content { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; gap: 40px; } .hero-text { order: 2; text-align: center; } a.scroll-to-btn, a.scroll-to-btn::before { display: none; } .staffing-banner-img { order: 1; } .influencer-icon-1, .brand-icon-1 { top: -23%; left: 12%; animation-delay: 0s; font-size: 86px; width: 96px; height: 96px; rotate: -43deg; z-index: 2; } .influencer-icon-4, .brand-icon-4 { bottom: 30%; left: -11%; } .influencer-icon-5, .brand-icon-5 { bottom: 15%; right: 3%; font-size: 87px; } .influencer-icon-6, .brand-icon-6 { top: 0; right: 26%; animation-delay: 1.5s; } .talent-header .controls-top { display: none; } .talent-container .controls-bottom { display: flex; align-items: center; gap: 12px; margin-top: 12px; justify-content: center; margin-top: 48px; } .cta_content_services { flex-direction: column; align-items: start; } } /* Responsive Design */ @media (max-width: 768px) { .hero-video-gradient { height: 480px; } .hero-video-black { height: 480px; } .hero-video { height: 480px; } .hero-video-content { height: 480px; } .hero-video-wrapper { height: 480px; } .hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-400) 100%); margin: 16px 16px 0px 16px; } .hero-video { margin: 0px 24px 0px 24px; } .container { padding: 0 24px; } .hero-text h1 { font-size: 36px; } /* #image-text-1, #image-text-2, #image-text-3, #image-text-4 { opacity: 1; } */ .content-header h2 { font-size: 28px; } .influencer-card { width: 100%; height: 390px; bottom: -96px; right: 0px; } .person-placeholder { width: 100%; height: 480px; } .influencer-icon-1 { top: -23%; left: 12%; } .influencer-icon-4 { bottom: 30%; left: 16%; } .influencer-icon-5 { bottom: 15%; right: 13%; font-size: 87px; } .influencer-icon-6 { top: 0; right: 26%; animation-delay: 1.5s; } .cs-btn-wrapper { display: none; } .service-item { padding: 0 !important; } .service-item p { margin-bottom: 24px; } .brand-cs-list, .staffing-cs-list { padding: 0 0 12vh; } .cs-discover-button { display: block; } .hr-slide-container { padding: 0 16px; } .accordion { margin-top: 0; } .cta-footer-button-wrapper { padding: 0 16px; } .talent-list-section { padding: 64px 16px; } } @media (max-width: 576px) { .banner_img { height: 32vh; } .main-content { padding: 0px 0 12vh; } .influencer-icon-1, .brand-icon-1 { top: -17%; left: 0; } .influencer-icon-4, .brand-icon-4 { bottom: 30%; left: 2%; } .influencer-icon-5, .brand-icon-5 { bottom: 8%; right: -9%; font-size: 87px; } .cs-slide-bottom-wrapper { flex-direction: column; gap: 24px; } .submit_screen { width: 100%; /* padding: 40px 48px 40px; */ } } @media (max-width: 480px) { .container { padding: 0 16px; } .hero { padding: 60px 0; } .hero-text h1 { font-size: 28px; } .hero-text p { font-size: 16px; } .content-header { margin: 12vh 0; } .content-header h2 { font-size: 24px; } .influencer-icon-1, .brand-icon-1 { top: -17%; left: 0; } .influencer-icon-4, .brand-icon-4 { bottom: 30%; left: 0; } .influencer-icon-5, .brand-icon-5 { bottom: 15%; right: 0%; font-size: 87px; } .influencer-icon-6, .brand-icon-6 { top: 0; right: 14%; animation-delay: 1.5s; } .cs-content { flex-direction: column; gap: 24px; } .cs-video-wrapper { margin-bottom: 32px; } } @media (max-width: 360px) { .banner_img { height: 24vh; } .content-header { /* text-align: center; */ margin: 12vh 0; } } /*chat_icon-form*/ .fab { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: var(--primary); border-radius: 50px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); cursor: pointer; z-index: 1000; transition: all .3s ease-in-out; overflow: hidden; padding: 0px 20px 0px 24px; } .fab img { transform: translateX(54px); width: 30px; height: 30px; margin:20px 20px 15px 66px; transition: all .3s ease-in-out; } .fab .fab-text { color: white; font-size: 16px; line-height: 24px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; } .fab:hover { width: 280px; background-color: var(--primary-hover); padding-right: 85px; } .fab:hover img { opacity: 1; transform: translateX(0px); } .fab:hover .fab-text { opacity: 1; transform: translateX(0px); } :root { --primary: #034BB8; --secondary: #832BB8; --tertiary: #F4242E; --accent-yellow: #ffd500; --accent-green: #009c40; --accent-danger: #C20A13; --neutral: #090A0B; --Neutral-On-Surface: #090A0B; --Neutral-On-Surface-Variant: #454B54; --radius-full: 999px; --Border-Neutral-Lighter:#DBDDE1; --State-layers-On-Surface-Variant-Opacity-08:rgba(69, 75, 84, 0.08); --primary-op-8: rgba(3, 75, 184, 0.08); --primary-op-12: rgba(3, 75, 184, 0.12); --secondary-op-8: rgb(131, 43, 184, .08); --secondary-op-12: rgb(131, 43, 184, .12); --tertiary-op-8: rgb(244, 36, 46, .08); --tertiary-op-12: rgb(244, 36, 46, .12); --accent-yellow-op-8: rgba(255, 213, 0, 0.08); --accent-yellow-op-12: rgba(255, 213, 0, 0.12); --accent-green-op-8: rgba(0, 156, 64, 0.08); --accent-green-op-12: rgba(0, 156, 64, 0.12); --accent-danger-op-8: rgba(194, 10, 19, 0.08); --accent-danger-op-12: rgba(194, 10, 19, 0.12); --text: #000827; --text-secondary: #787a81; --error: #e60101; --success: #009C40; --warning: #ff501b; --background: #ebedf0; --border: #e7e9eb; --radius-md:8px; --primary-100: #E3E8FF; --primary-200: #AFBEFF; --primary-300: #7694FE; --primary-400: #0F6BFE; --primary-500: #034BB8; --primary-600: #012D75; --primary-700: #001239; --secondary-100: #F5EEFD; --secondary-200: #D9BDF7; --secondary-300: #C18AF1; --secondary-400: #AB4FEA; --secondary-500: #832BB8; --secondary-600: #551979; --secondary-700: #2A083F; --tertiary-100: #FEEDED; --tertiary-200: #FBB9BA; --tertiary-300: #F97E80; --tertiary-400: #F4242E; --tertiary-500: #B3171F; --tertiary-600: #760B11; --tertiary-700: #3E0305; --accent-yellow-100: #FFF9E6; --accent-yellow-200: #FFF0B3; --accent-yellow-300: #FFE6A1; --accent-yellow-400: #FFDB8F; --accent-yellow-500: #FFD500; --accent-yellow-600: #B38F00; --accent-yellow-700: #7A5A00; --accent-green-100: #E6F9E6; --accent-green-200: #B3F2B3; --accent-green-300: #A1E6A1; --accent-green-400: #8FFB8F; --accent-green-500: #009C40; --accent-green-600: #007B2F; --accent-green-700: #005A1F; --accent-danger-100: #310205; --accent-danger-200: #610509; --accent-danger-300: #92070e; --accent-danger-400: #c20a13; --accent-danger-500: #f30c17; --accent-danger-600: #f53d46; --accent-danger-700: #f86d74; --primary-hover: var(--primary-600); --secondary-hover: var(--secondary-600); --tertiary-hover: var(--tertiary-600); --accent-yellow-hover: var(--accent-yellow-600); --accent-green-hover: var(--accent-green-600); --accent-danger-hover: var(--accent-danger-600); --font: "Poppins", sans-serif; --tbl-border-color : #e3e6f0; --base-color: #000000; --card-header: #353543; --active-text: #ffffff; --modal-submit-btn: #6f42c1; --modal-submit-btn-hover: #5a37a8; --Accent-two-Accent-two-Container : #FFF7CC; --Accent-two-On-Accent-two-Container: #998000; --Primary-Primary-Container: #CDE0FE; --Primary-On-Primary-Container: #023D97; --Border-Success-Lighter: #C4FEDC; --Border-Success-Light: #4EFE96; --Border-Error-Light:#F86D74; --Border-Primary-Light:#68A3FD; --Accent-one-On-Accent-one-Container: #007530; --Accent-one-Accent-one-Container:#C4FEDC; --Error-Error-Container: #FDCED1; --Error-On-Error-Container: #92070E; --radius-xl:16px; --Neutral-Surface-Container-Highest:#E3E5E8; --Neutral-Surface-Bright: #F9FAFA; --State-layers-On-Surface-Opacity-08:rgba(22, 24, 27, 0.08); } .brand-banner-img img{height:126%;object-fit:contain}.brand-services .container h2{font-size:clamp(2rem, 6vw, 3rem);line-height:48px;font-weight:500;color:var(--text);margin-bottom:64px}.service-item h3{font-size:clamp(1.25rem, 4vw, 1.75rem);font-weight:500;color:var(--text);line-height:1.4;margin:0 0 8px}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.service-item{background-color:#fff;padding:24px;border-radius:56px;text-align:center}.service-img-wrapper{overflow:hidden;border-radius:56px;margin-bottom:16px;position:relative;height:42vh;transition:all .1s ease-in-out}.service-item img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .3s ease-in-out}@media (max-width:1280px){.services-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:768px){.brand-services .container h2{margin-bottom:48px}.services-grid{grid-template-columns:1fr}} .footer-category-links{color:#333}.footer-category-links section h4{font-size:16px;color:var(--text);padding-bottom:8px;font-weight:500}.footer-category-links ul{list-style:none;padding-left:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}.footer-category-links a{display:block;padding:6px 10px;border:1px solid #e0e0e0;border-radius:4px;text-decoration:none;color:#666;font-size:14px;transition:all .3s ease-in-out}.footer-category-links a:hover{border-color:var(--text);color:var(--text)}.pd_bottom32{padding-bottom:32px} .container-fluid { padding: 0 50px !important; } .space_96 { margin: 12vh 0; } .space_bottom_96 { margin-bottom: 12vh; } .inner_banner { position: relative; height: 100%; padding: 0 50px; background-position: center; background-size: cover; background-repeat: no-repeat; height: 414px; width: 100%; border-radius: 56px; display: flex; align-items: center; justify-content: flex-start; } .banner-img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .inner_banner h1 { color: #fff; font-weight: 700; font-size: 56px; line-height: 72px; margin: 0 0 24px; } .desk-none{display: none;} .cta_bg { position: relative; height: 152px; width: 100%; border-radius: 28px; padding: 0 55px; margin-bottom: 50px; display: block; } .cta-button { background: white; color: var(--primary); border: none; padding: 15px 30px; font-size: 16px; font-weight: 600; border-radius: 50px; cursor: pointer; transition: all 0.3s ease; } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } /* Responsive Design */ @media (max-width: 992px) { .container-fluid { padding: 0 16px !important; } } @media (min-width:300px) and (max-width:767px){ .mob-none{display: none;} .desk-none{display: block;} .inner_banner { border-radius: 48px; height: 480px; padding: 10px 22px; } .banner_content { position: absolute; top: 32px; height: 320px; left: 24px; right: 24px; bottom: 0; color: #fff; } .inner_banner h1 { font-size: 32px; line-height: 40px; font-weight: 600; margin: 0 0 24px; } .service_inner img{ margin-bottom: 0px; } .cta_content { flex-direction: column; align-items: flex-start; } .cta_content p { font-weight: 600; font-size: 24px; line-height: 32px; color: #fff; margin-bottom: 40px; } .cta_bg{ padding: 24px 16px; height: auto; } } .influencer-banner-img img { height: 126%; object-fit: contain; position: absolute; top: -92px; } .hero-text p span { font-weight: 700; transition: opacity 0.3s ease-in-out; } .content-grid { display: flex; flex-direction: column; gap: 96px; max-width: 1280px; margin: 0 auto; } .content-card { display: flex; gap: 60px; align-items: center; } .content-card:nth-child(even) { flex-direction: row-reverse; } .card-content { max-width: 620px; margin: 0 auto; } .card-content h3, .card-content p { display: block; line-height: 1.4; } .card-content h3 { font-size: clamp(1.25rem, 4vw, 2rem); color: var(--primary); font-weight: 600; text-transform: uppercase; margin-bottom: 16px; } .card-content p { font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 400; color: var(--text); } .card-image { border-radius: 20px; position: relative; overflow: hidden; width: 100%; } .placeholder-image { width: 100%; border-radius: 56px; position: relative; display: flex; overflow: hidden; scale: .8; transform: translateY(80px); opacity: 0; } .placeholder-image img { width: 100%; object-fit: contain; top: 50%; left: 50%; scale: 1; } .how-it-works { padding: 96px 96px; margin: 0 50px; background-color: var(--secondary-100); border-radius: 56px; scale: .7; transform-origin: top center; opacity: 1; } .talent-container h2 { font-size: clamp(2rem, 6vw, 3rem); line-height: 48px; font-weight: 500; color: var(--text); } #reveal-text-hiw-1 span { display: inline-block; color: transparent; } #reveal-li-1, #reveal-li-2, #reveal-li-3, #reveal-li-4 { opacity: 0; transform: translateY(80px); } img.list_icon { width: 144px; margin-bottom: 16px; } .img-cta-footer-wrapper { background: linear-gradient(45deg, var(--primary-300), var(--primary)); padding: 48px; border-radius: 56px; margin: 0 50px 16svh; display: flex; justify-content: space-between; align-items: center; gap: 96px; position: relative; overflow: hidden; } .img-cta-footer-wrapper::after { content: ""; position: absolute; background: linear-gradient(var(--angle, 45deg), #1c5bc7, #4084ff); top: -18%; right: -12%; width: 50vw; height: 33svh; border-radius: 50% 50%; rotate: 11deg; z-index: 0; --angle: 45deg; /* default value */ } .img-cta-footer-wrapper::before { content: ""; position: absolute; background: linear-gradient(var(--angle, 45deg), #1c5bc7, #557fe9); bottom: -14%; left: -12%; width: 50vw; height: 33svh; border-radius: 50% 50%; rotate: -9deg; z-index: 0; --angle: 45deg; } .img-cta-footer-wrapper .img-container { width: 40%; height: 30vw; background-size: cover; background-position: center; background-repeat: no-repeat; border-radius: 56px; overflow: hidden; position: relative; z-index: 4; } .img-cta-footer-wrapper .img-container img { width: 117%; height: 112%; object-fit: contain; position: absolute; top: -10%; left: -10%; } .img-cta-footer-wrapper .txt-container { flex: 1; z-index: 4; } .img-cta-footer-wrapper .txt-container h3 { font-size: clamp(1.25rem, 4vw, 2rem); font-weight: 500; color: #fff; line-height: 1.4; margin: 0 0 16px; } .img-cta-footer-wrapper .txt-container p { font-size: 16px; line-height: 24px; font-weight: 400; color: #fff; margin-bottom: 24px; } @media (max-width: 992px) { .how-it-works { padding: 12vh 24px; margin: 0 16px; } .hiw-container { gap: 64px; flex-direction: column; } .inf-btn-wrapper { display: none; } } @media (max-width: 768px) { .influencers-section{ padding: 0 16px; } li:nth-child(even) { margin-top: 0; } .content-card { flex-direction: column-reverse; } .content-card:nth-child(even) { flex-direction: column-reverse; } .content-card { grid-template-columns: 1fr; gap: 40px; text-align: center; } .how-it-works-content h2 { margin-bottom: 32px; } .img-cta-footer-wrapper { flex-direction: column; gap: 48px; } .img-cta-footer-wrapper .img-container { width: 100%; height: 50vw; } .img-cta-footer-wrapper { margin: 0px 16px 12svh; } } @media (max-width: 576px) { .influencer-banner-img img { height: 107%; object-fit: contain; position: absolute; top: -20px; } .img-cta-footer-wrapper { padding: 24px; } } .hero-text h2{ font-weight: 500; } .agency-list-item { padding: 24px; background-color: var(--primary-100); border-radius: 28px; display: flex; flex-direction: column; justify-content: space-between; } .agency-list-item h3 { font-size: 24px; font-weight: 500; color: var(--text); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; } .thumb-img-wrapper img{ width: 100%; } .agency-list-item { padding: 24px; background-color: var(--primary-100); border-radius: 28px; display: flex; flex-direction: column; justify-content: space-between; } .talent-list-item h3 { font-size: 24px; font-weight: 500; color: var(--text); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; } .top_aiagency{ } .top_aiagency .thumb-img-wrapper{ background: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; } .top_aiagency .thumb-img-wrapper img{ object-fit: contain; } /*date: 17 feb 2025 website: http://talentrack.in/marketplace developer: Vandna Agarwal objective: styling for seller listing page only*/ * { margin: 0; padding: 0; box-sizing: border-box; } body { /*background: #EFF2F5 !important;*/ overflow-x: hidden; overflow-y: auto; font-family: "Poppins", sans-serif; } body.no-scroll { overflow: hidden; } .container-fluid { padding: 0 50px !important; } header { padding: 16px 50px; background: #fff; display: flex; justify-content: space-between; align-items: center; } .fixed_header { border-bottom: 1px solid #E8E8EA; position: fixed; top: 0; left: 0; right: 0; z-index: 999; padding: 16px 24px; } .nav-links { display: flex; align-items: center; gap: 24px; } .nav-links a { font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; color: #034bbb; cursor: pointer; } .nav-links a:hover { color: #2570e9; text-decoration: none; } .mobile-menu { display: none; } .page_header { padding: 12px 50px; border-top: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0; background: #fff; } .page_title { font-weight: 500; font-size: 32px; line-height: 40px; margin: 0 0 8px; } .page_seo_txt { font-weight: 400; font-size: 14px; line-height: 20px; color: #666; margin: 0; } .form_part { display: flex; align-items: center; justify-content: flex-start; } .form_fields { width: 100%; } .form_fields .location_fields, .form_fields .select_dropdown { border: 0px; border-right: 1px solid #ccc; border-radius: 0; height: 56px; -webkit-box-shadow: none; box-shadow: none; background: none; } .search_m_box .form_fields { width: 100%; border: 1px solid #c1c1c1; border-radius: 100px; } .search_container { display: flex; padding-left: 12px; align-items: center; } select.form-control { color: #000; font-size: 16px; line-height: 24px; } /* Change background color of dropdown options */ select.form-control option { background: #eff2f5; padding: 12px; line-height: 20px; color: #201a19; margin-bottom: 8px; cursor: pointer; font-size: 14px; } /* Change background on hover for dropdown options (Only works in some browsers) */ select.form-control option:hover { background: #333; color: white; } .bg-white { background: #fff; /* height: 636px; */ } .br0 { border-right: 0px !important; } .listing_section { padding-top: 12px; margin-bottom: 24px; overflow-x: hidden; } .listing_section .col-md-3 { padding: 12px; } .border_bottom { border-bottom: solid 1px #e0e0e0; } .top_section { display: flex; align-items: center; justify-items: space-between; } .search_rec_bx { border-radius: 28px; border: 1px solid #E0E0E0; padding: 24px; margin: 48px 0; } .search_rec_bx h2 { color: #000; font-size: 28px; font-style: normal; font-weight: 400; line-height: 36px; margin-bottom: 24px; } .search_jobs_fltrs { /*margin-left: 24px;*/ border: 1px solid #E0E0E0; border-radius: 30px; padding: 16px; width: 15%; } .search_jobs_fltrs .jb_filter_bx:before { content: ''; border-right: solid 0px #e0e0e0; top: 0; height: 100%; position: absolute; } .list_area { width: 100%; margin: 10px 0; } .slider-2 .slick-track { display: flex !important; } .slider-2 .slick-slide { height: inherit !important; display: flex !important; } .rec_list_inner { position: relative; border-radius: 28px; background: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; height: 100%; cursor: pointer; width: 100%; /* Makes sure all cards are equal in height */ } .more_info { display: flex; flex-direction: column; flex-grow: 1; } .browse_bx:hover, .rec_list_inner:hover { text-decoration: none; } .listing_top .listing_logo { margin-right: 16px; border-radius: 12px; border: 1px solid #E0E0E0; width: 100%; max-width: 120px; height: 120px; background: #fff; position: absolute; top: 44px; left: 24px; } .listing_top .listing_logo img { margin-right: 16px; border-radius: 12px; height: 100%; object-fit: contain; width: 100%; } .truncate { width: 100%; max-width: 300px; /* Adjust width based on design */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cm_nav_links { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .more_info { padding: 16px 24px 24px 24px; position: relative; margin-top: 72px; } .more_info h3 { font-weight: 600; font-size: 20px; line-height: 28px; color: #000; margin: 0; } .more_info p { font-weight: 400; font-size: 14px; line-height: 20px; color: #000; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .more_info h4 { font-weight: 600; font-size: 14px; line-height: 20px; color: #000; margin-bottom: 24px; } .rec_list_page_title { color: #201A19; font-size: 32px; font-weight: 400; line-height: 40px; margin-bottom: 0; margin-top: 0; } .rec_list_inner .listing_top .rating_group { position: absolute; right: 24px; top: 108px; display: flex; align-items: center; justify-content: flex-start; margin-top: auto; } .rating_group span img { vertical-align: text-top; } .rating_group .rating { font-weight: 600; font-size: 16px; line-height: 24px; color: #333; margin: 2px 0 0 4px; } .rating_group .pl-3 { margin-left: 2px; font-weight: 400; font-size: 16px; } .rating_group .follower { font-weight: 400; font-size: 16px; line-height: 24px; color: #333; } .rec_list_inner button { margin: 0 16px 16px 16px; } .heading_container { display: flex; justify-content: space-between; padding: 64px 0 32px 0; } .browse_list_wrapper { width: 100%; margin: 0 auto; } /* Initial display: only one row visible */ .browse_list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; overflow: hidden; max-height: 100px; transition: max-height 0.3s ease-in-out; } /* Show all rows when 'active' class is applied */ .browse_list.show_all { max-height: 1000px; /* Large value to show all rows */ margin-bottom: 24px; } /* Optional: Button styles */ .toggle_btn { padding: 10px 20px; background-color: #fff; color: #034BB8; border: 1px solid #034BB8; cursor: pointer; border-radius: 100px; font-size: 14px; line-height: 20px; font-weight: 600; } .toggle_btn:hover { background-color: #E3E8FF; } .browse_bx { position: relative; border-radius: 8px; background: #fff; padding: 8px; display: inline-block; box-sizing: border-box; } .browse_inner { display: flex; align-items: center; justify-content: flex-start; } .browse_inner .browse_img { margin-right: 16px; width: 64px; height: 64px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; } .browse_inner .browse_img img { /*width: 100%;*/ border-radius: 8px; } .browse_inner .browse_text { color: #201A19; font-size: 16px; font-weight: 500; line-height: 24px; /* width: calc(100% - 84px); */ } .all_drop_section { display: flex; width: 100%; border-right: 1px solid #d6d6d6; } .search_jobs_fltrs .jb_filter_bx { width: 100%; padding: 0; } .pagination { margin: 20px 0 0; } .sortby .select_dropdown_list.active { overflow-y: hidden; } .select_list { line-height: 20px; cursor: pointer; margin-bottom: 8px; color: #201A19; } .select_list:last-child { margin-bottom: 0px; } .active_list, .select_list:hover { background-color: #fae0ff; } .keyword_input, .keyword_input:hover, .keyword_input:focus, .keyword_input:active { border: solid 0px #e0e0e0; background: transparent; color: #333 !important; display: block; outline: none; vertical-align: middle; width: 100%; height: 57px; font-size: 16px; border-right: 1px solid #ccc; padding: 0 16px 0 8px; line-height: 24px; font-weight: 600; } .btn_part { text-align: right; } /* Filter Button */ .filter_button_container { /* display: none; */ margin-left: 16px; } .filter_btn { background: #034BB8; color: #fff; border: none; padding: 16px 32px 16px 28px; border-radius: 100px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; line-height: 24px; } .filter_btn img { width: 24px; height: 24px; } /* Filter Pop-up */ .filter_popup { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999; } .filter_popup_content { background: #fff; /* width: 90%; */ /* max-width: 500px; */ /* margin: 10% auto; */ padding: 24px; /* border-radius: 12px; */ position: relative; min-height: 100vh; } .close_btn { right: 16px; top: 12px; /* font-size: 24px; */ cursor: pointer; } .sortby .select_button { border-right: 0px !important; width: 100%; } .sortby .select-dropdown { width: 100%; } .location_drop input { height: 57px !important; width: 100%; padding: 0 5px; border: 0; font-size: 14px; } .location_drop input:focus, .location_drop input:focus-within { outline: none; background: none !important; border: 0; } .location_drop { padding: 0; } .location_drop input:-internal-autofill-selected { background-color: #fff !important; } .location-auto-suggest { border-right: 1px solid #E0E0E0; } .paging-style-wrap .pagination>li:last-child { padding-top: 0 !important; } input:-internal-autofill-selected { background-color: #fff !important; } /*location-select*/ .autodropdown, .autodropdown_j_city { border: 0; } .suggestresult, .suggestresult_j_city { background: #f8ebe9; -webkit-border-radius: 4px; border-radius: 4px; margin-bottom: 0; } .suggestresult li, .suggestresult_j_city li { background: #ffefff; height: auto !important; padding: 6px 10px !important; display: block; list-style-type: none; padding: 8px; font-size: 14px; font-weight: 400; line-height: 20px; cursor: pointer; color: #201A19; text-align: left; transition: all ease-in-out 0.3s; } .suggestresult li:hover, .suggestresult_j_city li:hover { background: #fae0ff; } .suggestion-hover, .suggestresult li:hover, .suggestresult_j_city li:hover { border-radius: 0px; color: #000 !important; background-color: #fae0ff; transition: all ease-in-out 0.3s; } .autodropdown-style, .autodropdown_j_city-style { max-height: 250px !important; border-bottom: 0px solid #bcbcbc !important; border-radius: 4px; transition: all ease-in-out 0.3s; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); top: 4px !important; position: absolute; width: 100%; } .col-md-3 { padding-left: 10px; padding-right: 10px; } .btn_part input { margin-right: 8px; } .search_mobile { /* display: none; */ } .search_m_box { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } /*search_box*/ .search_box { /* border: solid 1px #e0e0e0; */ border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; -moz-border-radius: 12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; /* padding: 16px 25px; */ margin: 30px -5px 24px; position: relative; } .search_box h3 { color: #000; font-size: 28px; font-weight: 400; line-height: 36px; margin-bottom: 24px; margin-top: 0; } .sortby, .search_rightside, .search_leftside { border: solid 1px #e0e0e0; border-radius: 28px; -o-border-radius: 28px; -ms-border-radius: 28px; -moz-border-radius: 28px; -khtml-border-radius: 28px; -webkit-border-radius: 28px; position: relative; } .search_leftside { width: calc(100% - 230px); display: grid; align-items: center; justify-content: space-between; margin-right: 16px; grid-template-columns: 3fr 2fr 2fr; } .btn_container { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .search_rightside { width: 280px; margin-right: 16px; } .custom_dropdown_container span { padding: 0; } /* Hide default dropdown arrow */ .custom-dropdown select { -webkit-appearance: none; /* Remove native styles for Safari/Chrome */ -moz-appearance: none; /* Remove native styles for Firefox */ appearance: none; background: transparent; padding: 16px 36px 16px 16px; border: 1px solid #ccc; border-radius: 5px; outline: none; width: 100%; cursor: pointer; } /* Style wrapper for positioning */ .custom-dropdown { position: relative; width: 100%; } /* Add custom SVG as dropdown icon */ .custom-dropdown::after { content: ""; background: url('/frontend/assets/images/dropdown.svg') no-repeat center center; background-size: 24px 24px; width: 24px; height: 24px; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; /* Prevent interaction with icon */ } /* Style on focus */ .custom-dropdown select:focus { border-color: #007bff; } /* Optional: Add hover styles */ .custom-dropdown select:hover { border-color: #888; } .pd0 { padding: 0 !important; } .mt-22 { margin-top: 22px; } .row_mr { margin-left: -8px; } ::selected { color: #f4cdff; } .active_effect { background: #fae0ff; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 30px white inset !important; } ::placeholder { color: #201a19; opacity: 1; /* Firefox */ } ::-ms-input-placeholder { /* Edge 12-18 */ color: #201a19; } input.input-style, .input.input-style, .input.active-select { height: 100%; width: 100% !important; } .ui-multiselect { background-color: #fff; border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; -moz-border-radius: 0; -khtml-border-radius: 0; -webkit-border-radius: 0; width: 100%; border: 1px solid #d3d3d3; } .ui-multiselect, .ui-state-active { border: 0px !important; outline: 0 !important; } .ui-multiselect-menu label { font-weight: normal; } .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; } .ui-multiselect-checkboxes input[type="checkbox"] { margin-right: 5px; } .ui-state-default span.ui-icon { background: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #333; height: 0; margin: 10px 10px 0 0; width: 0; } input.input-style { box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; padding: 0 10px; } ul.ui-helper-reset { padding: 5px; } .ui-multiselect:focus { color: #c00000 !important; } .active-select+button, input.active-select { border: 2px solid #d10001; color: #d10001; } div.select_wrap .ui-multiselect { min-width: 378px; max-width: 378px; } .select_wrap .ui-state-default span.ui-icon { margin: 16px 5px 0 0; } /*sidebar-filter-css-end*/ .search input { height: 56px; width: 100%; font-size: 17px; outline: none; padding: 0 15px; border-radius: 4px; } .options li { list-style: none; height: 56px; background: #fff; padding: 0px 10px; } .options li:hover { background: #f4cdff; } .ui-multiselect-header { display: none !important; } ul.ui-helper-reset { width: auto !important; } .ui-multiselect:focus label, .ui-state-active:focus label { top: -12px !important; } .select-selected { height: 56px; border: 1px solid #333 !important; margin-bottom: 20px; } .select-selected:after { position: absolute; content: ""; top: 14px; right: 10px; width: 0; height: 0; border: 6px solid transparent; border-color: #fff transparent transparent transparent; } .select-selected.select-arrow-active:after { border-color: transparent transparent #fff transparent; top: 7px; } .select-items div { padding: 8px 16px; cursor: pointer; user-select: none; } .select-items { border: 1px solid #333; border-radius: 4px; margin-top: 5px; } .select-selected { padding: 16px; border: 1px solid #333; border-radius: 4px; cursor: pointer; user-select: none; } .select-items { position: absolute; top: 100%; left: 0; right: 0; z-index: 99; } .select-hide { display: none; } .select-items div:hover, .same-as-selected { background-color: #f4cdff; } input.input-style { border: 1px solid #857370 !important; } .active-select+button, input.active-select, .input.input-style { border: 0px !important; color: #d10001; outline: none; } .ui-multiselect-menu { background: #ffefff; border: 0px; } .ui-multiselect-menu label { padding: 4px 10px; } .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 0px !important; font-weight: normal; color: #212121; } .autodropdown, .autodropdown_j_city { border: 0; } .suggestresult, .suggestresult_j_city { background: #ffefff; padding: 5px; -webkit-border-radius: 4px; border-radius: 4px; } .suggestresult li, .suggestresult_j_city li { padding: 10px !important; background: #ffefff; -webkit-border-radius: 4px; border-radius: 4px; line-height: 10px; margin-bottom: 6px !important; } .suggestresult li:last-child { margin-bottom: 0px !important; } .suggestresult li:hover, .suggestresult_j_city li:hover { background: #f4cdff; } .suggestion-hover, .suggestresult li:hover, .suggestresult_j_city li:hover { background-color: #f4cdff; border-radius: 4px; color: #000 !important; } ul.ui-helper-reset { background: none !important; } .action_tab .active-select+button, .select_wrap .active-select+button { line-height: 28px; font-size: 14px; background: transparent; } .select_arrow .ui-state-default span.ui-icon { height: -webkit-fill-available !important; margin-top: 13px !important; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus .ui-widget-header .ui-state-focus { border: 0px !important; } /*jquery-css-start*/ .ui-multiselect { padding: 2px 0 2px 4px; text-align: left } .ui-multiselect span.ui-icon { float: right } .ui-multiselect-single .ui-multiselect-checkboxes input { position: absolute !important; top: auto !important; left: -9999px; } .ui-multiselect-single .ui-multiselect-checkboxes label { padding: 5px !important; margin: 0px; } .ui-multiselect-header { margin-bottom: 3px; padding: 3px 0 3px 4px } .ui-multiselect-header ul { font-size: 0.9em } .ui-multiselect-header ul li { float: left; padding: 0 10px 0 0 } .ui-multiselect-header a { text-decoration: none } .ui-multiselect-header a:hover { text-decoration: underline } .ui-multiselect-header span.ui-icon { float: left } .ui-multiselect-header li.ui-multiselect-close { float: right; text-align: right; padding-right: 0 } .ui-multiselect-menu { display: none; /*padding:3px; */ position: absolute; z-index: 20; text-align: left } .modal-open .ui-multiselect-menu { z-index: 10000; } .ui-multiselect-checkboxes { position: relative; /* fixes bug in IE6/7 */ overflow-y: auto } .ui-multiselect-checkboxes label { cursor: pointer; display: block; border: 0px solid transparent; padding: 3px 1px } .ui-multiselect-checkboxes label input { position: relative; top: 1px } .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align: center; font-weight: bold; border-bottom: 1px solid } .ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display: block; padding: 3px; margin: 1px 0; text-decoration: none } * html .ui-multiselect-checkboxes label { border: none } ul.ui-multiselect-checkboxes { height: auto !important; max-height: 300px; overflow-y: auto; box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30); } @media print { .ui-multiselect-menu { display: none; } } .ui-multiselect-checkboxes li:first-child { display: none; } input.active-select { color: #333 !important; } .ui-state-focus, .ui-state-hover, .ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-hover { background-image: none !important; } /*------------------- Seller Dashboard Start --------------------------------*/ .container_dash { display: flex; } .user_actions { display: flex; gap: 8px; } .user_actions .icon img { width: 24px; height: 24px; } .user_actions a { font-size: 16px; font-weight: 500; line-height: 24px; /* padding: 10px 12px; */ text-decoration: none; border-radius: 20px; color: #034bbb; } .user_actions a:hover { background-color: rgba(3, 75, 184, 0.08); text-decoration: none; color: #034bbb; } .user_actions .icon { /* padding: 10px; */ cursor: pointer; display: flex; align-items: center; justify-content: center; } /* .user_actions .avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin-left: 4px; cursor: pointer; border: 1px solid #eaeaea; display: flex; align-items: center; justify-content: center; } .user_actions .avatar img { width: 100%; height: 100%; object-fit: cover; }*/ .fixed_header .burger_menu { display: none; flex-direction: column; justify-content: space-between; width: 24px; height: 18px; cursor: pointer; margin-right: 15px; } .fixed_header .burger_menu span { height: 2px; width: 100%; background-color: #333; border-radius: 2px; } .desktop_sidebar, .mobile_sidebar { width: 420px; min-width: 180px; background-color: white; /* border-right: 1px solid #eaeaea; */ padding: 16px; position: sticky; height: 100vh; /* margin-top: 77px; */ overflow-y: auto; top: 76px; } .container_dash .sidebar { position: relative; } /* Target the sidebar container */ .container_dash .sidebar .desktop_sidebar { overflow-y: auto; /* Enable vertical scroll */ scrollbar-width: thin; /* For Firefox */ scrollbar-color: transparent transparent; /* For Firefox */ /* Hide until hover */ } /* For Webkit browsers (Chrome, Edge, Safari) */ .container_dash .sidebar .desktop_sidebar::-webkit-scrollbar { width: 6px; /* Thin scrollbar */ background: transparent; } .container_dash .sidebar .desktop_sidebar::-webkit-scrollbar-thumb { background: transparent; /* Hidden */ border-radius: 4px; transition: background 0.3s ease; } /* Show scrollbar only when user hovers */ .container_dash .sidebar .desktop_sidebar:hover { scrollbar-color: #888888 #f1f1f1; /* For Firefox */ } .desktop_sidebar .profile_section { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; border-bottom: 1px solid #eaeaea; } .desktop_sidebar .profile_section a{ width: 100%; } .desktop_sidebar .profile_section .profile_image { width: 120px; height: 120px; border-radius: 12px; border: 1px solid #eaeaea; overflow: hidden; margin-bottom: 16px; } .desktop_sidebar .profile_section .profile_image img { width: 100%; height: 100%; object-fit: contain; } .desktop_sidebar .profile_section h2 { font-size: 22px; line-height: 30px; font-weight: 600; color: #333; margin: 0 0 0 0; } .desktop_sidebar .profile_section .designation { font-size: 16px; line-height: 24px; color: #333; margin-bottom: 8px; font-weight: 500; } .desktop_sidebar .profile_section .rating { display: flex; align-items: center; font-size: 14px; color: #666; margin-bottom: 24px; gap: 8px; } .desktop_sidebar .profile_section .view_profile { background-color: #0052cc; color: white; border: none; border-radius: 50px; padding: 12px 0; width: 100%; font-size: 16px; cursor: pointer; } .desktop_sidebar .profile_section .common_lg_btn { width: 100% !important; } .desktop_sidebar .menu_section { padding: 20px 0px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #eaeaea; } .desktop_sidebar .menu_section .menu_item { display: flex; align-items: center; padding: 16px 24px 16px 20px; border-radius: 28px; color: #333; cursor: pointer; font-size: 16px; line-height: 24px; font-weight: 400; gap: 12px; transition: all 0.3s ease-in-out; } .desktop_sidebar .menu_section .menu_item:hover { background-color: rgba(131, 43, 184, 0.08); } .desktop_sidebar .menu_section .menu_item.active { background-color: rgba(131, 43, 184, 0.16); color: #832BB8; } .desktop_sidebar .menu_section .menu_item.active a, .desktop_sidebar .menu_section .menu_item a { text-decoration: none; color: var(--text); } .desktop_sidebar .availability { margin-top: 24px; } .desktop_sidebar .availability p { font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 8px; } .desktop_sidebar .availability .toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 0;; } .desktop_sidebar .availability .toggle span { font-size: 16px; line-height: 24px; font-weight: 400; } .desktop_sidebar .availability .toggle_switch { position: relative; display: inline-block; width: 52px; height: 32px; } .desktop_sidebar .availability .toggle_switch input { opacity: 0; width: 0; height: 0; } .desktop_sidebar .availability .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #E3E8FF; border-radius: 34px; transition: .4s; border: 2px solid #034bbb; } .desktop_sidebar .availability .slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 2px; bottom: 2px; background-color: #034bbb; border-radius: 50%; transition: .4s; } .desktop_sidebar .availability input:checked+.slider { background-color: #034bbb; } .desktop_sidebar .availability input:checked+.slider:before { transform: translateX(20px); background-color: #fff; } .mobile_sidebar { width: 420px; min-width: 180px; /* Minimum width */ background-color: white; border-right: 1px solid #eaeaea; padding: 16px 24px; position: fixed; height: 100vh; margin-top: 77px; overflow-y: auto; display: none; } .mobile_sidebar { width: 420px; min-width: 180px; /* Minimum width */ background-color: white; border-right: 1px solid #eaeaea; padding: 16px 16px; position: fixed; height: 100vh; margin-top: 77px; overflow-y: auto; } .mobile_sidebar .top_bar { display: flex; align-items: center; padding: 16px 0px; margin-bottom: 8px; } .mobile_sidebar .top_bar img { width: 24px; height: 24px; margin-right: 16px; } .mobile_sidebar .top_bar p { font-size: 16px; line-height: 24px; font-weight: 600; color: #333; margin: 0; } .mobile_sidebar .profile_section { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; border-bottom: 1px solid #eaeaea; } .mobile_sidebar .profile_section a{ width: 100%; } .mobile_sidebar .profile_section .user_details { display: flex; align-items: start; gap: 16px; width: 100%; margin-bottom: 16px; } .mobile_sidebar .profile_section button { width: 100% !important; } .mobile_sidebar .profile_section .profile_image { width: 72px; height: 72px; border-radius: 12px; border: 1px solid #eaeaea; overflow: hidden; } .mobile_sidebar .profile_section .profile_image img { width: 100%; height: 100%; object-fit: cover; } .mobile_sidebar .profile_section .text_container { display: flex; flex-direction: column; align-items: start; /* border-bottom: 1px solid #eaeaea; */ } .mobile_sidebar .profile_section h2 { font-size: 22px; line-height: 30px; font-weight: 600; color: #333; margin: 0 0 0 0; } .mobile_sidebar .profile_section .designation { font-size: 16px; line-height: 24px; color: #333; font-weight: 500; } .mobile_sidebar .profile_section .rating { display: flex; align-items: center; font-size: 14px; color: #666; gap: 8px; } .mobile_sidebar .profile_section .view_profile { background-color: #0052cc; color: white; border: none; border-radius: 50px; padding: 12px 0; width: 100%; font-size: 16px; cursor: pointer; } .mobile_sidebar .profile_section .common_lg_btn { width: 100% !important; } .mobile_sidebar .menu_section { padding: 20px 0px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid #eaeaea; } .mobile_sidebar .menu_section .menu_item { display: flex; align-items: center; padding: 16px 24px 16px 20px; border-radius: 28px; color: #333; cursor: pointer; font-size: 16px; line-height: 24px; font-weight: 400; gap: 12px; transition: all 0.3s ease-in-out; } .mobile_sidebar .menu_section .menu_item:hover { background-color: rgba(131, 43, 184, 0.08); } .mobile_sidebar .menu_section .menu_item.active { background-color: rgba(131, 43, 184, 0.16); color: #832BB8; } .mobile_sidebar .menu_section .menu_item a { text-decoration: none; color: var(--text); } .mobile_sidebar .availability { margin-top: 24px; } .mobile_sidebar .availability p { font-size: 16px; line-height: 24px; font-weight: 600; margin-bottom: 8px; } .mobile_sidebar .availability .toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 0;; } .mobile_sidebar .availability .toggle span { font-size: 16px; line-height: 24px; font-weight: 400; } .mobile_sidebar .availability .toggle_switch { position: relative; display: inline-block; width: 52px; height: 32px; } .mobile_sidebar .availability .toggle_switch input { opacity: 0; width: 0; height: 0; } .mobile_sidebar .availability .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #E3E8FF; border-radius: 34px; transition: .4s; border: 2px solid #034bbb; } .mobile_sidebar .availability .slider:before { position: absolute; content: ""; height: 24px; width: 24px; left: 2px; bottom: 2px; background-color: #034bbb; border-radius: 50%; transition: .4s; } .mobile_sidebar .availability input:checked+.slider { background-color: #034bbb; } .mobile_sidebar .availability input:checked+.slider:before { transform: translateX(20px); background-color: #fff; } /* Main content styles */ .main_content { flex: 1; padding: 16px 16px 0 16px; max-width: calc(100% - 420px); /* overflow-y: auto; height: 100vh; */ } .main_content .welcome_section h1 { font-size: 45px; line-height: 52px; font-weight: 600; margin: 0 0 20px 0; letter-spacing: -1px; } .main_content .stats_cards { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); grid-gap: 20px; margin-bottom: 16px; } .main_content .stats_cards .stat_pair { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } .main_content .stats_cards .stat_card { background-color: #fff; border-radius: 16px; padding: 24px; position: relative; } .main_content .stats_cards .widget_icon { position: absolute; top: 24px; right: 24px; cursor: pointer; } .main_content .stats_cards .stat_card .label { font-size: 16px; color: #333; margin-bottom: 15px !important; padding: 0; font-weight: 600; } .main_content .stats_cards .stat_card .label-icon { display: inline-block; margin-right: 8px; border-radius: 8px; } .main_content .stats_cards .stat_card .value { font-size: 32px; line-height: 40px; font-weight: 600; color: #333; font-weight: bold; margin-top: 24px; text-align: right; } .main_content .brief_card p { font-size: 20px; line-height: 28px; color: #333; font-weight: 600; margin: 0; } .main_content .brief_card .dropdown { border: 1px solid #999AA0; border-radius: 8px; padding: 9px 8px 9px 16px; cursor: pointer; display: flex; align-items: center; } .main_content .content_grid { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 64px; } .main_content .content_grid .messages_card, .main_content .content_grid .summary_card, .main_content .brief_card { background-color: white; border: 1px solid #eaeaea; border-radius: 16px; flex: 1; } .main_content .content_grid .messages_card a, .main_content .content_grid .summary_card a { text-decoration: none; font-size: 14px; line-height: 20px; color: #034bbb; font-weight: 600; padding: 10px 8px; background-color: #fff; } .main_content .content_grid .messages_card a:hover, .main_content .content_grid .summary_card a:hover { color: #034bbb; background-color: rgba(3, 75, 184, 0.08); border-radius: 20px; } .main_content .content_grid .card_header, .main_content .brief_card .card_header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f0f0f0; padding: 16px; } .main_content .content_grid .card_header p, .main_content .brief_card .card_header p { font-size: 20px; line-height: 28px; margin: 0; font-weight: 600; } .main_content .content_grid .card_header .view_all { color: #0052cc; text-decoration: none; } .main_content .content_grid .message_item { display: flex; justify-content: space-between; align-items: flex-end; padding: 16px; } .main_content .content_grid .message_item .user_image { position: relative; width: 48px; height: 48px; margin-right: 15px; } .main_content .content_grid .message_item .user_image img { width: 100%; height: 100%; border-radius: 8px; object-fit: cover; } .main_content .content_grid .message_item .message_content { display: flex; align-items: center; } .main_content .content_grid .message_item .status_dot { position: absolute; bottom: -2px; right: -2px; width: 12px; height: 12px; background-color: #4caf50; border-radius: 50%; border: 2px solid white; } .main_content .content_grid .message_item .message_text { display: flex; flex-direction: column; } .main_content .content_grid .message_item .sender_name { font-size: 16px; font-weight: 600; margin-bottom: 3px; line-height: 24px; color: #333; } .main_content .content_grid .message_item .message_preview { color: #333; font-size: 14px; line-height: 20px; font-weight: 400; } .main_content .content_grid .message_item .star_icon { color: #ddd; cursor: pointer; height: auto; margin-left: 16px; } .main_content .content_grid .message_item .star_icon img { width: 20px; height: 20px; object-fit: cover; } .main_content .growth_section h2 { font-size: 32px; margin-bottom: 24px; line-height: 40px; font-weight: 600; } .main_content .growth_section .tips_section p { font-size: 16px; line-height: 24px; margin-bottom: 20px; font-weight: 600; } .main_content .growth_section .tips_cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; } .main_content .growth_section .tip_card { flex: 1; background-color: white; border: 1px solid #eaeaea; border-radius: 28px; padding: 24px; } .main_content .growth_section .tip_card a { text-decoration: none; font-size: 14px; line-height: 20px; color: #034bbb; font-weight: 600; padding: 10px 8px; background-color: #fff; } .main_content .growth_section .tip_card a:hover { color: #034bbb; background-color: rgba(3, 75, 184, 0.08); border-radius: 20px; } .main_content .growth_section .tip_card h4 { font-size: 20px; line-height: 28px; font-weight: 600; margin-bottom: 24px; margin-top: 0; } .main_content .growth_section{ margin-bottom: 24px; } .listing_section a:hover{ text-decoration: none; } /*--------------------------------- Seller Dashboard End --------------------------------*/ /* --------------- Seller list ---------------------- */ .listing_banner img { width: 100%; height: 90px; object-fit: cover; overflow: hidden; } .listing_filter .custom-dropdown-search { display: flex; } .listing_filter .search-icon { padding-left: 10px; } .listing_filter .search_leftside { display: flex; } /* Responsive Styles */ @media (max-width: 1400px) { .main_content .stats_cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1000px) { .fixed_header .burger_menu { display: flex; } .main_content .header { justify-content: flex-start; } .message_icon { display: none; } .notification_icon { display: none; } .mobile_sidebar { position: fixed; top: 0; left: -420px; height: 100vh; z-index: 1000; transform: translateX(-100%); box-shadow: none; margin-top: 0; transition: transform 0.3s ease-in-out; padding: 0px 16px 16px; } .desktop_sidebar { display: none; } .mobile_sidebar { display: block; } .main_content { max-width: 100%; /* margin: 77px 0px 0px 0px; */ padding: 16px; } .sidebar_overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; } .sidebar_overlay.active { display: block; } } @media (max-width: 768px) { .page_header { padding: 12px 16px; } .mobile-menu { display: block; } .nav-links { display: none; } /* .burger-menu-1 { //comment for common header css background: 0 0; border: none; cursor: pointer; } .mobile-nav-links.show2 { display: flex; } .mobile-nav-links { display: none; position: absolute; top: 62px; right: 0; background: #fff; width: 100%; flex-direction: column !important; padding: 24px; box-shadow: 0 2px 5px rgba(0, 0, 0, .1); z-index: 1000; } .mobile-nav-links a { padding: 16px 0; font-size: 24px; line-height: 36px; font-weight: 500; text-decoration: none; color: #034bbb; cursor: pointer; text-align: center; } */ .mobile_sidebar.active { transform: translateX(0); box-shadow: 2px 0 10px rgba(0,0,0,0.1); left: 0; } .display_none { display: none; } .container-fluid { padding: 0 16px !important; } /* .page_title { padding: 12px 16px; } */ header { padding: 16px; } .search_mobile { display: block; margin: 30px -5px 24px; } .select_dropdown, .keyword_input { border-right: 0; } .form_fields { width: 100%; border: 1px solid #c1c1c1; border-radius: 100px; } .search_box { display: none; } .filter_button_container { display: block; } .filter_popup_content h3 { font-size: 24px; line-height: 32px; font-weight: 600; color: #333; margin-bottom: 24px; margin-top: 0; } .keyword_input, .keyword_input:active, .keyword_input:focus, .keyword_input:hover { border-right: 0; } .filter_popup_content .form_fields { margin-bottom: 12px; } .btn_container { display: flex; justify-content: space-between; margin-top: 24px; /* position: absolute; */ bottom: 0; padding: 24px 0; box-sizing: border-box; /* width: calc(100% - 48px); */ } .action_btn { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .browse_list { grid-template-columns: repeat(1, 1fr); } .form_fields .location_fields, .form_fields .select_dropdown { border-right: 0; } .select_dropdown.form-control.br-0:last-child{ border-right:0px; } .search_mobile .select_dropdown.form-control.bl-1 { border-left: 0 !important; } } @media (max-width: 480px) { .browse_bx { width: 100%; /* 1 item per row on mobile */ } .logo img { width: 180px; } .rec_list_inner { margin: 0 0px; } .mobile_sidebar { position: fixed; top: 0; left: -280px; width: 100%; height: 100vh; z-index: 1000; transform: translateX(-100%); box-shadow: none; margin-top: 0; transition: transform 0.3s ease-in-out; } .mobile_sidebar.active { transform: translateX(0%); left: 0; } .main_content .growth_section .tips_cards { display: grid ; grid-template-columns: repeat(auto-fit, minmax(296px, 1fr)); gap: 20px; } .main_content .stats_cards .stat_card .label { font-size: 14px; line-height: 20px; } .main_content .stats_cards { grid-template-columns: repeat(1, 1fr); } .main_content .stats_cards .stat_card .value { font-size: 24px; line-height: 32px; } .main_content .stats_cards .stat_card { padding: 16px; } .main_content .stats_cards { grid-gap: 8px; } } @media (max-width: 360px) { .logo img { width: 164px; } /* .main_content .stats_cards { grid-template-columns: repeat(1, 1fr); } */ .main_content .content_grid .messages_card, .main_content .content_grid .summary_card { min-width: 296px; } } .dynamic_text_about { margin-top: 24px; } a.btn-imp { position: relative; padding: 12px 16px; border-radius: 38px; background: linear-gradient(45deg, #034bb824, #832bb83b, #f4242e36); z-index: 0; } a.btn-imp::before { content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(45deg, #034BB8, #832BB8, #F4242E); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; } .cm_nav_links a { font-size: 16px; line-height: 24px; font-weight: 500; text-decoration: none; color: #034bbb; cursor: pointer; } /*chat_icon-form*/ .fab { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: var(--primary); border-radius: 50px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); cursor: pointer; z-index: 1000; transition: all .3s ease-in-out; overflow: hidden; padding: 0px 20px 0px 24px; } .fab img { transform: translateX(54px); width: 30px; height: 30px; margin:20px 20px 15px 66px; transition: all .3s ease-in-out; } .fab .fab-text { color: white; font-size: 16px; line-height: 24px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; } .fab:hover { width: 280px; background-color: var(--primary-hover); padding-right: 85px; } .fab:hover img { opacity: 1; transform: translateX(0px); } .fab:hover .fab-text { opacity: 1; transform: translateX(0px); } /* Read More / Read Less toggle for SEO content */ /* Default (Desktop) → show full */ .page_seo_txt .text-content { display: block; } /* Mobile only */ @media (max-width: 768px) { .page_seo_txt .text-content { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .page_seo_txt.expanded .text-content { -webkit-line-clamp: unset; } .toggle-btn { display: inline; color: #034BB8; cursor: pointer; } } /* Hide button on desktop */ @media (min-width: 769px) { .toggle-btn { display: none; } } /*chat_icon*/ .fab_icon { position: fixed; bottom: 20px; right: 20px; width: 60px; height: 60px; background-color: var(--primary); border-radius: 50px; display: flex !important; align-items: center; justify-content: center; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); cursor: pointer; z-index: 1000; transition: all .3s ease-in-out; overflow: hidden; padding: 0px 20px 0px 24px; } .fab_icon img { transform: translateX(54px); width: 30px; height: 30px; margin:20px 20px 15px 66px; transition: all .3s ease-in-out; } .fab_icon .fab-text { color: white; font-size: 16px; line-height: 24px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; } .fab_icon:hover { width: 280px; background-color: var(--primary-hover); padding-right: 85px; } .fab_icon:hover img { opacity: 1; transform: translateX(0px); } .fab_icon:hover .fab-text { opacity: 1; transform: translateX(0px); }