*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::after,::before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scroll-snap-strictness:proximity;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.container{width:100%}@media (min-width:100px){.container{max-width:100px}}@media (min-width:200px){.container{max-width:200px}}@media (min-width:300px){.container{max-width:300px}}@media (min-width:410px){.container{max-width:410px}}@media (min-width:551px){.container{max-width:551px}}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}@media (min-width:1537px){.container{max-width:1537px}}@media (min-width:1920px){.container{max-width:1920px}}@media (min-width:1921px){.container{max-width:1921px}}@media (min-width:2560px){.container{max-width:2560px}}@media (min-width:3840px){.container{max-width:3840px}}@media (min-width:5120px){.container{max-width:5120px}}@media (min-width:7680px){.container{max-width:7680px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-inset-1{inset:-.25rem}.bottom-0{bottom:0}.end-1{inset-inline-end:.25rem}.left-0{left:0}.top-0{top:0}.isolate{isolation:isolate}.isolation-auto{isolation:auto}.z-10{z-index:10}.z-40{z-index:40}.float-right{float:right}.float-left{float:left}.float-none{float:none}.clear-left{clear:left}.clear-right{clear:right}.clear-both{clear:both}.clear-none{clear:none}.mb-1{margin-bottom:.25rem}.mt-2{margin-top:.5rem}.mt-5{margin-top:1.25rem}.box-border{box-sizing:border-box}.box-content{box-sizing:content-box}.line-clamp-none{overflow:visible;display:block;-webkit-box-orient:horizontal;-webkit-line-clamp:none}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.inline-table{display:inline-table}.table-caption{display:table-caption}.table-cell{display:table-cell}.table-column{display:table-column}.table-column-group{display:table-column-group}.table-footer-group{display:table-footer-group}.table-header-group{display:table-header-group}.table-row-group{display:table-row-group}.table-row{display:table-row}.flow-root{display:flow-root}.grid{display:grid}.inline-grid{display:inline-grid}.contents{display:contents}.list-item{display:list-item}.hidden{display:none}.h-1{height:.25rem}.h-2{height:.5rem}.h-32{height:8rem}.h-full{height:100%}.h-screen{height:100vh}.w-48{width:12rem}.w-72{width:18rem}.w-\[0\%\]{width:0%}.w-\[this-is\]{width:this-is}.w-\[weird-and-invalid\]{width:weird-and-invalid}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.flex-grow{flex-grow:1}.flex-grow-0{flex-grow:0}.grow{flex-grow:1}.table-auto{table-layout:auto}.table-fixed{table-layout:fixed}.caption-top{caption-side:top}.caption-bottom{caption-side:bottom}.border-collapse{border-collapse:collapse}.border-separate{border-collapse:separate}.\!transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-cpu{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-gpu{transform:translate3d(var(--tw-translate-x),var(--tw-translate-y),0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.transform-none{transform:none}.touch-auto{touch-action:auto}.touch-none{touch-action:none}.touch-pan-x{--tw-pan-x:pan-x;touch-action:var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)}.touch-pan-left{--tw-pan-x:pan-left;touch-action:var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)}.touch-pan-right{--tw-pan-x:pan-right;touch-action:var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)}.touch-pan-y{--tw-pan-y:pan-y;touch-action:var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)}.touch-pan-up{--tw-pan-y:pan-up;touch-action:var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)}.touch-pan-down{--tw-pan-y:pan-down;touch-action:var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)}.touch-pinch-zoom{--tw-pinch-zoom:pinch-zoom;touch-action:var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)}.touch-manipulation{touch-action:manipulation}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.select-text{-webkit-user-select:text;-moz-user-select:text;user-select:text}.select-all{-webkit-user-select:all;-moz-user-select:all;user-select:all}.select-auto{-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.resize-none{resize:none}.resize-y{resize:vertical}.resize-x{resize:horizontal}.resize{resize:both}.snap-none{scroll-snap-type:none}.snap-x{scroll-snap-type:x var(--tw-scroll-snap-strictness)}.snap-y{scroll-snap-type:y var(--tw-scroll-snap-strictness)}.snap-both{scroll-snap-type:both var(--tw-scroll-snap-strictness)}.snap-mandatory{--tw-scroll-snap-strictness:mandatory}.snap-proximity{--tw-scroll-snap-strictness:proximity}.snap-start{scroll-snap-align:start}.snap-end{scroll-snap-align:end}.snap-center{scroll-snap-align:center}.snap-align-none{scroll-snap-align:none}.snap-normal{scroll-snap-stop:normal}.snap-always{scroll-snap-stop:always}.list-inside{list-style-position:inside}.list-outside{list-style-position:outside}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.break-before-auto{-moz-column-break-before:auto;break-before:auto}.break-before-avoid{-moz-column-break-before:avoid;break-before:avoid}.break-before-all{-moz-column-break-before:all;break-before:all}.break-before-avoid-page{-moz-column-break-before:avoid;break-before:avoid-page}.break-before-page{-moz-column-break-before:page;break-before:page}.break-before-left{-moz-column-break-before:left;break-before:left}.break-before-right{-moz-column-break-before:right;break-before:right}.break-before-column{-moz-column-break-before:column;break-before:column}.break-inside-auto{-moz-column-break-inside:auto;break-inside:auto}.break-inside-avoid{-moz-column-break-inside:avoid;break-inside:avoid}.break-inside-avoid-page{break-inside:avoid-page}.break-inside-avoid-column{-moz-column-break-inside:avoid;break-inside:avoid-column}.break-after-auto{-moz-column-break-after:auto;break-after:auto}.break-after-avoid{-moz-column-break-after:avoid;break-after:avoid}.break-after-all{-moz-column-break-after:all;break-after:all}.break-after-avoid-page{-moz-column-break-after:avoid;break-after:avoid-page}.break-after-page{-moz-column-break-after:page;break-after:page}.break-after-left{-moz-column-break-after:left;break-after:left}.break-after-right{-moz-column-break-after:right;break-after:right}.break-after-column{-moz-column-break-after:column;break-after:column}.grid-flow-row{grid-auto-flow:row}.grid-flow-col{grid-auto-flow:column}.grid-flow-dense{grid-auto-flow:dense}.grid-flow-row-dense{grid-auto-flow:row dense}.grid-flow-col-dense{grid-auto-flow:column dense}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-nowrap{flex-wrap:nowrap}.place-content-center{place-content:center}.place-content-start{place-content:start}.place-content-end{place-content:end}.place-content-between{place-content:space-between}.place-content-around{place-content:space-around}.place-content-evenly{place-content:space-evenly}.place-content-baseline{place-content:baseline}.place-content-stretch{place-content:stretch}.place-items-start{place-items:start}.place-items-end{place-items:end}.place-items-center{place-items:center}.place-items-baseline{place-items:baseline}.place-items-stretch{place-items:stretch}.content-normal{align-content:normal}.content-center{align-content:center}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-evenly{align-content:space-evenly}.content-baseline{align-content:baseline}.content-stretch{align-content:stretch}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.justify-normal{justify-content:normal}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-evenly{justify-content:space-evenly}.justify-stretch{justify-content:stretch}.justify-items-start{justify-items:start}.justify-items-end{justify-items:end}.justify-items-center{justify-items:center}.justify-items-stretch{justify-items:stretch}.gap-0{gap:0}.gap-4{gap:1rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-reverse>:not([hidden])~:not([hidden]){--tw-space-y-reverse:1}.space-x-reverse>:not([hidden])~:not([hidden]){--tw-space-x-reverse:1}.divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-right-width:calc(1px * var(--tw-divide-x-reverse));border-left-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}.divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}.divide-y-reverse>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:1}.divide-x-reverse>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:1}.divide-solid>:not([hidden])~:not([hidden]){border-style:solid}.divide-dashed>:not([hidden])~:not([hidden]){border-style:dashed}.divide-dotted>:not([hidden])~:not([hidden]){border-style:dotted}.divide-double>:not([hidden])~:not([hidden]){border-style:double}.divide-none>:not([hidden])~:not([hidden]){border-style:none}.place-self-auto{place-self:auto}.place-self-start{place-self:start}.place-self-end{place-self:end}.place-self-center{place-self:center}.place-self-stretch{place-self:stretch}.self-auto{align-self:auto}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-stretch{align-self:stretch}.self-baseline{align-self:baseline}.justify-self-auto{justify-self:auto}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.justify-self-stretch{justify-self:stretch}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-clip{overflow:clip}.overflow-visible{overflow:visible}.overflow-scroll{overflow:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.overflow-x-clip{overflow-x:clip}.overflow-y-clip{overflow-y:clip}.overflow-x-visible{overflow-x:visible}.overflow-y-visible{overflow-y:visible}.overflow-x-scroll{overflow-x:scroll}.overflow-y-scroll{overflow-y:scroll}.overscroll-auto{overscroll-behavior:auto}.overscroll-contain{overscroll-behavior:contain}.overscroll-none{overscroll-behavior:none}.overscroll-y-auto{overscroll-behavior-y:auto}.overscroll-y-contain{overscroll-behavior-y:contain}.overscroll-y-none{overscroll-behavior-y:none}.overscroll-x-auto{overscroll-behavior-x:auto}.overscroll-x-contain{overscroll-behavior-x:contain}.overscroll-x-none{overscroll-behavior-x:none}.scroll-auto{scroll-behavior:auto}.scroll-smooth{scroll-behavior:smooth}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.overflow-ellipsis{text-overflow:ellipsis}.text-ellipsis{text-overflow:ellipsis}.text-clip{text-overflow:clip}.hyphens-none{-webkit-hyphens:none;hyphens:none}.hyphens-manual{-webkit-hyphens:manual;hyphens:manual}.hyphens-auto{-webkit-hyphens:auto;hyphens:auto}.whitespace-normal{white-space:normal}.whitespace-nowrap{white-space:nowrap}.whitespace-pre{white-space:pre}.whitespace-pre-line{white-space:pre-line}.whitespace-pre-wrap{white-space:pre-wrap}.whitespace-break-spaces{white-space:break-spaces}.break-normal{overflow-wrap:normal;word-break:normal}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.break-keep{word-break:keep-all}.rounded{border-radius:.25rem}.rounded-lg{border-radius:.5rem}.rounded-b{border-bottom-right-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-e{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-s{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.rounded-bl{border-bottom-left-radius:.25rem}.rounded-br{border-bottom-right-radius:.25rem}.rounded-ee{border-end-end-radius:.25rem}.rounded-es{border-end-start-radius:.25rem}.rounded-se{border-start-end-radius:.25rem}.rounded-ss{border-start-start-radius:.25rem}.rounded-tl{border-top-left-radius:.25rem}.rounded-tr{border-top-right-radius:.25rem}.border{border-width:1px}.border-2{border-width:2px}.border-x{border-left-width:1px;border-right-width:1px}.border-y{border-top-width:1px;border-bottom-width:1px}.border-b{border-bottom-width:1px}.border-e{border-inline-end-width:1px}.border-l{border-left-width:1px}.border-r{border-right-width:1px}.border-s{border-inline-start-width:1px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-dashed{border-style:dashed}.border-dotted{border-style:dotted}.border-double{border-style:double}.border-hidden{border-style:hidden}.border-none{border-style:none}.bg-\[rgb\(255\2c 0\2c 0\)\]{--tw-bg-opacity:1;background-color:rgb(255 0 0 / var(--tw-bg-opacity))}.bg-mygreen{--tw-bg-opacity:1;background-color:rgb(0 131 116 / var(--tw-bg-opacity))}.bg-myyellow{--tw-bg-opacity:1;background-color:rgb(246 187 38 / var(--tw-bg-opacity))}.decoration-slice{-webkit-box-decoration-break:slice;box-decoration-break:slice}.decoration-clone{-webkit-box-decoration-break:clone;box-decoration-break:clone}.box-decoration-slice{-webkit-box-decoration-break:slice;box-decoration-break:slice}.box-decoration-clone{-webkit-box-decoration-break:clone;box-decoration-break:clone}.bg-cover{background-size:cover}.bg-fixed{background-attachment:fixed}.bg-local{background-attachment:local}.bg-scroll{background-attachment:scroll}.bg-clip-border{background-clip:border-box}.bg-clip-padding{background-clip:padding-box}.bg-clip-content{background-clip:content-box}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.bg-center{background-position:center}.bg-repeat{background-repeat:repeat}.bg-no-repeat{background-repeat:no-repeat}.bg-repeat-x{background-repeat:repeat-x}.bg-repeat-y{background-repeat:repeat-y}.bg-repeat-round{background-repeat:round}.bg-repeat-space{background-repeat:space}.bg-origin-border{background-origin:border-box}.bg-origin-padding{background-origin:padding-box}.bg-origin-content{background-origin:content-box}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.object-fill{-o-object-fit:fill;object-fit:fill}.object-none{-o-object-fit:none;object-fit:none}.object-scale-down{-o-object-fit:scale-down;object-fit:scale-down}.p-2{padding:.5rem}.p-8{padding:2rem}.px-24{padding-left:6rem;padding-right:6rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-5{padding-top:1.25rem;padding-bottom:1.25rem}.pb-5{padding-bottom:1.25rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-justify{text-align:justify}.text-start{text-align:start}.text-end{text-align:end}.align-baseline{vertical-align:baseline}.align-top{vertical-align:top}.align-middle{vertical-align:middle}.align-bottom{vertical-align:bottom}.align-text-top{vertical-align:text-top}.align-text-bottom{vertical-align:text-bottom}.align-sub{vertical-align:sub}.align-super{vertical-align:super}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-6xl{font-size:3.75rem;line-height:1}.font-bold{font-weight:700}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.capitalize{text-transform:capitalize}.normal-case{text-transform:none}.italic{font-style:italic}.not-italic{font-style:normal}.normal-nums{font-variant-numeric:normal}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.slashed-zero{--tw-slashed-zero:slashed-zero;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.oldstyle-nums{--tw-numeric-figure:oldstyle-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.proportional-nums{--tw-numeric-spacing:proportional-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.diagonal-fractions{--tw-numeric-fraction:diagonal-fractions;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.stacked-fractions{--tw-numeric-fraction:stacked-fractions;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.text-\[\#336699\]\/\[\.35\]{color:rgb(51 102 153 / .35)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.overline{text-decoration-line:overline}.line-through{text-decoration-line:line-through}.no-underline{text-decoration-line:none}.decoration-solid{text-decoration-style:solid}.decoration-double{text-decoration-style:double}.decoration-dotted{text-decoration-style:dotted}.decoration-dashed{text-decoration-style:dashed}.decoration-wavy{text-decoration-style:wavy}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.subpixel-antialiased{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}.bg-blend-normal{background-blend-mode:normal}.bg-blend-multiply{background-blend-mode:multiply}.bg-blend-screen{background-blend-mode:screen}.bg-blend-overlay{background-blend-mode:overlay}.bg-blend-darken{background-blend-mode:darken}.bg-blend-lighten{background-blend-mode:lighten}.bg-blend-color-dodge{background-blend-mode:color-dodge}.bg-blend-color-burn{background-blend-mode:color-burn}.bg-blend-hard-light{background-blend-mode:hard-light}.bg-blend-soft-light{background-blend-mode:soft-light}.bg-blend-difference{background-blend-mode:difference}.bg-blend-exclusion{background-blend-mode:exclusion}.bg-blend-hue{background-blend-mode:hue}.bg-blend-saturation{background-blend-mode:saturation}.bg-blend-color{background-blend-mode:color}.bg-blend-luminosity{background-blend-mode:luminosity}.mix-blend-normal{mix-blend-mode:normal}.mix-blend-multiply{mix-blend-mode:multiply}.mix-blend-screen{mix-blend-mode:screen}.mix-blend-overlay{mix-blend-mode:overlay}.mix-blend-darken{mix-blend-mode:darken}.mix-blend-lighten{mix-blend-mode:lighten}.mix-blend-color-dodge{mix-blend-mode:color-dodge}.mix-blend-color-burn{mix-blend-mode:color-burn}.mix-blend-hard-light{mix-blend-mode:hard-light}.mix-blend-soft-light{mix-blend-mode:soft-light}.mix-blend-difference{mix-blend-mode:difference}.mix-blend-exclusion{mix-blend-mode:exclusion}.mix-blend-hue{mix-blend-mode:hue}.mix-blend-saturation{mix-blend-mode:saturation}.mix-blend-color{mix-blend-mode:color}.mix-blend-luminosity{mix-blend-mode:luminosity}.mix-blend-plus-lighter{mix-blend-mode:plus-lighter}.\!shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1)!important;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.outline-dashed{outline-style:dashed}.outline-dotted{outline-style:dotted}.outline-double{outline-style:double}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-inset{--tw-ring-inset:inset}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.sepia{--tw-sepia:sepia(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.\!filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter-none{filter:none}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-grayscale{--tw-backdrop-grayscale:grayscale(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-invert{--tw-backdrop-invert:invert(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-sepia{--tw-backdrop-sepia:sepia(100%);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-filter-none{-webkit-backdrop-filter:none;backdrop-filter:none}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}.duration-200{transition-duration:.2s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.content-\[\'this-is-also-valid\]-weirdly-enough\'\]{--tw-content:'this-is-also-valid]-weirdly-enough';content:var(--tw-content)}@media (min-width:640px){.sm\:container{width:100%}@media (min-width:100px){.sm\:container{max-width:100px}}@media (min-width:200px){.sm\:container{max-width:200px}}@media (min-width:300px){.sm\:container{max-width:300px}}@media (min-width:410px){.sm\:container{max-width:410px}}@media (min-width:551px){.sm\:container{max-width:551px}}@media (min-width:640px){.sm\:container{max-width:640px}}@media (min-width:768px){.sm\:container{max-width:768px}}@media (min-width:1024px){.sm\:container{max-width:1024px}}@media (min-width:1280px){.sm\:container{max-width:1280px}}@media (min-width:1536px){.sm\:container{max-width:1536px}}@media (min-width:1537px){.sm\:container{max-width:1537px}}@media (min-width:1920px){.sm\:container{max-width:1920px}}@media (min-width:1921px){.sm\:container{max-width:1921px}}@media (min-width:2560px){.sm\:container{max-width:2560px}}@media (min-width:3840px){.sm\:container{max-width:3840px}}@media (min-width:5120px){.sm\:container{max-width:5120px}}@media (min-width:7680px){.sm\:container{max-width:7680px}}}.hover\:font-bold:hover{font-weight:700}.before\:hover\:text-center:hover::before{content:var(--tw-content);text-align:center}.hover\:before\:text-center:hover::before{content:var(--tw-content);text-align:center}.focus\:hover\:text-center:hover:focus{text-align:center}.hover\:focus\:text-center:focus:hover{text-align:center}@media (min-width:640px){.sm\:h-auto{height:auto}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:underline{text-decoration-line:underline}}@media (min-width:768px){.md\:h-full{height:100%}.md\:w-full{width:100%}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.lg\:flex{display:flex}}@media (prefers-color-scheme:dark){@media (min-width:1024px){.dark\:lg\:hover\:\[paint-order\:markers\]:hover{paint-order:markers}}}@media (min-width:1280px){.xl\:flex{display:flex}.xl\:px-4{padding-left:1rem;padding-right:1rem}}@media (min-width:200px){.xxxs\:mt-0{margin-top:0}}@media (min-width:300px){.xxs\:h-auto{height:auto}.xxs\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xxs\:p-0{padding:0}.xxs\:text-2xl{font-size:1.5rem;line-height:2rem}}@media (min-width:410px){.xs\:h-auto{height:auto}.xs\:w-full{width:100%}.xs\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xs\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1920px){.hd\:flex{display:flex}}@media (min-width:2560px){.\32k\:flex{display:flex}}@media (min-width:3840px){.\34k\:flex{display:flex}}@media (min-width:5120px){.\35k\:flex{display:flex}}@media (min-width:7680px){.\38k\:flex{display:flex}}@media (min-width:551px) and (max-width:1023px){.mrange\:flex{display:flex}.mrange\:p-8{padding:2rem}.mrange\:p-4{padding:1rem}.mrange\:py-3{padding-top:.75rem;padding-bottom:.75rem}.mrange\:pb-4{padding-bottom:1rem}}@media (min-width:1024px) and (max-width:7680px){.range\:w-72{width:18rem}.range\:p-8{padding:2rem}}
@font-face{font-family:Lexend;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/lexend/wlpwgwvFAVdoq2_v9KQU4Wc.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Lexend;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/lexend/wlpwgwvFAVdoq2_v9aQU4Wc.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:Lexend;font-style:normal;font-weight:100 900;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/lexend/wlpwgwvFAVdoq2_v-6QU.woff2) format("woff2");unicode-range:u+00??,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:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaORs71cA.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaHRs71cA.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaMRs71cA.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaNRs71cA.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:Nunito;font-style:italic;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXX3I6Li01BKofIMNaDRs4.woff2) format("woff2");unicode-range:u+00??,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:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofIOOaBXso.woff2) format("woff2");unicode-range:u+0460-052f,u+1c80-1c8a,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofIMeaBXso.woff2) format("woff2");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofIOuaBXso.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofIO-aBXso.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:Nunito;font-style:normal;font-weight:200 1000;font-display:swap;src:url(https://online.justselect.com/assets/libs/fonts/nunito/XRXV3I6Li01BKofINeaB.woff2) format("woff2");unicode-range:u+00??,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}
.flag-icon-background{background-repeat:no-repeat;background-position:50%;-webkit-background-size:contain;background-size:contain}.flag-icon{position:relative;display:inline-block;width:1.33333333em;line-height:1em;background-repeat:no-repeat;background-position:50%;-webkit-background-size:contain;background-size:contain}.flag-icon:before{content:"\00a0"}.dropdown-menu .flag-icon{margin-right:5px}.flag-icon-ad{background-image:url(/assets/libs/flags/ad.svg)}.flag-icon-ae{background-image:url(/assets/libs/flags/ae.svg)}.flag-icon-af{background-image:url(/assets/libs/flags/af.svg)}.flag-icon-ag{background-image:url(/assets/libs/flags/ag.svg)}.flag-icon-ai{background-image:url(/assets/libs/flags/ai.svg)}.flag-icon-al{background-image:url(/assets/libs/flags/al.svg)}.flag-icon-am{background-image:url(/assets/libs/flags/am.svg)}.flag-icon-ao{background-image:url(/assets/libs/flags/ao.svg)}.flag-icon-aq{background-image:url(/assets/libs/flags/aq.svg)}.flag-icon-ar{background-image:url(/assets/libs/flags/ar.svg)}.flag-icon-as{background-image:url(/assets/libs/flags/as.svg)}.flag-icon-at{background-image:url(/assets/libs/flags/at.svg)}.flag-icon-au{background-image:url(/assets/libs/flags/au.svg)}.flag-icon-aw{background-image:url(/assets/libs/flags/aw.svg)}.flag-icon-ax{background-image:url(/assets/libs/flags/ax.svg)}.flag-icon-az{background-image:url(/assets/libs/flags/az.svg)}.flag-icon-ba{background-image:url(/assets/libs/flags/ba.svg)}.flag-icon-bb{background-image:url(/assets/libs/flags/bb.svg)}.flag-icon-bd{background-image:url(/assets/libs/flags/bd.svg)}.flag-icon-be{background-image:url(/assets/libs/flags/be.svg)}.flag-icon-bf{background-image:url(/assets/libs/flags/bf.svg)}.flag-icon-bg{background-image:url(/assets/libs/flags/bg.svg)}.flag-icon-bh{background-image:url(/assets/libs/flags/bh.svg)}.flag-icon-bi{background-image:url(/assets/libs/flags/bi.svg)}.flag-icon-bj{background-image:url(/assets/libs/flags/bj.svg)}.flag-icon-bl{background-image:url(/assets/libs/flags/bl.svg)}.flag-icon-bm{background-image:url(/assets/libs/flags/bm.svg)}.flag-icon-bn{background-image:url(/assets/libs/flags/bn.svg)}.flag-icon-bo{background-image:url(/assets/libs/flags/bo.svg)}.flag-icon-bq{background-image:url(/assets/libs/flags/bq.svg)}.flag-icon-br{background-image:url(/assets/libs/flags/br.svg)}.flag-icon-bs{background-image:url(/assets/libs/flags/bs.svg)}.flag-icon-bt{background-image:url(/assets/libs/flags/bt.svg)}.flag-icon-bv{background-image:url(/assets/libs/flags/bv.svg)}.flag-icon-bw{background-image:url(/assets/libs/flags/bw.svg)}.flag-icon-by{background-image:url(/assets/libs/flags/by.svg)}.flag-icon-bz{background-image:url(/assets/libs/flags/bz.svg)}.flag-icon-ca{background-image:url(/assets/libs/flags/ca.svg)}.flag-icon-cc{background-image:url(/assets/libs/flags/cc.svg)}.flag-icon-cd{background-image:url(/assets/libs/flags/cd.svg)}.flag-icon-cf{background-image:url(/assets/libs/flags/cf.svg)}.flag-icon-cg{background-image:url(/assets/libs/flags/cg.svg)}.flag-icon-ch{background-image:url(/assets/libs/flags/ch.svg)}.flag-icon-ci{background-image:url(/assets/libs/flags/ci.svg)}.flag-icon-ck{background-image:url(/assets/libs/flags/ck.svg)}.flag-icon-cl{background-image:url(/assets/libs/flags/cl.svg)}.flag-icon-cm{background-image:url(/assets/libs/flags/cm.svg)}.flag-icon-cn{background-image:url(/assets/libs/flags/cn.svg)}.flag-icon-co{background-image:url(/assets/libs/flags/co.svg)}.flag-icon-cr{background-image:url(/assets/libs/flags/cr.svg)}.flag-icon-cu{background-image:url(/assets/libs/flags/cu.svg)}.flag-icon-cv{background-image:url(/assets/libs/flags/cv.svg)}.flag-icon-cw{background-image:url(/assets/libs/flags/cw.svg)}.flag-icon-cx{background-image:url(/assets/libs/flags/cx.svg)}.flag-icon-cy{background-image:url(/assets/libs/flags/cy.svg)}.flag-icon-cz{background-image:url(/assets/libs/flags/cz.svg)}.flag-icon-de{background-image:url(/assets/libs/flags/de.svg)}.flag-icon-dj{background-image:url(/assets/libs/flags/dj.svg)}.flag-icon-dk{background-image:url(/assets/libs/flags/dk.svg)}.flag-icon-dm{background-image:url(/assets/libs/flags/dm.svg)}.flag-icon-do{background-image:url(/assets/libs/flags/do.svg)}.flag-icon-dz{background-image:url(/assets/libs/flags/dz.svg)}.flag-icon-ec{background-image:url(/assets/libs/flags/ec.svg)}.flag-icon-ee{background-image:url(/assets/libs/flags/ee.svg)}.flag-icon-eg{background-image:url(/assets/libs/flags/eg.svg)}.flag-icon-eh{background-image:url(/assets/libs/flags/eh.svg)}.flag-icon-er{background-image:url(/assets/libs/flags/er.svg)}.flag-icon-es{background-image:url(/assets/libs/flags/es.svg)}.flag-icon-et{background-image:url(/assets/libs/flags/et.svg)}.flag-icon-fi{background-image:url(/assets/libs/flags/fi.svg)}.flag-icon-fj{background-image:url(/assets/libs/flags/fj.svg)}.flag-icon-fk{background-image:url(/assets/libs/flags/fk.svg)}.flag-icon-fm{background-image:url(/assets/libs/flags/fm.svg)}.flag-icon-fo{background-image:url(/assets/libs/flags/fo.svg)}.flag-icon-fr{background-image:url(/assets/libs/flags/fr.svg)}.flag-icon-ga{background-image:url(/assets/libs/flags/ga.svg)}.flag-icon-gb{background-image:url(/assets/libs/flags/gb.svg)}.flag-icon-gd{background-image:url(/assets/libs/flags/gd.svg)}.flag-icon-ge{background-image:url(/assets/libs/flags/ge.svg)}.flag-icon-gf{background-image:url(/assets/libs/flags/gf.svg)}.flag-icon-gg{background-image:url(/assets/libs/flags/gg.svg)}.flag-icon-gh{background-image:url(/assets/libs/flags/gh.svg)}.flag-icon-gi{background-image:url(/assets/libs/flags/gi.svg)}.flag-icon-gl{background-image:url(/assets/libs/flags/gl.svg)}.flag-icon-gm{background-image:url(/assets/libs/flags/gm.svg)}.flag-icon-gn{background-image:url(/assets/libs/flags/gn.svg)}.flag-icon-gp{background-image:url(/assets/libs/flags/gp.svg)}.flag-icon-gq{background-image:url(/assets/libs/flags/gq.svg)}.flag-icon-gr{background-image:url(/assets/libs/flags/gr.svg)}.flag-icon-gs{background-image:url(/assets/libs/flags/gs.svg)}.flag-icon-gt{background-image:url(/assets/libs/flags/gt.svg)}.flag-icon-gu{background-image:url(/assets/libs/flags/gu.svg)}.flag-icon-gw{background-image:url(/assets/libs/flags/gw.svg)}.flag-icon-gy{background-image:url(/assets/libs/flags/gy.svg)}.flag-icon-hk{background-image:url(/assets/libs/flags/hk.svg)}.flag-icon-hm{background-image:url(/assets/libs/flags/hm.svg)}.flag-icon-hn{background-image:url(/assets/libs/flags/hn.svg)}.flag-icon-hr{background-image:url(/assets/libs/flags/hr.svg)}.flag-icon-ht{background-image:url(/assets/libs/flags/ht.svg)}.flag-icon-hu{background-image:url(/assets/libs/flags/hu.svg)}.flag-icon-id{background-image:url(/assets/libs/flags/id.svg)}.flag-icon-ie{background-image:url(/assets/libs/flags/ie.svg)}.flag-icon-il{background-image:url(/assets/libs/flags/il.svg)}.flag-icon-im{background-image:url(/assets/libs/flags/im.svg)}.flag-icon-in{background-image:url(/assets/libs/flags/in.svg)}.flag-icon-io{background-image:url(/assets/libs/flags/io.svg)}.flag-icon-iq{background-image:url(/assets/libs/flags/iq.svg)}.flag-icon-ir{background-image:url(/assets/libs/flags/ir.svg)}.flag-icon-is{background-image:url(/assets/libs/flags/is.svg)}.flag-icon-it{background-image:url(/assets/libs/flags/it.svg)}.flag-icon-je{background-image:url(/assets/libs/flags/je.svg)}.flag-icon-jm{background-image:url(/assets/libs/flags/jm.svg)}.flag-icon-jo{background-image:url(/assets/libs/flags/jo.svg)}.flag-icon-jp{background-image:url(/assets/libs/flags/jp.svg)}.flag-icon-ke{background-image:url(/assets/libs/flags/ke.svg)}.flag-icon-kg{background-image:url(/assets/libs/flags/kg.svg)}.flag-icon-kh{background-image:url(/assets/libs/flags/kh.svg)}.flag-icon-ki{background-image:url(/assets/libs/flags/ki.svg)}.flag-icon-km{background-image:url(/assets/libs/flags/km.svg)}.flag-icon-kn{background-image:url(/assets/libs/flags/kn.svg)}.flag-icon-kp{background-image:url(/assets/libs/flags/kp.svg)}.flag-icon-kr{background-image:url(/assets/libs/flags/kr.svg)}.flag-icon-kw{background-image:url(/assets/libs/flags/kw.svg)}.flag-icon-ky{background-image:url(/assets/libs/flags/ky.svg)}.flag-icon-kz{background-image:url(/assets/libs/flags/kz.svg)}.flag-icon-la{background-image:url(/assets/libs/flags/la.svg)}.flag-icon-lb{background-image:url(/assets/libs/flags/lb.svg)}.flag-icon-lc{background-image:url(/assets/libs/flags/lc.svg)}.flag-icon-li{background-image:url(/assets/libs/flags/li.svg)}.flag-icon-lk{background-image:url(/assets/libs/flags/lk.svg)}.flag-icon-lr{background-image:url(/assets/libs/flags/lr.svg)}.flag-icon-ls{background-image:url(/assets/libs/flags/ls.svg)}.flag-icon-lt{background-image:url(/assets/libs/flags/lt.svg)}.flag-icon-lu{background-image:url(/assets/libs/flags/lu.svg)}.flag-icon-lv{background-image:url(/assets/libs/flags/lv.svg)}.flag-icon-ly{background-image:url(/assets/libs/flags/ly.svg)}.flag-icon-ma{background-image:url(/assets/libs/flags/ma.svg)}.flag-icon-mc{background-image:url(/assets/libs/flags/mc.svg)}.flag-icon-md{background-image:url(/assets/libs/flags/md.svg)}.flag-icon-me{background-image:url(/assets/libs/flags/me.svg)}.flag-icon-mf{background-image:url(/assets/libs/flags/mf.svg)}.flag-icon-mg{background-image:url(/assets/libs/flags/mg.svg)}.flag-icon-mh{background-image:url(/assets/libs/flags/mh.svg)}.flag-icon-mk{background-image:url(/assets/libs/flags/mk.svg)}.flag-icon-ml{background-image:url(/assets/libs/flags/ml.svg)}.flag-icon-mm{background-image:url(/assets/libs/flags/mm.svg)}.flag-icon-mn{background-image:url(/assets/libs/flags/mn.svg)}.flag-icon-mo{background-image:url(/assets/libs/flags/mo.svg)}.flag-icon-mp{background-image:url(/assets/libs/flags/mp.svg)}.flag-icon-mq{background-image:url(/assets/libs/flags/mq.svg)}.flag-icon-mr{background-image:url(/assets/libs/flags/mr.svg)}.flag-icon-ms{background-image:url(/assets/libs/flags/ms.svg)}.flag-icon-mt{background-image:url(/assets/libs/flags/mt.svg)}.flag-icon-mu{background-image:url(/assets/libs/flags/mu.svg)}.flag-icon-mv{background-image:url(/assets/libs/flags/mv.svg)}.flag-icon-mw{background-image:url(/assets/libs/flags/mw.svg)}.flag-icon-mx{background-image:url(/assets/libs/flags/mx.svg)}.flag-icon-my{background-image:url(/assets/libs/flags/my.svg)}.flag-icon-mz{background-image:url(/assets/libs/flags/mz.svg)}.flag-icon-na{background-image:url(/assets/libs/flags/na.svg)}.flag-icon-nc{background-image:url(/assets/libs/flags/nc.svg)}.flag-icon-ne{background-image:url(/assets/libs/flags/ne.svg)}.flag-icon-nf{background-image:url(/assets/libs/flags/nf.svg)}.flag-icon-ng{background-image:url(/assets/libs/flags/ng.svg)}.flag-icon-ni{background-image:url(/assets/libs/flags/ni.svg)}.flag-icon-nl{background-image:url(/assets/libs/flags/nl.svg)}.flag-icon-no{background-image:url(/assets/libs/flags/no.svg)}.flag-icon-np{background-image:url(/assets/libs/flags/np.svg)}.flag-icon-nr{background-image:url(/assets/libs/flags/nr.svg)}.flag-icon-nu{background-image:url(/assets/libs/flags/nu.svg)}.flag-icon-nz{background-image:url(/assets/libs/flags/nz.svg)}.flag-icon-om{background-image:url(/assets/libs/flags/om.svg)}.flag-icon-pa{background-image:url(/assets/libs/flags/pa.svg)}.flag-icon-pe{background-image:url(/assets/libs/flags/pe.svg)}.flag-icon-pf{background-image:url(/assets/libs/flags/pf.svg)}.flag-icon-pg{background-image:url(/assets/libs/flags/pg.svg)}.flag-icon-ph{background-image:url(/assets/libs/flags/ph.svg)}.flag-icon-pk{background-image:url(/assets/libs/flags/pk.svg)}.flag-icon-pl{background-image:url(/assets/libs/flags/pl.svg)}.flag-icon-pm{background-image:url(/assets/libs/flags/pm.svg)}.flag-icon-pn{background-image:url(/assets/libs/flags/pn.svg)}.flag-icon-pr{background-image:url(/assets/libs/flags/pr.svg)}.flag-icon-ps{background-image:url(/assets/libs/flags/ps.svg)}.flag-icon-pt{background-image:url(/assets/libs/flags/pt.svg)}.flag-icon-pw{background-image:url(/assets/libs/flags/pw.svg)}.flag-icon-py{background-image:url(/assets/libs/flags/py.svg)}.flag-icon-qa{background-image:url(/assets/libs/flags/qa.svg)}.flag-icon-re{background-image:url(/assets/libs/flags/re.svg)}.flag-icon-ro{background-image:url(/assets/libs/flags/ro.svg)}.flag-icon-rs{background-image:url(/assets/libs/flags/rs.svg)}.flag-icon-ru{background-image:url(/assets/libs/flags/ru.svg)}.flag-icon-rw{background-image:url(/assets/libs/flags/rw.svg)}.flag-icon-sa{background-image:url(/assets/libs/flags/sa.svg)}.flag-icon-sb{background-image:url(/assets/libs/flags/sb.svg)}.flag-icon-sc{background-image:url(/assets/libs/flags/sc.svg)}.flag-icon-sd{background-image:url(/assets/libs/flags/sd.svg)}.flag-icon-se{background-image:url(/assets/libs/flags/se.svg)}.flag-icon-sg{background-image:url(/assets/libs/flags/sg.svg)}.flag-icon-sh{background-image:url(/assets/libs/flags/sh.svg)}.flag-icon-si{background-image:url(/assets/libs/flags/si.svg)}.flag-icon-sj{background-image:url(/assets/libs/flags/sj.svg)}.flag-icon-sk{background-image:url(/assets/libs/flags/sk.svg)}.flag-icon-sl{background-image:url(/assets/libs/flags/sl.svg)}.flag-icon-sm{background-image:url(/assets/libs/flags/sm.svg)}.flag-icon-sn{background-image:url(/assets/libs/flags/sn.svg)}.flag-icon-so{background-image:url(/assets/libs/flags/so.svg)}.flag-icon-sr{background-image:url(/assets/libs/flags/sr.svg)}.flag-icon-ss{background-image:url(/assets/libs/flags/ss.svg)}.flag-icon-st{background-image:url(/assets/libs/flags/st.svg)}.flag-icon-sv{background-image:url(/assets/libs/flags/sv.svg)}.flag-icon-sx{background-image:url(/assets/libs/flags/sx.svg)}.flag-icon-sy{background-image:url(/assets/libs/flags/sy.svg)}.flag-icon-sz{background-image:url(/assets/libs/flags/sz.svg)}.flag-icon-tc{background-image:url(/assets/libs/flags/tc.svg)}.flag-icon-td{background-image:url(/assets/libs/flags/td.svg)}.flag-icon-tf{background-image:url(/assets/libs/flags/tf.svg)}.flag-icon-tg{background-image:url(/assets/libs/flags/tg.svg)}.flag-icon-th{background-image:url(/assets/libs/flags/th.svg)}.flag-icon-tj{background-image:url(/assets/libs/flags/tj.svg)}.flag-icon-tk{background-image:url(/assets/libs/flags/tk.svg)}.flag-icon-tl{background-image:url(/assets/libs/flags/tl.svg)}.flag-icon-tm{background-image:url(/assets/libs/flags/tm.svg)}.flag-icon-tn{background-image:url(/assets/libs/flags/tn.svg)}.flag-icon-to{background-image:url(/assets/libs/flags/to.svg)}.flag-icon-tr{background-image:url(/assets/libs/flags/tr.svg)}.flag-icon-tt{background-image:url(/assets/libs/flags/tt.svg)}.flag-icon-tv{background-image:url(/assets/libs/flags/tv.svg)}.flag-icon-tw{background-image:url(/assets/libs/flags/tw.svg)}.flag-icon-tz{background-image:url(/assets/libs/flags/tz.svg)}.flag-icon-ua{background-image:url(/assets/libs/flags/ua.svg)}.flag-icon-ug{background-image:url(/assets/libs/flags/ug.svg)}.flag-icon-um{background-image:url(/assets/libs/flags/um.svg)}.flag-icon-us{background-image:url(/assets/libs/flags/us.svg)}.flag-icon-uy{background-image:url(/assets/libs/flags/uy.svg)}.flag-icon-uz{background-image:url(/assets/libs/flags/uz.svg)}.flag-icon-va{background-image:url(/assets/libs/flags/va.svg)}.flag-icon-vc{background-image:url(/assets/libs/flags/vc.svg)}.flag-icon-ve{background-image:url(/assets/libs/flags/ve.svg)}.flag-icon-vg{background-image:url(/assets/libs/flags/vg.svg)}.flag-icon-vi{background-image:url(/assets/libs/flags/vi.svg)}.flag-icon-vn{background-image:url(/assets/libs/flags/vn.svg)}.flag-icon-vu{background-image:url(/assets/libs/flags/vu.svg)}.flag-icon-wf{background-image:url(/assets/libs/flags/wf.svg)}.flag-icon-ws{background-image:url(/assets/libs/flags/ws.svg)}.flag-icon-ye{background-image:url(/assets/libs/flags/ye.svg)}.flag-icon-yt{background-image:url(/assets/libs/flags/yt.svg)}.flag-icon-za{background-image:url(/assets/libs/flags/za.svg)}.flag-icon-zm{background-image:url(/assets/libs/flags/zm.svg)}.flag-icon-zw{background-image:url(/assets/libs/flags/zw.svg)}
/* ui-scale.css
---------------------------------------------------------
? GLOBAL UI SCALE (Base 1920px)
Goal:
- 1920px par jo design hai wohi EXACT rahe
- 1920px se upar (2K/4K/8K) par page proportionally zoom ho
- Existing 2560/3840/7680 media queries ki “manual scaling” ko freeze/override kare
--------------------------------------------------------- */
:root{
--ui-base: 1921px;
--ui-scale: 1;
--ui-scale-max: 5;
}
/* 1921px+ par scale compute */
@media (min-width: 1921px){
html[data-ui-scale="on"]{
--ui-scale: clamp(
1,
calc(100vw / var(--ui-base)),
var(--ui-scale-max)
);
}
}
@media (min-width: 1920px){
html[data-ui-scale="on"] #cardsContainer{
gap: 20px !important;
}
}
/* Stage scaling (Firefox fallback) */
html[data-ui-scale="on"] .ui-scale-stage{
transform: scale(var(--ui-scale));
transform-origin: top left;
width: calc(100% / var(--ui-scale));
}
/* Chrome/Edge best: zoom */
@supports (zoom: 1){
html[data-ui-scale="on"] .ui-scale-stage{
zoom: var(--ui-scale);
transform: none !important;
width: 100% !important;
}
}
/* ---------------------------------------------------------
? FREEZE: 1920 design ko lock kar do for 1921px+
(taake tumhari 2560/3840/7680 wali manual-resize CSS apply na ho)
Ye values tumhare 1920–2559 block ke mutabiq hain.
--------------------------------------------------------- */
@media (min-width: 1920px){
.ui-scale-stage #standardNavHeader{
margin-bottom: 0 !important;
}
.ui-scale-stage #topHeader{
padding-left: 0 !important;
padding-right: 0 !important;
}
.ui-scale-stage .header-wrapper{
max-width: calc(1560px + 2rem) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ui-scale-stage #logo img{
height: 4rem !important;
}
.ui-scale-stage #announce img{
height: 2.4rem !important;
margin-left: 0 !important;
}
.ui-scale-stage #headerNavLinks ul{
font-size: 1.3rem !important;
gap: 2rem !important;
}
.ui-scale-stage #headerNavLinks ul li{
gap: 10px !important;
}
.ui-scale-stage #headerNavLinks ul li svg{
height: 24px !important;
width: auto !important;
}
.ui-scale-stage #headerNavLinks ul li span{
font-size: 20px !important;
}
}
/* Optional: scaling band karni ho */
:root[data-ui-scale="off"]{
--ui-scale: 1 !important;
}
@media (min-width: 1920px){
.ui-scale-stage #standardNavHeader{
margin-bottom: 0 !important;
}
.ui-scale-stage #topHeader{
padding-left: 0 !important;
padding-right: 0 !important;
}
.ui-scale-stage .header-wrapper{
max-width: calc(1560px + 2rem) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.ui-scale-stage #logo img{
height: 4rem !important;
}
.ui-scale-stage #announce img{
height: 2.4rem !important;
margin-left: 0 !important;
}
.ui-scale-stage #headerNavLinks ul{
font-size: 1.3rem !important;
gap: 2rem !important;
}
.ui-scale-stage #headerNavLinks ul li{
gap: 10px !important;
}
.ui-scale-stage #headerNavLinks ul li svg{
height: 24px !important;
width: auto !important;
}
.ui-scale-stage #headerNavLinks ul li span{
font-size: 20px !important;
}
}
/* Optional: scaling band karni ho */
:root[data-ui-scale="off"]{
--ui-scale: 1 !important;
}
@media (min-width: 1920px){
html[data-ui-scale="on"] #lc-filter-overlay,
html[data-ui-scale="on"] #lc-save-search{
display: none !important;
}
html[data-ui-scale="on"] #lc-save-search-desktop{
display: flex !important;
}
html[data-ui-scale="on"] #searchInput{
width: 620px !important;
height: 50px !important;
font-size: 1.4rem !important;
}
html[data-ui-scale="on"] #filterButton{
height: 50px !important;
gap: 8px !important;
padding: 0 20px !important;
}
html[data-ui-scale="on"] #filterButton span{
font-size: 1.2rem !important;
margin-bottom: 0 !important;
}
html[data-ui-scale="on"] #filterButton svg{
width: 30px !important;
height: 30px !important;
}
html[data-ui-scale="on"] .card-inner{
scale: 1 !important;
}
html[data-ui-scale="on"] #contentArea{
padding: 120px 0 !important;
margin: auto !important;
max-width: calc(1560px + 5rem) !important;
}
html[data-ui-scale="on"] #cardsContainer{
gap: 20px !important;
}
html[data-ui-scale="on"] .mc-title{ font-size: 24px !important; }
html[data-ui-scale="on"] .mc-desc{ font-size: 18px !important; }
html[data-ui-scale="on"] .mc-loc-data{
flex-direction: row-reverse !important;
justify-content: flex-end !important;
gap: 5% !important;
}
html[data-ui-scale="on"] .mc-book,
html[data-ui-scale="on"] .mc-price{
font-size: 18px !important;
}
html[data-ui-scale="on"] .secondary-cards{
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
}
html[data-ui-scale="on"] .sc-title{ font-size: 19px !important; }
html[data-ui-scale="on"] .footer-logo p{ font-size: 18px !important; }
html[data-ui-scale="on"] .footer-center nav a{
font-size: 17px !important;
margin: 0 12px !important;
}
html[data-ui-scale="on"] .footer-bottom{ font-size: 15px !important; }
html[data-ui-scale="on"] .apps img{ height: 48px !important; }
html[data-ui-scale="on"] .custom-select{ width: 200px !important; }
html[data-ui-scale="on"] #fc-loc-data{ font-size: 18px !important; }
html[data-ui-scale="on"] .chips > .chip,
html[data-ui-scale="on"] .rc-col,
html[data-ui-scale="on"] .rc-row{
font-size: 14px !important;
}
}
/* Optional: OFF switch */
html[data-ui-scale="off"]{
--ui-scale: 1 !important;
}
html[data-ui-scale="off"] .ui-scale-stage{
transform: none !important;
zoom: 1 !important;
width: 100% !important;
}
@keyframes spin {
0% {
transform: rotate(0deg)
}
to {
transform: rotate(1turn)
}
}
@keyframes flip-show {
0%,
25% {
transform: translateY(50px)
}
33%,
58% {
transform: translateY(0)
}
66%,
91% {
transform: translateY(-50px)
}
to {
transform: translateY(50px)
}
}
@keyframes slide-up {
0% {
transform: translateY(40%);
opacity: 0
}
to {
transform: translateY(0);
opacity: 1
}
}
@keyframes slide-left {
0% {
transform: translateX(100%)
}
70% {
transform: translateX(0)
}
}
@keyframes slide-right {
0% {
transform: translateX(0)
}
to {
transform: translateX(100%)
}
}
@keyframes fade-in {
0% {
opacity: 0
}
}
* {
margin: 0;
padding: 0;
font-family: nunito, sans-serif !important;
box-sizing: border-box
}
#navBoxesContainer {
min-height: 150px
}
.ending-line {
display: none;
border-bottom: 1px solid var(--gray-bg);
width: 100%;
margin-bottom: 50px
}
body,
html {
margin-top: -1px !important;
background-color: var(--background-color)
}
a {
text-decoration: none;
color: #fff
}
li,
menu,
ol,
ul {
list-style: none
}
.slide-right {
animation: slide-right .5s ease
}
.slide-left {
animation: slide-left .5s ease-out
}
.white-text {
color: #fff
}
.darken-content {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 20;
background-color: var(--semi-transparent-black)
}
.hidden {
display: none !important
}
.screenreader-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
.all-rounded {
border-radius: .5rem;
padding: 0;
text-align: center
}
#ad-timer {
position: fixed;
top: 16px;
right: 16px;
background: transparent;
border: 3px solid var(--yellow);
color: var(--yellow);
font-weight: 700;
padding: 8px 12px;
border-radius: 20px;
font-family: Arial, sans-serif;
font-size: 14px;
z-index: 1000;
backdrop-filter: blur(4px);
box-shadow: 0 2px 4px #313131
}
#premium-ad-view {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1100
}
#premium-container {
width: 100%;
background-position: 50%;
background-size: cover;
height: 100vh;
position: relative
}
#bottom-progress-bar {
width: 100%;
position: absolute;
background-color: #f6bb26;
bottom: 0;
height: 8px;
left: 0;
z-index: 10
}
@media (max-width:769px) {
#ad-timer {
font-size: 12px;
padding: 6px 10px;
top: 15px;
right: 15px
}
}
#standardNavHeader {
background-color: var(--teal);
}
#topHeader {
background-color: var(--secondary-dark);
padding: 0 4rem 0 5rem
}
#topHeader,
.header-wrapper {
display: flex;
align-items: center;
justify-content: space-between
}
.header-wrapper {
width: 100%;
margin: 0
}
#headerLogo {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: .5rem 0
}
#headerLogo a {
display: flex;
gap: 1rem
}
#logo img {
height: 3.6rem;
padding-left: 2px
}
#announce img {
height: 2.4rem;
margin-bottom: 6px
}
#headerNavLinks ul {
font-size: 1.25rem;
gap: 1.3rem
}
#headerNavLinks ul,
#headerNavLinks ul li a {
display: flex;
align-items: center;
justify-content: center
}
#headerNavLinks ul li a {
gap: 10px;
position: relative
}
#headerNavLinks ul li a img,
#headerNavLinks ul li a svg,
.radio-style {
height: 24px;
color: #ededed
}
#headerNavLinks ul li a svg.highlight,
#headerNavLinks ul li a svg.highlight-icon {
color: var(--yellow)
}
#headerNavLinks ul li a span {
font-size: 1.3rem;
border-bottom: 4px solid transparent
}
#headerNavLinks ul li a span:hover {
border-bottom: 4px solid #f6bb03
}
@media (min-width:1441px) and (max-width:1919px) {
.header-wrapper {
max-width: calc(1440px + 2rem);
margin: auto
}
}
@media (min-width:1221px) and (max-width:2559px) {
#topHeader {
padding-left: 0;
padding-right: 0
}
#headerNavLinks ul {
gap: .9rem
}
#headerNavLinks ul li a span {
font-size: 1.2rem;
margin-bottom: -2px
}
}
@media (min-width:1221px) and (max-width:1440px) {
.header-wrapper {
max-width: calc(clamp(175px, 12.153vw, 230px)*6 + 3rem);
margin: auto
}
#logo img {
height: 3rem
}
#announce {
margin-left: -8px
}
#announce img {
height: 2.2rem;
margin-left: 7px
}
}
@media (min-width:769px) and (max-width:1220px) {
#topHeader {
padding-left: 3rem;
padding-right: 3rem
}
#logo img {
height: 3.2rem
}
#announce img {
height: 2.2rem
}
#headerNavLinks ul li a img,
#headerNavLinks ul li a svg {
height: 24px
}
#headerNavLinks ul li a {
flex-direction: column;
gap: 2px
}
#headerNavLinks ul li a span {
font-size: 1rem
}
}
@media (min-width:481px) and (max-width:769px) {
.header-wrapper {
align-items: center;
justify-content: center
}
#logo img {
height: 3.2rem
}
#announce {
scale: 1;
margin-top: 4px;
margin-left: -2px
}
#announce img {
height: 2.3rem;
margin-bottom: 8px;
zoom: .025;
scale: 33;
transform: translate(18px, -5px)
}
#headerNavLinks {
display: none
}
}
@media (max-width:480px) {
#topHeader {
padding: 0;
height: 4rem
}
.header-wrapper {
align-items: center;
justify-content: center
}
#headerLogo {
gap: 8px;
margin-left: 2px
}
#logo img {
height: 2.6rem
}
#announce img {
height: 2.2rem;
margin-right: -5px;
zoom: .01;
scale: 32;
transform: translate(12px, -38px)
}
#headerNavLinks {
display: none
}
}
#standardNavText {
gap: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2.5rem
}
.banner-title{
font-size: clamp(18px, 3vw, 32px);
font-weight: 500;
line-height: 1.3;
text-align: center;
letter-spacing: -0.5px;
background: linear-gradient(135deg,
#ffffff 0%,
rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: fadeInUp 0.8s ease-out 0.3s both;
position: relative;
padding: 2px 0;
margin-bottom: 20px;
}
.banner-title::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(to right, transparent, white 50%, transparent);
animation: glow 2s ease-in-out infinite;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes glow {
0%,
100% {
opacity: 0.5;
width: 60px;
}
50% {
opacity: 1;
width: 120px;
}
}
#standardNavText h1 {
font-size: 2.6rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
text-align: center;
max-width: 92%
}
#standardNavText a {
gap: 6px
}
#standardNavText a,
#standardNavText a span {
display: flex;
align-items: center;
justify-content: center
}
#standardNavText a span {
font-size: min(3.2vw, 20px)
}
#standardNavText a span svg {
width: 2.5rem
}
#mainSearchContainer,
#standardNavSearchContainer {
display: flex;
align-items: center;
justify-content: center
}
#mainSearchContainer {
z-index: 22;
position: relative;
gap: 0
}
#dropdownButton {
background-color: var(--secondary-dark);
display: inline-flex;
padding: 0 15px;
height: 50px;
line-height: 16px;
gap: 5px;
color: #fff;
border: none;
border-top-left-radius: 999px;
align-items: center;
justify-content: center;
font-size: medium
}
#searchInput {
border-top-right-radius: 26px !important;
border-bottom-right-radius: 26px !important;
transition: none !important;
transition: border-radius .16s ease !important
}
@media (min-width:1920px) and (max-width:2559px) {
:root:not([data-ui-scale="on"]) #standardNavText h1 {
font-size: 2.07vw
}
:root:not([data-ui-scale="on"]) #standardNavText a span {
font-size: 1.4rem
}
:root:not([data-ui-scale="on"]) #dropdownButton {
height: 50px;
gap: 8px;
padding: 0 20px
}
:root:not([data-ui-scale="on"]) #dropdownButton span {
font-size: 1.2rem;
margin-bottom: 0
}
:root:not([data-ui-scale="on"]) #dropdownButton svg {
width: 30px;
height: 30px
}
:root:not([data-ui-scale="on"]) #dropdownButton span {
font-size: 1.4rem
}
}
@media (min-width:1441px) and (max-width:1919px) {
#standardNavText a span {
font-size: 1.3rem
}
}
@media (min-width:1221px) and (max-width:1440px) {
#standardNavText h1 {
font-size: 3vw
}
#standardNavText a span {
font-size: 1.2rem
}
}
@media (min-width:769px) and (max-width:1220px) {
#standardNavText h1 {
font-size: max(3.3vw, 35px)
}
}
@media (min-width:481px) and (max-width:769px) {
#standardNavText {
padding: 25px 0
}
#standardNavText h1 {
font-size: max(4.375vw, 23px);
text-align: center
}
#mainSearchContainer {
width: max(75%, 430px);
margin: 0
}
}
@media (max-width:480px) {
#standardNavText {
padding: 20px 0
}
#standardNavText h1 {
font-size: min(6.07vw, 23px) !important;
text-align: center;
padding: 0
}
#standardNavText a {
gap: 2px
}
#standardNavText a span {
font-size: max(3vw, 11px);
line-height: 5px;
display: flex;
align-items: center;
justify-content: center
}
#standardNavText a span svg {
width: 1.5rem;
margin-top: -2px
}
#standardNavSearchContainer {
padding-bottom: .4rem
}
#mainSearchContainer {
width: 100%;
margin: 0 10px
}
}
#searchSuggestions>div>div>div.content {
width: 100%
}
.msc-ic-search {
position: absolute;
right: 14px;
display: flex;
gap: 6px;
align-items: center
}
.msc-ic-search>img {
height: 24px;
width: auto
}
.boxes-carousel {
position: relative;
overflow: visible;
max-width: fit-content;
margin: auto
}
.arrow,
.boxes-carousel {
display: flex;
align-items: center;
justify-content: center
}
.arrow {
position: absolute;
width: 36px;
height: 36px;
border: none;
background-color: color-mix(in srgb, var(--secondary-dark) 60%, transparent);
border-radius: 50%;
color: #fff;
font-size: 18px;
cursor: pointer;
z-index: 10;
top: 50%;
transform: translateY(-50%);
transition: none
}
.arrow:disabled {
cursor: not-allowed
}
.arrow:hover {
background-color: var(--secondary-dark)
}
.arrow.back,
.arrow.left {
left: -2.5rem
}
.arrow.right {
right: -2.5rem
}
#navBoxesContainer {
display: flex;
gap: 1rem;
z-index: 4;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
background: 0 0;
overflow-y: visible;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
align-items: center
}
.box-card {
background-color: var(--teal-light);
width: min-content;
min-width: 160px;
aspect-ratio: 4/4;
border-radius: 1.1rem;
overflow: hidden;
display: grid;
grid-template-rows: 1fr auto 1fr;
align-items: center;
justify-items: center;
justify-content: center;
row-gap: 5px;
z-index: 5;
position: relative;
padding: 12px;
scroll-snap-align: start
}
.box-card:hover .card-hover-effect {
opacity: 1
}
.card-hover-effect {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(250, 235, 215, .07450980392156863);
transition-property: opacity;
transition-duration: .3s;
opacity: 0;
z-index: 7
}
.box-card img {
width: 25%;
height: auto;
z-index: 6;
align-self: end
}
.box-card h2 {
color: #fff;
font-size: 1.1rem;
font-weight: 400;
line-height: 1.75rem;
text-wrap-mode: nowrap;
width: 100%;
overflow: hidden;
text-align: center;
z-index: 6;
position: relative
}
.box-card h2>span {
display: inline-block;
white-space: nowrap
}
.box-card .card-inner {
align-self: start
}
@media (min-width:1920px) and (max-width:2559px) {
.boxes-carousel {
top: 6.4rem;
margin-top: -60px;
margin-bottom: 20px
}
#navBoxesContainer {
max-width: calc(1560px + 5rem)
}
.box-card {
width: clamp(260px, 13.542vw, 330px);
min-width: 260px;
row-gap: clamp(.3rem, .6vw, .5rem);
aspect-ratio: 6/5;
scroll-snap-align: start
}
.box-card h2 {
font-size: 1.3rem
}
.box-card img {
width: 50px
}
.card-inner {
scale: 1
}
}
@media (min-width: 1220px) and (max-width: 1440px) {
.box-card {
flex: 0 0 calc((100% / 5) - 0.8rem);
min-width: calc((220 / 5) - 0.8rem);
aspect-ratio: 1/1;
scroll-snap-align: start;
height: 173px !important;
}
}
@media (min-width: 1441px) and (max-width: 1600px) {
#navBoxesContainer{
max-width: calc(1191px + 5rem) !important;
}
.box-card {
flex: 0 0 calc((100% / 5) - 0.8rem);
min-width: calc((220 / 5) - 0.8rem);
aspect-ratio: 1/1;
scroll-snap-align: start;
}
}
/* @media (min-width: 1520px) and (max-width: 1600px) {
#cardsContainer{
max-width: calc(1199px + 5rem) !important;
margin-left: 120px !important;
margin-right: 120px !important;
}
} */
/* @media (min-width: 1490px) and (max-width: 1519px) {
#cardsContainer{
max-width: calc(1199px + 5rem) !important;
margin-left: 110px !important;
margin-right: 110px !important;
}
} */
/* @media (min-width: 1450px) and (max-width: 1489px) {
#cardsContainer{
max-width: calc(1199px + 5rem) !important;
margin-left: 95px !important;
margin-right: 95px !important;
}
} */
@media (min-width: 1440px) and (max-width: 1599px) {
#cardsContainer{
max-width: calc(1199px + 5rem) !important;
margin-left: 87px !important;
margin-right: 87px !important;
}
}
@media (min-width: 1441px) and (max-width: 1600px) {
/* 1. Main wrapper ko relative karein taake arrows iske andar rahein */
.boxes-carousel {
position: relative;
width: 100%;
max-width: 1400px !important; /* Card row ki total width ke mutabiq */
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: visible; /* Arrows ko bahar dikhane ke liye */
}
/* 2. Arrows ki base settings */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 110;
}
/* 3. Back/Left Arrow: Pehle card ke sath */
.arrow.back, .arrow.left {
/* Isay container ke bahar thoda sa left dhalel dein */
left: -40px;
}
/* 4. Right Arrow: Aakhri card ke bilkul sath (Jaisa 2nd image mein hai) */
.arrow.right {
/* Isay container ke bahar thoda sa right dhakel dein */
right: -40px;
}
/* Container alignment setup */
#navBoxesContainer {
width: 100%;
display: flex;
gap: 1rem;
justify-content: center; /* Taake cards centered rahein */
overflow: visible;
}
/* Card size adjustment */
.box-card {
flex: 0 0 220px; /* Cards ki width ko fix rakhein */
aspect-ratio: 1/1;
}
}
@media (min-width: 1221px) and (max-width: 1600px) {
.boxes-carousel {
margin-top: -40px;
margin-bottom: 10px;
top: 5rem;
width: 100%;
max-width: 100%;
overflow: visible;
}
#navBoxesContainer {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 1rem;
margin: 0 auto;
/*max-width: 97% !important; */
justify-content: flex-start;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
/* #cardsContainer {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: center !important;
margin: 0 auto !important;
gap: 20px !important;
width: 100% !important;
align-items: flex-start !important;
}*/
#navBoxesContainer::-webkit-scrollbar {
display: none;
}
.box-card {
flex: 0 0 calc((100% / 5) - 0.8rem);
min-width: calc((220 / 5) - 0.8rem);
aspect-ratio: 1/1;
scroll-snap-align: start;
}
.arrow.back {
left: calc(30% - 0px);
top: 50%;
transform: translateY(-50%);
position: absolute;
z-index: 101;
}
.arrow {
z-index: 100;
position: absolute;
}
.arrow.right {
right: 1%;
}
.arrow.left {
left: 1%;
}
.box-card h2 {
font-size: 1.1rem;
}
.box-card img {
width: 30%;
}
}
@media (min-width:1441px) and (max-width:1919px) {
.boxes-carousel {
top: 5.6rem;
margin-top: -60px;
margin-bottom: 10px
}
#navBoxesContainer {
max-width: calc(1440px + 5rem)
}
.box-card {
aspect-ratio: 6/5;
min-width: 240px;
width: clamp(240px, 15.65vw, 300px);
scroll-snap-align: start
}
.box-card h2 {
margin-bottom: 0;
font-size: 1.4rem
}
}
@media (min-width:1221px) and (max-width:1440px) {
.boxes-carousel {
margin-top: -40px;
margin-bottom: 10px;
top: 5rem;
}
#navBoxesContainer {
margin-top: 0;
margin-bottom: 0;
max-width: calc(100vw - 6rem);
overflow-x: auto
}
.box-card {
padding: 15px;
min-width: clamp(178px, 16.438vw, 218px);
width: clamp(175px, 12.153vw, 230px);
aspect-ratio: 1/1;
scroll-snap-align: start
}
.box-card h2 {
font-size: 1.2rem
}
.box-card img {
width: 30%
}
.card-inner {
padding: 0
}
}
/* ✅ 1441–1599: Boxes same as 1440 (width + height lock) */
@media (min-width:1441px) and (max-width:1599px) {
.boxes-carousel{
margin-top: -40px !important;
margin-bottom: 10px !important;
top: 5rem !important;
}
#navBoxesContainer{
margin-top: 0 !important;
margin-bottom: 0 !important;
max-width: calc(100vw - 6rem) !important;
overflow-x: auto !important;
}
.box-card{
padding: 15px !important;
min-width: clamp(178px, 16.438vw, 218px) !important;
width: clamp(175px, 12.153vw, 230px) !important;
aspect-ratio: 1/1 !important;
/* ✅ ye height 1440 wali feel match karti hai */
height: 173px !important;
scroll-snap-align: start !important;
}
.box-card h2{
font-size: 1.2rem !important;
}
.box-card img{
width: 30% !important;
}
.card-inner{
padding: 0 !important;
}
}
@media (min-width:769px) and (max-width:1220px) {
.boxes-carousel {
top: 110px;
margin-top: -100px;
margin-bottom: 80px
}
}
@media (min-width:900px) and (max-width:1220px) {
#navBoxesContainer {
gap: .5rem;
padding-bottom: 2.2rem;
margin-top: 2.2rem;
max-width: calc(760px + 2.1rem)
}
.box-card {
max-width: 152px;
width: 152px;
min-width: 152px;
aspect-ratio: 1/1;
z-index: 5;
position: relative;
row-gap: 2px;
scroll-snap-align: start;
padding: 5px
}
.box-card h2 {
font-size: 1.1rem;
margin-bottom: 0
}
.box-card img {
width: 30%
}
.card-inner {
padding: 0 6px;
scale: .85
}
}
@media (min-width:769px) and (max-width:899px) {
#navBoxesContainer {
gap: .5rem;
padding-bottom: 2.2rem;
margin-top: 2.2rem;
max-width: calc(608px + 1.6rem)
}
.box-card {
max-width: 152px;
width: 152px;
min-width: 152px;
aspect-ratio: 1/1;
z-index: 5;
position: relative;
row-gap: 1px;
scroll-snap-align: start;
padding: 5px
}
.box-card h2 {
font-size: 1.1rem;
margin-bottom: 0
}
.box-card img {
width: 30%
}
.card-inner {
padding: 0 6px;
scale: .85
}
}
@media (min-width:481px) and (max-width:769px) {
.boxes-carousel {
top: 105px;
margin-top: -110px;
margin-bottom: 80px;
zoom: .85
}
#navBoxesContainer {
gap: 10px;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
max-width: 500px
}
}
@media (max-width:480px) {
.boxes-carousel {
top: 50px;
margin-top: -70px;
margin-bottom: calc(clamp(70px, 25vw, 100px)*0.7)
}
.arrow.back,
.arrow.left {
left: -1.75rem
}
.arrow.right {
right: -1.75rem
}
.arrow {
width: 24px;
height: 24px
}
.arrow>svg {
width: 14px;
height: auto
}
#navBoxesContainer {
gap: .5rem;
max-width: calc(clamp(75px, 25vw, 999px)*3 + 1rem);
margin: auto;
min-height: 102px
}
.box-card {
width: 100%;
aspect-ratio: 1/1;
z-index: 5;
position: relative;
min-width: 140px;
padding: 4px;
row-gap: 4px;
scroll-snap-align: start;
grid-template-rows: minmax(24px, auto) auto;
align-content: center;
justify-content: center
}
.box-card h2 {
font-size: 15px;
margin-bottom: 0
}
.box-card img {
width: 30%;
align-self: center;
justify-self: center
}
.card-inner {
display: none
}
}
@media (max-width:300px) {
.boxes-carousel {
zoom: .9
}
}
@media (max-width:250px) {
.boxes-carousel {
zoom: .8
}
}
/* ==========================================================
✅ UI-SCALE MODE (1920+): Freeze MENU/CAROUSEL rules
- When html has data-ui-scale="on", we do NOT want
2560/3840/7680 manual resize rules to kick in.
- Instead, keep the 1920-2559 look and let ui-scale.css
handle the zoom.
========================================================== */
@media (min-width:1921px){
html[data-ui-scale="on"] .boxes-carousel{
top: 6.4rem !important;
margin-top: -60px !important;
margin-bottom: 20px !important;
}
html[data-ui-scale="on"] #navBoxesContainer{
max-width: calc(1560px + 5rem) !important;
gap: 1rem !important;
justify-content: center !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
html[data-ui-scale="on"] .box-card{
width: clamp(260px, 13.542vw, 330px) !important;
min-width: 260px !important;
row-gap: clamp(.3rem, .6vw, .5rem) !important;
aspect-ratio: 6/5 !important;
scroll-snap-align: start !important;
}
html[data-ui-scale="on"] .box-card h2{
font-size: 1.3rem !important;
margin-bottom: 0 !important;
}
html[data-ui-scale="on"] .box-card img{
/* vw double-scale fix: viewport sizing cancel using --ui-scale */
width: calc(3.1vw / var(--ui-scale)) !important;
}
html[data-ui-scale="on"] .card-inner{
scale: 1 !important;
margin-top: 0 !important;
}
html[data-ui-scale="on"] .arrow{
width: 36px !important;
height: 36px !important;
font-size: 18px !important;
top: 50% !important;
transform: translateY(-50%) !important;
}
html[data-ui-scale="on"] .arrow>svg{
width: 24px !important;
height: auto !important;
}
}
@media (min-width: 7680px) {
body .box-card > img {
width: 50% !important;
}
}
#home-screen {
overflow-y: auto
}
.secondary-cards {
display: flex;
flex-direction: column;
gap: 8px
}
.bg-shapes {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
animation: float 20s infinite;
}
.shape1 {
width: 300px;
height: 300px;
bottom: 15%;
left: -9%;
animation-delay: 0s;
}
.shape2 {}
.shape3 {
width: 300px;
height: 300px;
top: 10%;
right: -9%;
animation-delay: 0s;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-30px) rotate(180deg);
}
}
.box-card::before {
content: "";
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
top: -10px;
right: -10px;
animation: pulse 8s ease-in-out infinite;
}
.box-card::after {
content: "";
position: absolute;
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.05);
border-radius: 50%;
bottom: -10px;
left: -10px;
animation: pulse 6s ease-in-out infinite reverse;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.8;
}
}
/*/* Preloader */
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #265f5c 0%, #332f2f 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.fade-out {
opacity: 0;
visibility: hidden;
}
.loader-container {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(20px, 3vw, 30px);
}
.loader-text {
color: white;
font-size: clamp(14px, 1vw, 110px);
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
animation: textFade 1.5s ease-in-out infinite;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.loader-square {
width: clamp(50px, 6vw, 500px);
height: clamp(50px, 6vw, 500px);
display: flex;
align-items: center;
justify-content: center;
border: 4px solid rgba(255, 255, 255, 0.2);
border-radius: clamp(6px, 0.8vw, 65px);
animation: squareSpin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}
.loader-square img {
width: 80%;
height: 80%;
object-fit: cover;
background: transparent;
}
@keyframes textFade {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
@keyframes squareSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#preloader {
position: fixed;
inset: 0;
background: rad;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
}
#premium-ad-view {
position: fixed;
inset: 0;
background: #313131;
z-index: 99998;
/* Loader se ek level niche */
transition: opacity 0.5s ease;
}
#preloader.fade-out {
opacity: 0;
visibility: hidden;
transition: all 0.5s ease;
}
.main-cards {
min-height: 400px
}
#cardsContainer {
min-height: 500px
}
#categoriesDropdown {
z-index: 22
}
#phoneNavBar {
position: fixed;
bottom: -1px;
left: 0;
width: 100vw;
height: 3.4rem;
background-color: var(--secondary-dark);
color: #fff;
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
transition: none;
padding-top: 3px;
border-top: 2px solid hsla(0, 0%, 100%, .1)
}
#phoneNavBar ul {
display: flex;
align-items: center;
width: 100%;
justify-content: space-around
}
#phoneNavBar ul li {
width: 100%
}
#phoneNavBar ul li a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center
}
.svg-container {
width: max-content;
position: relative
}
#phoneNavBar ul li a .navicon-badge {
position: absolute
}
#phoneNavBar ul li a img,
#phoneNavBar ul li a svg {
height: 20px;
margin: 4px 0;
color: #f2f2f2
}
#phoneNavBar ul li a svg.highlight {
color: var(--yellow)
}
#phoneNavBar ul li a span {
font-size: small
}
#categoryBack,
#filterButton {
background-color: var(--secondary-dark);
display: inline-flex;
padding: 0 15px;
height: 50px;
line-height: 16px;
gap: 5px;
color: #fff
}
#categoryBack {
border: none;
align-items: center;
justify-content: center;
font-size: medium;
cursor: pointer;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
display: none;
position: absolute;
left: -32px;
transition: none !important
}
#phoneNavBar ul li a:hover span {
border-bottom: 4px solid #f6bb03
}
#phoneNavBar ul li a span {
border-bottom: 4px solid transparent
}
#phoneNavBar ul li a span.navActive {
border-bottom: 4px solid #f6bb03
}
.brl20 {
border-bottom-left-radius: 999px
}
.brr20 {
border-bottom-right-radius: 999px;
border-top-right-radius: 999px
}
#searchInput {
height: 50px;
font-size: 1.125rem;
line-height: 1.75rem;
padding: 0 10px;
border: none;
outline: 0;
width: 700px;
color: var(--secondary-dark)
}
#filterButton {
border: none;
border-top-right-radius: 20px;
align-items: center;
justify-content: center;
font-size: medium
}
#categoriesDropdown {
position: absolute;
left: 0;
box-shadow: -1px -1px 20px rgba(0, 0, 0, .23921568627450981);
border-radius: 20px;
border-top-left-radius: 0;
border-top-right-radius: 0;
width: 100%;
margin-top: -2px;
top: 100%;
height: fit-content;
z-index: 8;
background-color: var(--teal);
border: 4px solid var(--secondary-dark);
animation: none;
transition: none
}
#categoriesDropdown ul {
flex-direction: row;
flex-wrap: wrap;
gap: 12px;
padding: 28px;
font-size: .875rem;
line-height: 1.25rem;
transition: none
}
#categoriesDropdown ul,
#filterSidebar {
display: flex;
align-items: center;
justify-content: center
}
#filterSidebar {
z-index: 22
}
#mainFilterSidebar {
position: fixed;
inset: 0;
z-index: 10
}
#sidebarOverlay {
position: fixed;
inset: 0;
width: 100vw;
background-color: var(--semi-transparent-black);
animation: fade-in .3s
}
#sidebarSection {
position: fixed;
top: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
z-index: 10001;
background-color: #ededed;
transform: translateX(-100%);
transition: transform 0.4s ease-out;
padding-left: 0;
margin: 0;
/* --- Ye rahi woh logic --- */
/* Clamp syntax: clamp(MIN, PREFERRED, MAX) */
/* Iska matlab: Kam se kam 300px, wese 80% screen, magar 500px se zyada nahi */
width: clamp(300px, 80vw, 500px) !important;
}
/* Choti mobile screens (iPhone SE wagera) par full width ke liye sirf ek query kaafi hai */
@media (max-width: 480px) {
#sidebarSection {
width: 100% !important;
}
}
@media (max-width: 1220px) {
#sidebarBody {
padding: 15px;
overflow-y: auto;
max-height: calc(100vh - 80px);
/* Header nikaal kar baaki scrollable area */
/* Center karne ke liye niche wali lines aham hain */
display: flex;
flex-direction: column;
align-items: center;
/* Horizontal centering */
justify-content: flex-start;
/* Content ko top se shuru karega */
width: 100%;
box-sizing: border-box;
}
}
#sidebarContent>div {
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
background-color: #ededed
}
#sidebarHeader,
.radio-option {
display: flex;
align-items: center
}
#sidebarHeader {
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #ccc;
background-color: #313131
}
#sidebarHeader h2 {
color: #fff;
font-size: 1.25rem;
line-height: 1.75rem
}
#sidebarHeader button {
background: 0 0;
border: none;
color: #fff;
cursor: pointer
}
#sidebarHeader button svg {
width: 1.5rem;
height: 1.5rem;
color: #fff
}
.qfc-loc-input {
max-width: 500px;
height: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 300px
}
.radio-option {
justify-content: space-between;
flex-direction: row-reverse;
gap: 2rem;
font-size: 1rem;
line-height: 1.5rem;
color: #000
}
.range-suffix,
.section-title-flex {
align-items: center;
display: flex
}
.radio-style {
width: 1.25rem;
margin: .75rem 1rem
}
#sidebarContent label {
padding: .5rem 0;
font-size: 1.125rem;
line-height: 1.75rem
}
#sidebarContent label[for] {
width: 100%
}
.radio-option,
.range-group {
width: 88% !important;
margin: auto
}
.clickable-text {
cursor: pointer
}
.section-title,
.section-title-flex {
font-size: 1.25rem;
font-weight: 600;
color: #000;
padding: 1.5rem 0;
line-height: 1.75rem
}
.icon-circle {
width: 1.75rem;
height: 1.75rem;
margin-right: .5rem;
border-radius: 50%;
background-color: #ededed;
color: #000;
flex-shrink: 0
}
.section-divider {
margin: 1rem auto;
max-width: 88%;
border-top: 1px solid var(--text-copyright)
}
.range-group {
display: flex;
gap: 1rem;
justify-content: space-between;
margin: 0 auto;
width: 100%;
color: #000
}
.range-input-wrapper {
display: flex;
width: 100%;
position: relative
}
.range-input {
width: 100%;
border: 1px solid #000;
height: 2.75rem;
padding: 0 2.5rem 0 1rem;
border-radius: .5rem 0 0 .5rem
}
.range-suffix {
border: 1px solid #000;
border-left: none;
background: var(--secondary-dark);
color: var(--text-light);
padding: 0 1rem;
border-radius: 0 .5rem .5rem 0
}
.sidebar-actions {
justify-content: space-between;
gap: 1rem;
border-top: 1px solid #ccc;
padding: 1rem 0;
margin-top: 1rem;
width: 88%;
margin-left: auto;
margin-right: auto
}
.ad-card,
.sidebar-actions {
display: flex;
align-items: center
}
.ad-card {
justify-content: center;
background: #fff;
border: 2px dashed #666;
border-radius: 8px;
color: #555;
font-size: 1rem;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, .1)
}
.m-auto {
margin: auto auto 10px
}
#geoDataDetails {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
background-color: var(--secondary-dark);
padding: 6px 12px;
color: #fff;
gap: 10px;
text-transform: capitalize
}
.gd-row {
display: flex;
gap: 5px;
font-family: Nunito, sans-serif
}
#bottom-progress-bar {
transition: none !important
}
#adRedirect {
display: inline-block;
position: relative
}
#adRedirect:after {
content: none !important
}
.ad-media-wrapper {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: var(--secondary-dark);
overflow: hidden
}
#myImage,
#myVideo {
max-width: 100vw;
width: 100vw;
max-height: 100%;
object-fit: cover;
transition: transform .3s ease
}
#bottom-progress-bar {
background-color: var(--yellow) !important
}
#gd-lang {
text-transform: none !important
}
.footer-applications {
color: #8b8b8b !important;
font-weight: 700 !important
}
#filterButton {
display: none !important
}
#searchSuggestions {
position: absolute;
z-index: 1000;
background: #fff;
color: #0f172a;
border: 1px solid rgba(2, 6, 23, .08);
border-radius: 0 0 12px 12px;
box-shadow: 0 10px 30px rgba(15, 23, 42, .15);
overflow: hidden;
max-height: 420px;
display: none;
transform-origin: top left;
will-change: transform, opacity
}
#searchSuggestions.animating-open {
display: block;
animation: dropdownIn .14s ease-out forwards
}
#searchSuggestions.animating-close {
animation: dropdownOut .12s ease-in forwards
}
#searchSuggestions.open {
display: block;
opacity: 1
}
#searchSuggestions .list {
overflow: auto;
max-height: 420px;
scrollbar-width: none;
-ms-overflow-style: none
}
#searchSuggestions .list::-webkit-scrollbar {
display: none
}
#searchSuggestions .section {
padding: 8px 14px 6px;
font-size: .72rem;
color: #475569;
letter-spacing: .04em;
text-transform: uppercase
}
#searchSuggestions .suggestion-item {
display: grid;
grid-template-columns:1fr auto;
gap: 10px;
align-items: center;
padding: 10px 14px;
cursor: pointer;
transition: transform .12s ease, background .12s ease;
border-top: 1px solid rgba(2, 6, 23, .06);
animation: itemIn .16s ease both
}
#searchSuggestions .suggestion-item:first-of-type {
border-top: none
}
#searchSuggestions .suggestion-item.active,
#searchSuggestions .suggestion-item:hover {
background: rgba(2, 6, 23, .04);
transform: translateX(1px)
}
#searchSuggestions .icon {
display: inline-flex;
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(2, 6, 23, .04);
align-items: center;
justify-content: center;
overflow: hidden
}
#searchSuggestions .icon img {
width: 18px;
height: 18px;
object-fit: contain;
display: block
}
#searchSuggestions .content {
min-width: 0
}
#searchSuggestions .title {
font-size: .92rem;
line-height: 1.2rem;
color: #0f172a
}
#searchSuggestions .meta,
#searchSuggestions .title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
#searchSuggestions .meta {
font-size: .78rem;
color: #64748b
}
#searchSuggestions .pill {
font-size: .72rem;
padding: 4px 8px;
border-radius: 999px;
border: 1px solid rgba(2, 6, 23, .12);
color: #0f172a;
background: #fff;
white-space: nowrap;
margin-left: 8px
}
#searchSuggestions mark {
background: #fef3c7;
color: inherit;
padding: 0 2px;
border-radius: 3px
}
#searchSuggestions .suggestion-item[data-skeleton] {
pointer-events: none;
opacity: .9
}
#searchSuggestions .suggestion-item[data-skeleton] .icon {
background: #e5e7eb;
position: relative;
overflow: hidden
}
#searchSuggestions .suggestion-item[data-skeleton] .icon:after,
#searchSuggestions .suggestion-item[data-skeleton] .meta:after,
#searchSuggestions .suggestion-item[data-skeleton] .pill:after,
#searchSuggestions .suggestion-item[data-skeleton] .title:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .6) 50%, hsla(0, 0%, 100%, 0));
background-size: 200% 100%;
animation: jsShimmer 1.1s linear infinite;
border-radius: inherit
}
#searchSuggestions .suggestion-item[data-skeleton] .meta,
#searchSuggestions .suggestion-item[data-skeleton] .pill,
#searchSuggestions .suggestion-item[data-skeleton] .title {
color: transparent !important;
position: relative;
background: #f1f5f9;
border-radius: 6px;
overflow: hidden
}
#searchSuggestions .suggestion-item[data-skeleton] .title {
height: 16px;
max-width: 70%;
margin-top: 2px
}
#searchSuggestions .suggestion-item[data-skeleton] .meta {
height: 12px;
max-width: 45%;
margin-top: 8px
}
#searchSuggestions .suggestion-item[data-skeleton] .pill {
height: 20px;
width: 64px;
border-color: transparent !important
}
#searchInput.dd-open {
border-bottom-right-radius: 0 !important
}
.mc-image {
min-height: 200px;
background: #f5f5f5;
overflow: hidden
}
.mc-image.loading {
background: #f0f0f0
}
.loader-spinner {
top: 10px;
left: 10px;
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite
}
.card-image-placeholder {
display: block;
width: 100%;
height: 160px;
object-fit: cover;
background: #f2f2f2
}
img.loaded-image {
opacity: 1;
transition: opacity .2s ease-in
}
img.lazy {
opacity: 0
}
.fallback-image {
display: flex;
align-items: center;
justify-content: center;
height: 160px;
color: #666;
background: #fafafa
}
.listing-control {
display: flex;
flex-direction: column;
gap: 12px
}
.lc-controls {
background-color: #fff;
padding: 8px 10px;
border-radius: 20px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .14);
border: 2px solid rgba(0, 0, 0, .18);
display: flex;
justify-content: space-between
}
.lcc-left,
.lcc-right {
display: flex;
gap: 10px;
align-items: center
}
#lcc-right-more {
display: none
}
#lc-save-search-desktop,
.filters-toggle-btn {
display: none !important
}
#lc-filter-overlay,
#lc-save-search {
position: fixed;
bottom: 80px;
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
color: #fff;
cursor: pointer;
border: 2px solid var(--yellow);
background-color: var(--secondary-dark);
border-radius: 20px;
padding: 6px 10px;
z-index: 4;
height: 40px
}
#lc-save-search {
right: 20px
}
#lc-filter-overlay {
left: 20px
}
#lc-filter-overlay>svg,
#lc-save-search>svg {
margin-top: -2px
}
#lc-filter-overlay>span,
#lc-save-search>span {
font-size: .95rem;
text-wrap-mode: nowrap
}
.lcc-left button,
.lcc-right button {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
border: 2px solid var(--secondary-dark);
color: #fff;
background-color: var(--secondary-dark);
border-radius: 20px;
padding: 6px 12px;
transition: scale .4s ease
}
.lcc-left button:hover,
.lcc-right button:hover {
scale: 1.05
}
.lc-filter-view {
align-items: center
}
.lc-filter-view,
.lcfv-chips-container {
display: flex;
gap: 10px
}
.lcfv-chip {
gap: 4px;
color: var(--secondary-dark);
background-color: color-mix(in srgb, var(--secondary-dark) 25%, transparent);
border: 2px solid var(--secondary-dark);
border-radius: 8px;
padding: 4px 10px
}
.lcfv-chip,
.no-results-message {
display: flex;
align-items: center;
justify-content: center
}
.no-results-message {
flex-direction: column;
padding: 60px 20px;
font-size: 16px;
color: #666;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 20px;
margin: 20px 0;
text-align: center;
min-height: 200px
}
.no-results-icon {
width: 60px;
height: 60px;
margin-bottom: 20px;
color: var(--secondary-dark, #333);
opacity: .7
}
.no-results-message p {
margin: 0;
font-weight: 500
}
.sc-body-container {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 10px
}
.card-skeleton {
display: flex;
flex-direction: row;
background: #f9f9f9;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
margin: auto;
width: 100%
}
.sidebar-actions button {
padding: .625rem 1.5rem;
border: none;
border-radius: 15px;
font-size: .875rem;
cursor: pointer
}
.sidebar-actions .clear-btn,
.sidebar-actions .search-btn {
background: #313131;
color: #fff
}
#sidebarBody {
padding: 10px;
overflow-y: scroll;
scrollbar-width: none;
-ms-overflow-style: none
}
#sidebarBody::-webkit-scrollbar {
display: none
}
.card-inner>* {
text-align: center;
font-size: small
}
#searchBtnContainer {
margin-top: 0;
zoom: 1
}
#searchBtnContainer,
#searchBtnContainer>button {
display: flex;
align-items: center;
justify-content: center
}
#searchBtnContainer>button {
position: relative;
gap: 6px;
color: #fff;
padding: .75rem 1.8rem .75rem 1.4rem;
margin-top: 2rem;
border-radius: 9999px;
border: 2px solid #fff;
background-color: #008d7d
}
#searchBtnContainer>button>svg {
width: 1.4rem;
aspect-ratio: 1/1
}
#searchBtnContainer>button>span {
font-weight: 700;
font-size: 1.1rem
}
.anim-flip {
height: 40px;
overflow: hidden;
align-items: center;
justify-content: center;
font-family: sans-serif;
font-size: 18px;
font-weight: 600;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
border: 2px solid #fff
}
.anim-flip,
.anim-flip>div {
display: flex;
flex-direction: column
}
.anim-flip>div {
animation: flip-show 6s cubic-bezier(.68, -.55, .27, 1.55) infinite;
animation-fill-mode: both
}
.anim-flip>div>div {
color: #fff;
padding: 8px 16px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: .95rem;
font-weight: 700;
line-height: 20px
}
#contentArea {
width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
padding: 100px 5rem
}
#cardsContainer {
display: flex;
gap: 10px;
justify-content: space-between
}
.main-cards {
flex-direction: column;
gap: 20px
}
.main-card,
.main-cards {
display: flex;
width: 100%
}
.main-card {
gap: 0;
background: #fff;
border: 2px solid #ddd;
border-radius: 18px;
overflow: hidden;
cursor: pointer
}
.main-card:hover .mc-title {
color: var(--teal)
}
.mc-image {
flex: 1 1;
max-width: 300px;
position: relative
}
.listing-wrapper {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%
}
.mc-img-loader {
position: absolute;
top: 50%;
left: 50%;
width: 40px;
height: 40px;
margin: -15px 0 0 -15px;
border: 4px solid #e3e3e3;
border-top: 4px solid var(--yellow);
border-radius: 50%;
animation: spin 1s linear infinite;
z-index: 2
}
.mc-image>img {
width: 100%;
height: 100%;
object-fit: cover;
display: block
}
.ad-badges,
.mc-image>img {
position: absolute;
top: 0;
left: 0
}
.ad-badges {
margin: 12px;
flex-direction: column;
gap: 5px
}
.ad-badges,
.ad-badges span {
display: flex;
align-items: center;
justify-content: center
}
.ad-badges span {
overflow: hidden;
width: 40px;
height: 40px;
background-color: rgba(0, 0, 0, .5);
aspect-ratio: 1/1;
padding: 2px;
border-radius: 999px
}
.ad-badges img {
width: 65%;
height: auto
}
.item-like {
position: absolute;
top: 0 !important;
right: 0 !important;
margin: 12px;
background-color: rgba(0, 0, 0, .5);
display: flex;
align-items: center;
justify-content: center;
padding: 7px;
border-radius: 999px
}
.item-like svg {
width: 20px;
height: auto;
transition: stroke .2s
}
.item-like.liked svg {
stroke: var(--yellow);
fill: var(--yellow)
}
.item-like:hover svg {
stroke: var(--yellow)
}
.mc-body {
flex: 1 1 10%;
padding: 0;
display: flex;
flex-direction: column;
gap: 0
}
.mc-main {
padding: 10px 20px;
gap: 4px
}
.mc-main,
.mc-title-container {
display: flex;
flex-direction: column
}
.mc-title-container {
width: calc(100% - 16px);
gap: 0;
margin: auto auto 4px
}
.mc-title {
color: var(--secondary-dark);
font-size: 1.3rem
}
.c-line {
height: 4px;
background-color: var(--teal)
}
.mc-cat,
.mc-post-date {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 3px;
color: #555;
font-size: 13px
}
.mc-cat svg,
.mc-post-date svg {
width: 18px;
height: auto
}
.mc-tags {
flex-wrap: wrap;
gap: 10px;
color: #555
}
.mc-tag,
.mc-tags {
display: flex;
align-items: center
}
.mc-tag {
justify-content: center;
gap: 5px;
font-size: 12px;
font-weight: 700;
border: 2px solid var(--secondary-dark);
min-width: 50px;
padding: 4px 8px;
border-radius: 999px
}
.mc-tag svg {
height: 16px;
width: auto
}
.mc-loc-data {
display: flex;
flex-direction: column;
gap: 2px;
flex-wrap: wrap;
color: #555;
font-size: 13px
}
.mc-city {
display: flex;
align-items: center;
gap: 2px
}
.mc-city svg {
height: 16px;
width: auto
}
.mc-postal-code {
display: flex;
gap: 2px
}
.mc-postal-code svg {
height: 16px;
width: auto
}
.mc-loc-data .mc-city span {
display: block
}
.mc-price {
display: flex;
align-items: center;
justify-content: center;
gap: 6px
}
.mc-price img {
margin-top: -4px
}
.mc-bottom {
background-color: var(--secondary-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 10px 20px;
font-size: 18px
}
.secondary-card .mc-bottom {
justify-content: center !important;
}
.star-rating {
scale: 1.2;
margin-right: 12px
}
.star-rating .filled {
color: var(--yellow)
}
.main-card.visited .c-line {
background-color: var(--text-copyright)
}
.main-card.visited .mc-title {
color: var(--dark-gray)
}
.secondary-card {
display: flex;
flex-direction: column;
gap: 0;
background: #fff;
width: 300px;
border: 2px solid #ddd;
border-radius: 22px;
overflow: hidden
}
.sc-image {
position: relative;
flex: none;
overflow: hidden;
margin: 0 0 8px;
border-radius: 0;
width: 100%;
height: 190px
}
/*.sc-image img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover
}*/
/* Badge Circles */
.badge-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
cursor: pointer;
background: #1a1a1a;
border: 2.5px solid #f5c542;
box-shadow:
0 3px 6px rgba(0, 0, 0, 0.5),
inset 0 -5px 8px rgba(0, 0, 0, 0.8),
inset 0 3px 5px rgba(255, 255, 255, 0.15);
}
/* Icons ko image ke mutabiq chota aur center karne ke liye */
.badge-circle img {
width: 18px;
height: 18px;
object-fit: contain;
/* Image mein icons thode dull golden hain, agar aap chaho to filter use kar sakte ho */
filter: brightness(0.9) contrast(1.1);
}
/* Hover effect taake user ko pata chale click ho sakta hai */
.badge-circle:hover {
background: #222;
border-color: #ffd700;
transform: scale(1.05);
transition: all 0.2s ease-in-out;
}
.badge-circle img {
width: 16px;
height: auto;
}
/* Heart Icon (Initial) */
.item-like {
position: absolute;
top: 8px;
right: 8px;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.item-like svg {
width: 22px;
height: 22px;
}
/* Heart Icon (When Liked - Becomes Circle with Yellow Color) */
.item-like.liked {
width: 36px;
height: 36px;
background: radial-gradient(circle at center, #111 0%, #000 70%);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
/* main ring */
border: 2.5px solid #f6bb26;
/* glowing outer ring */
box-shadow:
0 0 6px rgba(246, 187, 38, 0.8),
0 0 14px rgba(246, 187, 38, 0.6),
0 0 26px rgba(246, 187, 38, 0.35);
}
.item-like.liked svg {
fill: #f6bb26;
/* Yellow heart */
stroke: #f6bb26;
width: 32px;
height: 32px;
}
.sc-body {
padding: 0;
display: flex;
flex-direction: column;
gap: 8px
}
#filterSidebar.hidden {
display: none !important;
}
#filterSidebar {
display: flex;
/* hidden class hat-te hi flex ho jaye */
position: fixed;
inset: 0;
z-index: 9999;
}
/* Sidebar ka main container jo poori screen par hota hai */
#filterSidebar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
}
/* Sidebar ka wo hissa jo slide hota hai */
#sidebarSection {
position: fixed;
top: 0;
left: 0;
/* Isay 0 karne se white space khatam ho jayegi */
width: 85%;
/* Aap 90% ya 100% bhi kar sakte hain */
height: 100%;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.clickable-text {
color: black !important;
}
/* Sidebar content aur all-wrapper ko full width karein */
#sidebarContent {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* Sidebar Body ko scrollable aur full width karein */
#sidebarBody {
flex: 1;
overflow-y: auto;
padding: 15px;
width: 100%;
box-sizing: border-box;
/* Taake padding se width bahar na jaye */
}
/* Jab sidebar khule (Animation ke liye classes) */
.animate-in-left {
transform: translateX(0) !important;
}
/* Animations Definitions */
@keyframes slide-in-from-left {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes slide-out-to-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* Helper Classes */
.slide-in {
animation: slide-in-from-left 0.5s forwards ease-out;
}
.slide-out {
animation: slide-out-to-left 0.4s forwards ease-in;
}
.sc-title {
font-size: 1.25rem
}
.badge-circle {
position: relative;
display: inline-flex;
/* Icon aur tooltip ki alignment behtar karne ke liye */
align-items: center;
}
#filterSidebar.hidden {
display: none;
}
#sidebarBody {
padding: 15px;
overflow-y: auto;
max-height: calc(100vh - 80px);
/* Header nikaal kar baaki scrollable area */
}
/* Sidebar ke andar filters ko vertical dikhane ke liye */
#sidebarBody .qfc-filters-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Hover aur Touch dono ke liye trigger */
.badge-circle:hover::after,
.badge-circle.active-tooltip::after {
content: attr(data-label);
position: absolute;
/* Position change: Niche ki jagah Right side (Front) par lane ke liye */
top: 50%;
left: 105%;
/* Icon ke khatam hone ke foran baad shuru hoga */
transform: translateY(-50%);
/* Tooltip ko icon ke bilkul center mein rakhne ke liye */
background: var(--secondary-dark);
color: #ffffff;
padding: 4px 10px;
border-radius: 10px;
font-size: 11px;
font-weight: 500;
white-space: nowrap;
z-index: 999;
/* Smooth appearance */
pointer-events: none;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
.sc-price {
font-weight: 700;
font-size: 1.1rem;
background-color: var(--secondary-dark);
width: max-content;
padding: 8px 16px;
color: #fff;
border-radius: 999px;
margin: auto
}
/* 1. Parent container ki height ko image ke mutabiq adjust karein */
.secondary-card .sc-image {
height: 190px;
/* 250px se kam karke 190px karein (ye 75% ke barabar hai) */
width: 100%;
overflow: hidden;
position: relative;
margin-bottom: 0;
/* Extra gap khatam karne ke liye */
}
/* 2. Image ko ab 100% height dein taake container fill ho jaye */
.sc-img-fixed {
width: 100% !important;
height: 100% !important;
/* Container ki height 190px hai, isliye ise 100% karein */
object-fit: cover;
display: block;
}
/* 3. Body container ka margin/padding check karein */
.sc-body-container {
padding-top: 5px !important;
/* Isay mazeed kam kar diya */
margin-top: -2px !important;
/* Thoda sa upar lane ke liye negative margin */
}
.sc-title {
margin: 12px 0 5px 0 !important;
line-height: 1.2;
}
.skeleton-img {
width: 300px;
height: 180px;
background: #ddd;
position: relative;
overflow: hidden
}
.skeleton-content {
flex: 1;
padding: 15px;
display: flex;
flex-direction: column;
justify-content: space-between
}
.skeleton-line,
.skeleton-price,
.skeleton-stars,
.skeleton-title {
background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 4px
}
.skeleton-title {
width: 60%;
height: 18px;
margin-bottom: 12px
}
.skeleton-line {
width: 80%;
height: 12px;
margin-bottom: 8px
}
.skeleton-line.small {
width: 40%
}
.skeleton-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px
}
.skeleton-price {
width: 100px;
height: 16px
}
.skeleton-stars {
width: 80px;
height: 16px
}
.ad-300 {
width: 300px;
aspect-ratio: 300/250;
height: auto
}
.ad-970 {
width: 970px;
aspect-ratio: 970/250;
height: auto
}
.navicon-badge {
position: absolute;
top: 0;
right: 0;
font-size: 12px;
background-color: red;
width: 13px;
height: 13px;
border-radius: 99px;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
content: "1"
}
.filter-controls {
width: 100%;
background-color: #fff;
min-height: 20px;
box-shadow: 0 0 8px rgba(0, 0, 0, .26666666666666666);
display: flex;
align-items: center;
padding: 14px 16px;
border-radius: 10px
}
.fc-location-box {
flex: 1 1;
height: 100%;
min-width: 360px
}
.fc-loc-input,
.fc-location-box {
position: relative
}
.fc-loc-drop,
.fc-loc-icon {
position: absolute;
top: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
aspect-ratio: 1/1
}
.fc-loc-drop svg,
.fc-loc-icon svg {
height: 80%;
width: auto
}
.fc-loc-drop {
right: 4px;
transition: all .3s ease;
color: #6f6f6f
}
.fc-loc-input {
max-width: 500px;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
.fc-loc-input:focus-within .fc-loc-drop,
.fc-loc-input:focus-within .fc-loc-icon {
color: var(--secondary-dark)
}
.fc-loc-input:focus-within .fc-loc-drop {
transform: rotate(180deg) translateY(2px)
}
.fc-loc-dropdown {
overflow: hidden;
position: absolute;
width: 100%;
max-width: 500px;
min-height: 0;
margin-top: 2px;
border-radius: 8px;
border: 1px solid rgba(0, 0, 0, .26666666666666666);
background-color: #f9f9f9;
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 16px 16px;
z-index: 100;
transition: none
}
.chips {
width: 100%;
padding: 6px;
display: flex;
gap: 3px;
font-size: 12px;
color: #fff
}
.chips>.chip {
background-color: var(--secondary-dark);
padding: 6px 6px 6px 10px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px
}
.radius-choice {
display: flex;
flex-direction: column;
padding: 6px;
gap: 6px
}
.rc-row {
align-items: center;
justify-content: space-between
}
.rc-col,
.rc-row {
display: flex;
font-size: small
}
.rc-col {
flex-direction: column;
gap: 4px
}
input[type=range] {
font-size: 1.5rem;
color: var(--secondary-dark);
--thumb-height: 0.75em;
--track-height: 0.25em;
--track-color: rgba(0, 0, 0, 0.2);
--brightness-hover: 180%;
--brightness-down: 80%;
--clip-edges: 0.125em;
position: relative;
background: 0 0;
overflow: hidden
}
input[type=range]:active {
cursor: grabbing
}
input[type=range]:disabled {
filter: grayscale(1);
opacity: .3;
cursor: not-allowed
}
input[type=range],
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
transition: all .1s ease;
height: var(--thumb-height)
}
input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-webkit-slider-thumb {
position: relative
}
input[type=range]::-webkit-slider-thumb {
--thumb-radius: calc(var(--thumb-height)*0.5 - 1px);
--clip-top: calc(var(--thumb-height)*0.5 - var(--track-height)*0.5 - 0.5px);
--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
--clip-further: calc(100% + 1px);
--box-fill: calc(-100vmax - var(--thumb-height)) 0 0 100vmax currentColor;
width: var(--thumb-height);
background: linear-gradient(currentColor 0 0) scroll no-repeat 0/50% calc(var(--track-height) + 1px);
background-color: currentColor;
box-shadow: var(--box-fill);
border-radius: var(--thumb-height);
filter: brightness(100%);
clip-path: polygon(100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further))
}
input[type=range]:hover::-webkit-slider-thumb {
filter: brightness(var(--brightness-hover));
cursor: grab
}
input[type=range]:active::-webkit-slider-thumb {
filter: brightness(var(--brightness-down));
cursor: grabbing
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(var(--track-color) 0 0) scroll no-repeat 50%/100% calc(var(--track-height) + 1px)
}
input[type=range]:disabled::-webkit-slider-thumb {
cursor: not-allowed
}
input[type=range],
input[type=range]::-moz-range-thumb,
input[type=range]::-moz-range-track {
appearance: none;
transition: all .1s ease;
height: var(--thumb-height)
}
input[type=range]::-moz-range-progress,
input[type=range]::-moz-range-thumb,
input[type=range]::-moz-range-track {
background: 0 0
}
input[type=range]::-moz-range-thumb {
background: currentColor;
border: 0;
width: var(--thumb-height);
border-radius: var(--thumb-height);
cursor: grab
}
input[type=range]:active::-moz-range-thumb {
cursor: grabbing
}
input[type=range]::-moz-range-track {
width: 100%;
background: var(--track-color)
}
input[type=range]::-moz-range-progress {
appearance: none;
background: currentColor;
transition-delay: 30ms
}
input[type=range]::-moz-range-progress,
input[type=range]::-moz-range-track {
height: calc(var(--track-height) + 1px);
border-radius: var(--track-height)
}
input[type=range]::-moz-range-progress,
input[type=range]::-moz-range-thumb {
filter: brightness(100%)
}
input[type=range]:hover::-moz-range-progress,
input[type=range]:hover::-moz-range-thumb {
filter: brightness(var(--brightness-hover))
}
input[type=range]:active::-moz-range-progress,
input[type=range]:active::-moz-range-thumb {
filter: brightness(var(--brightness-down))
}
input[type=range]:disabled::-moz-range-thumb {
cursor: not-allowed
}
.fc-loc-controls {
display: flex;
align-items: center;
justify-content: space-between
}
.fc-loc-controls>button {
font-size: 14px;
padding: 6px 12px;
border-radius: 8px
}
.fc-loc-reset {
border: 1px solid var(--secondary-dark);
color: var(--secondary-dark);
background-color: transparent
}
.fc-loc-apply {
border: none;
background-color: var(--secondary-dark);
color: #fff
}
.range-helpers {
display: flex;
align-items: center;
justify-content: space-between
}
.range-helpers span {
text-align: center;
width: 50px
}
.fc-right-controls {
flex: 1 1;
display: flex;
align-items: center;
justify-content: end;
gap: 14px;
align-self: stretch
}
.fc-sort-opt {
border: 1px solid rgba(0, 0, 0, .26666666666666666);
border-radius: 8px;
height: 100%;
width: 230px;
font-size: medium;
color: #444;
outline: 0
}
.fc-right-controls>button {
border: none;
font-size: medium;
border-radius: 8px;
height: 100%;
background-color: transparent;
display: flex;
align-items: center
}
.fc-right-controls>button>img,
.fc-right-controls>button>svg {
padding: 5px 0;
height: 100%;
max-height: 36px;
width: auto;
color: #6f6f6f
}
.fc-right-controls>button>svg:hover {
color: var(--yellow)
}
:root {
--rd-size: 20px;
--rd-border: var(--secondary-dark);
--rd-bg: #fff;
--rd-accent: var(--secondary-dark);
--rd-focus: rgba(0, 200, 200, 0);
--rd-disabled: hsla(0, 0%, 100%, 0.06)
}
.radio-dark-wrap {
display: inline-flex;
align-items: center;
gap: .5rem;
cursor: pointer;
user-select: none;
margin-right: 20px
}
.radio-dark-input {
position: absolute;
opacity: 0;
pointer-events: none
}
.radio-dark-custom {
width: var(--rd-size);
height: var(--rd-size);
border-radius: 50%;
background: var(--rd-bg);
border: 2px solid var(--rd-border);
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .02);
position: relative;
flex-shrink: 0;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease
}
.radio-dark-custom:after {
content: "";
position: absolute;
inset: 50%;
transform: translate(-50%, -50%) scale(.001);
width: calc(var(--rd-size)*0.52);
height: calc(var(--rd-size)*0.52);
border-radius: 50%;
background: var(--rd-accent);
transition: transform .14s cubic-bezier(.2, .9, .2, 1);
box-shadow: 0 0 6px rgba(0, 0, 0, .2)
}
.radio-dark-input:checked+.radio-dark-custom:after {
transform: translate(-50%, -50%) scale(1)
}
.radio-dark-input:focus-visible+.radio-dark-custom {
box-shadow: 0 0 0 4px var(--rd-focus)
}
.radio-dark-wrap:hover .radio-dark-custom {
transform: translateY(-1px)
}
.radio-dark-input:disabled+.radio-dark-custom {
background: var(--rd-disabled);
border-color: hsla(0, 0%, 100%, .04);
opacity: .6;
cursor: not-allowed
}
.radio-dark-input:disabled~.radio-dark-label {
opacity: .6;
cursor: not-allowed
}
.top-secondary-cards {
display: none !important
}
:root {
--cb-size: var(--rd-size);
--cb-border: var(--rd-border);
--cb-bg: #fff;
--cb-accent: var(--rd-accent);
--cb-focus: var(--rd-focus);
--cb-disabled: var(--rd-disabled)
}
.checkbox-dark-wrap {
display: inline-flex;
align-items: center;
gap: .5rem;
cursor: pointer;
user-select: none;
margin-right: 20px
}
.checkbox-dark-input {
position: absolute;
opacity: 0;
pointer-events: none
}
.checkbox-dark-custom {
width: var(--cb-size);
height: var(--cb-size);
border-radius: 6px;
background: var(--cb-bg);
border: 2px solid var(--secondary-dark);
box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, .02);
position: relative;
flex-shrink: 0;
transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease
}
.checkbox-dark-custom:after {
content: "";
position: absolute;
top: 35%;
left: 50%;
width: 45%;
height: 25%;
border-left: 2px solid var(--cb-accent);
border-bottom: 2px solid var(--cb-accent);
border-radius: 6px;
transform: translate(-50%, -50%) rotate(-45deg) scale(.001);
transition: transform .14s cubic-bezier(.2, .9, .2, 1);
transform-origin: center
}
.checkbox-dark-input:checked+.checkbox-dark-custom:after {
transform: translate(-50%, -50%) rotate(-45deg) scale(1.8)
}
.checkbox-dark-input:focus-visible+.checkbox-dark-custom {
box-shadow: 0 0 0 4px var(--cb-focus)
}
.checkbox-dark-wrap:hover .checkbox-dark-custom {
transform: translateY(-1px)
}
.checkbox-dark-input:disabled+.checkbox-dark-custom {
background: var(--cb-disabled);
border-color: hsla(0, 0%, 100%, .04);
opacity: .6;
cursor: not-allowed
}
.checkbox-dark-input:disabled~.checkbox-dark-label {
opacity: .6;
cursor: not-allowed
}
@media (max-width:710px) {
.filter-controls {
flex-direction: column;
gap: 4px
}
.fc-right-controls {
justify-content: center;
min-height: 36px;
flex-direction: row
}
.fc-location-box {
width: 100%;
min-width: 245px
}
.fc-sort-opt {
height: 36px;
width: 100%;
background-color: #f9f9f9
}
.fc-loc-input {
max-width: 100%;
width: 100%
}
}
@media (max-width:800px) {
.main-cards {
align-items: center
}
.mc-loc-data {
flex-direction: column;
gap: 0;
align-items: flex-start
}
.mc-image {
position: relative;
width: 100%;
max-width: 100%;
height: 200px;
flex: none
}
.mc-image>img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover
}
}
@media (min-width:1920px) and (max-width:2559px) {
:root:not([data-ui-scale="on"]) #lc-filter-overlay,
:root:not([data-ui-scale="on"]) #lc-save-search {
display: none
}
:root:not([data-ui-scale="on"]) #lc-save-search-desktop {
display: flex !important
}
:root:not([data-ui-scale="on"]) #searchInput {
width: 620px;
font-size: large;
height: 50px;
font-size: 20px
}
:root:not([data-ui-scale="on"]) #filterButton {
height: 50px;
gap: 8px;
padding: 0 20px
}
:root:not([data-ui-scale="on"]) #filterButton span {
font-size: 1.2rem;
margin-bottom: 0
}
:root:not([data-ui-scale="on"]) #filterButton svg {
width: 30px;
height: 30px
}
:root:not([data-ui-scale="on"]) .card-inner {
scale: 1
}
:root:not([data-ui-scale="on"]) #contentArea {
padding: 120px 0;
margin: auto;
max-width: calc(1560px + 5rem)
}
:root:not([data-ui-scale="on"]) #cardsContainer {
gap: 20px
}
:root:not([data-ui-scale="on"]) .mc-title {
font-size: 24px
}
:root:not([data-ui-scale="on"]) .mc-desc {
font-size: 18px
}
:root:not([data-ui-scale="on"]) .mc-loc-data {
flex-direction: row-reverse;
justify-content: flex-end;
gap: 5%
}
:root:not([data-ui-scale="on"]) .mc-book,
:root:not([data-ui-scale="on"]) .mc-price {
font-size: 18px
}
:root:not([data-ui-scale="on"]) .secondary-cards {
display: flex;
flex-direction: column;
gap: 20px
}
:root:not([data-ui-scale="on"]) .sc-title {
font-size: 19px
}
:root:not([data-ui-scale="on"]) .footer-logo p {
font-size: 18px
}
:root:not([data-ui-scale="on"]) .footer-center nav a {
font-size: 17px;
margin: 0 12px
}
:root:not([data-ui-scale="on"]) .footer-bottom {
font-size: 15px
}
:root:not([data-ui-scale="on"]) .apps img {
height: 48px
}
:root:not([data-ui-scale="on"]) .custom-select {
width: 200px
}
:root:not([data-ui-scale="on"]) #filterButton span,
:root:not([data-ui-scale="on"]) #searchInput {
font-size: 1.4rem
}
:root:not([data-ui-scale="on"]) #fc-loc-data {
font-size: 18px
}
:root:not([data-ui-scale="on"]) .chips>.chip,
:root:not([data-ui-scale="on"]) .rc-col,
:root:not([data-ui-scale="on"]) .rc-row {
font-size: 14px
}
:root:not([data-ui-scale="on"]) .footer-contact p,
:root:not([data-ui-scale="on"]) .footer-links a,
:root:not([data-ui-scale="on"]) .footer-logo p,
:root:not([data-ui-scale="on"]) .footer-services a {
font-size: clamp(18px, .938vw, 20px)
}
:root:not([data-ui-scale="on"]) .footer-contact h4,
:root:not([data-ui-scale="on"]) .footer-links h4,
:root:not([data-ui-scale="on"]) .footer-services h4 {
font-size: clamp(20px, 1.05vw, 22px)
}
:root:not([data-ui-scale="on"]) .mc-cat,
:root:not([data-ui-scale="on"]) .mc-loc-data,
:root:not([data-ui-scale="on"]) .mc-post-date,
:root:not([data-ui-scale="on"]) .mc-tag {
font-size: clamp(14px, .729vw, 16px)
}
:root:not([data-ui-scale="on"]) .mc-main {
gap: 4px
}
}
@media (min-width:1441px) and (max-width:1919px) {
#lc-filter-overlay,
#lc-save-search {
display: none
}
#lc-save-search-desktop {
display: flex !important
}
#contentArea {
padding: 120px 0;
margin: auto;
max-width: calc(1440px + 5rem)
}
#dropdownButton span,
#filterButton span,
#searchInput {
font-size: 1.3rem
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a {
font-size: clamp(17px, 1.17vw, 18px)
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: clamp(19px, 1.25vw, 21px)
}
.mc-cat,
.mc-loc-data,
.mc-post-date {
font-size: 14px
}
.mc-loc-data {
flex-direction: row-reverse;
align-items: center;
justify-content: flex-end;
gap: 8px;
margin-bottom: -4px
}
}
@media (max-width:1599px) and (min-width:1221px) {
#lc-filter-overlay,
#lc-save-search {
display: none
}
#lc-save-search-desktop {
display: flex !important
}
.anim-flip {
scale: .9;
margin-top: -4px
}
#searchInput {
width: 640px;
height: 50px;
font-size: 1.2rem
}
#dropdownButton,
#filterButton {
height: 50px;
gap: 6px;
padding: 0 18px
}
#dropdownButton span,
#filterButton span {
font-size: 1.2rem;
margin-bottom: 3px
}
#dropdownButton svg,
#filterButton svg {
width: 25px;
height: 25px
}
#contentArea {
max-width: 95%;
padding: 100px 0;
margin: auto
}
.mc-main {
gap: 4px
}
.mc-image {
max-width: 210px
}
.mc-loc-data {
flex-direction: row-reverse;
justify-content: flex-end;
gap: 8px
}
.mc-loc-data,
.mc-loc-data>span {
align-items: center
}
.mc-postal-code>svg {
margin-top: -7px
}
.footer-center nav a {
font-size: 16px;
margin: 0 8px
}
.footer-bottom {
font-size: 14px
}
.apps img {
height: 42px
}
.card-inner {
padding: 0
}
.secondary-cards {
display: flex;
flex-direction: column;
gap: 8px;
/* ✅ RIGHT column ko left jaisa narrow karo */
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
flex: 0 0 240px !important;
/* ✅ overflow cut (image/card bahar na niklay) */
overflow: hidden;
box-sizing: border-box;
}
/* ✅ Right column ke andar jo bhi card aye (main-card ya secondary-card) usko 100% pe lock karo */
.secondary-cards .main-card,
.secondary-cards .secondary-card {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
}
/* ✅ Right column ke andar image wrapper ko bhi 100% force karo */
.secondary-cards .mc-image {
max-width: 100% !important;
width: 100% !important;
}
.ad-970 {
width: 100%;
max-width: 970px
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a {
font-size: clamp(16px, 1.3vw, 17px)
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: clamp(18px, 1.43vw, 20px)
}
.mc-tags {
gap: 4px
}
.mc-tag {
gap: 2px;
font-size: 11px
}
}
@media (max-width:1290px) {
.mc-title {
font-size: 1.1rem
}
.lcc-left,
.lcc-right {
gap: 6px
}
.qfc-loc-input {
width: 230px
}
.mc-main {
padding: 10px
}
}
@media (max-width:1220px) and (min-width:850px) {
.listing-wrapper {
max-width: 830px;
margin: auto
}
}
@media (max-width:1220px) and (min-width:769px) {
#searchInput {
width: 450px;
font-size: medium;
height: 50px;
padding-bottom: 2px;
font-size: 18px
}
#dropdownButton,
#filterButton {
height: 50px;
gap: 8px;
padding: 0 15px
}
#dropdownButton span,
#filterButton span {
font-size: 1.1rem;
margin-bottom: 2px
}
#dropdownButton svg,
#filterButton svg {
width: 28px;
height: 28px
}
.anim-flip>div>div {
font-size: 14px
}
.filter-controls {
margin: 10px;
width: auto
}
#contentArea {
padding: 6px
}
#cardsContainer {
flex-direction: column-reverse;
gap: 16px;
margin-top: 10px;
margin-bottom: 24px
}
.main-card {
flex-direction: row;
max-width: 850px;
margin: auto
}
.quick-filters-container {
display: none
}
.mc-image {
flex: 1 1;
max-width: 285px;
height: auto
}
.mc-body {
flex: 1 1
}
.top-secondary-cards {
display: flex !important;
flex-direction: column !important
}
.top-secondary-cards.grid {
flex-direction: row !important
}
.secondary-cards {
display: none
}
.secondary-card {
flex-direction: row;
width: 100%;
height: 250px
}
.top-secondary-cards.grid .secondary-card {
flex-direction: column;
width: 200px;
height: 100%
}
.sc-image {
width: 285px;
height: 100%
}
.top-secondary-cards.grid .sc-image {
width: 100%;
height: 150px
}
.sc-body {
width: 100%;
height: 100%;
justify-content: space-between
}
.sc-title {
margin-top: 5px
}
.top-secondary-cards.grid .sc-title {
margin-top: 0;
font-size: .95rem
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: 16px
}
.footer-center nav a {
font-size: 15px;
margin: 0 6px
}
.footer-bottom {
font-size: 13px
}
.ad-970 {
width: 95%;
max-width: 970px
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a {
font-size: clamp(14px, 2vw, 16px)
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: clamp(17px, 2.2vw, 20px)
}
.mc-title {
font-size: 20px
}
.mc-main {
gap: 3px
}
.top-secondary-cards.grid .star-rating {
display: none
}
.top-secondary-cards.grid .mc-price {
zoom: .75
}
.top-secondary-cards.grid .sc-body-container {
zoom: .9
}
}
@media (max-width:769px) and (min-width:481px) {
.top-secondary-cards {
display: flex !important;
flex-direction: row !important;
width: 100%;
align-items: center;
flex-wrap: wrap
}
.item-like {
zoom: .78
}
.secondary-cards {
display: none
}
.secondary-card {
flex-direction: column;
width: 49%;
margin: 0;
height: 100%
}
.sc-image {
width: 100%;
height: 210px
}
.sc-body {
width: 100%;
height: 100%;
justify-content: space-between
}
.sc-title {
margin-top: 5px
}
#searchInput {
font-size: .9rem;
width: 100%;
height: 44px;
font-size: 18px
}
#dropdownButton span,
#filterButton span {
display: none
}
#searchBtnContainer {
margin-bottom: 0
}
#phoneNavBar {
display: flex
}
#dropdownButton,
#filterButton {
height: 46px;
gap: 20px;
padding: 0 20px
}
#dropdownButton svg,
#filterButton svg {
width: 26px;
height: 26px
}
#contentArea {
padding: 6px
}
#cardsContainer {
flex-direction: column-reverse
}
.quick-filters-container {
display: none
}
.main-card {
flex-direction: column;
max-width: 49%;
margin: 0
}
.mc-title-container {
width: 100%;
margin: 0
}
.star-rating {
scale: 1;
margin-right: -6px
}
.listing-wrapper {
align-items: center
}
.listing-control {
width: 100%
}
.lc-controls,
.lcc-left,
.lcc-right {
gap: 5px
}
.main-cards {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px
}
.mc-tag {
min-width: 0;
font-size: 10px;
padding: 2px 5px
}
.mc-tag svg {
height: 13px
}
.mc-tags {
gap: 4px
}
.mc-image,
.sc-image {
position: relative;
width: 100%;
max-width: 100%;
min-height: 0;
height: 32vw;
flex: none
}
.mc-body {
flex: 1 1
}
footer {
margin-bottom: 50px
}
.footer-copyright {
font-size: 10px
}
.footer-center nav a {
font-size: 13px
}
.footer-bottom {
font-size: 12px;
gap: 12px
}
.apps img {
height: 32px
}
.custom-select {
width: 140px
}
.mc-tag {
min-width: 90px
}
.mc-title {
font-size: 1rem
}
.links-footer-bottom svg {
height: 22px
}
.ad-970 {
width: 95%
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a {
font-size: clamp(12px, 2.5vw, 16px)
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
font-size: clamp(15px, 2.7vw, 19px)
}
}
@media (max-width:480px) {
.qfc-loc-dropdown {
margin-top: 34px
}
#lcc-right-more {
display: block !important
}
.filters-toggle-btn,
.filters-toggle-btn>span,
.more-dropdown-wrapper,
.sort-toggle-btn>span {
display: none !important
}
.main-cards {
flex-direction: column
}
.main-card,
.secondary-card {
max-width: none !important
}
.lcc-left,
.lcc-right {
gap: 3px
}
.listing-wrapper {
padding: 0 5vw
}
.mc-image,
.sc-image {
min-height: 0;
height: 65vw
}
.top-secondary-cards {
display: flex !important;
flex-direction: column !important;
width: 100%;
align-items: center;
flex-wrap: wrap
}
.secondary-cards {
display: none
}
.secondary-card {
flex-direction: column;
width: 100%;
height: 100%
}
.sc-body,
.sc-image {
width: 100%
}
.sc-body {
height: 100%;
justify-content: space-between
}
.sc-title {
margin-top: 5px
}
.quick-filters-container {
display: none
}
#searchInput {
height: 40px;
font-size: 15px;
width: 100%;
padding: 0 5px
}
#dropdownButton span,
#filterButton span {
display: none
}
#dropdownButton svg,
#filterButton svg {
width: 18px
}
#dropdownButton {
padding: 0 8px 0 12px;
height: 40px
}
#dropdownButton svg {
scale: 1.2
}
#filterButton {
padding: 0 12px 0 8px;
height: 40px
}
.box-card {
width: clamp(75px, 25vw, 999px);
height: clamp(70px, 25vw, 100px);
min-width: clamp(75px, 25vw, 999px);
min-height: clamp(70px, 25vw, 100px);
aspect-ratio: auto;
animation: slide-up 1s ease-out;
z-index: 5;
position: relative;
scroll-snap-align: start;
padding: 1px 5px
}
.box-card img {
width: 24px
}
.card-inner {
display: none
}
#searchBtnContainer>button>svg {
width: 1.1rem;
aspect-ratio: 1/1
}
#searchBtnContainer>button>span {
font-weight: 700;
font-size: 1rem
}
#searchBtnContainer>button {
padding: .4rem 1.3rem .5rem 1rem;
margin-top: .8rem;
margin-bottom: 1.4rem;
scale: 1
}
#phoneNavBar {
display: flex
}
#phoneNavBar ul li a span {
font-size: 10px
}
#searchBtnContainer {
margin-bottom: .9rem
}
#categoriesDropdown {
margin-top: -2px
}
#contentArea {
padding: 6px
}
#cardsContainer {
flex-direction: column-reverse
}
.item-like {
padding: 8px;
zoom: .8
}
.item-like svg {
width: 24px;
height: auto;
transition: stroke .2s
}
.footer-center nav a {
font-size: 13px
}
.footer-bottom {
font-size: 12px;
gap: 12px
}
.apps img {
height: 32px
}
.custom-select {
width: 140px
}
.mc-tag {
min-width: 0;
font-size: 10px;
padding: 2px 5px
}
.mc-tag svg {
height: 13px
}
.mc-tags {
gap: 4px
}
footer {
margin-bottom: 50px
}
#categoriesDropdown {
display: none
}
#filterButton {
border-bottom-right-radius: 20px
}
.ad-970 {
width: 95%
}
.footer-contact p,
.footer-links a,
.footer-logo p,
.footer-services a,
.mc-cat,
.mc-loc-data,
.mc-post-date {
font-size: 12px
}
.footer-contact h4,
.footer-links h4,
.footer-services h4,
.mc-title {
font-size: clamp(16px, 4.4vw, 18px)
}
.msc-ic-search>img {
height: min(5vw, 22px)
}
}
@media (min-width:361px) and (max-width:400px) {
.lc-controls {
zoom: .915
}
}
@media (max-width:360px) {
.sort-dropdown-wrapper {
display: none !important
}
.more-dropdown-wrapper {
display: inline-block !important
}
}
@media (min-width:411px) and (max-width:530px) {
.sort-dropdown-wrapper,
.viewmode-toggle-wrapper {
display: inline-block !important
}
.sort-toggle-btn>span {
display: none !important
}
.main-cards {
flex-direction: row !important;
flex-wrap: wrap
}
.main-card {
width: 49% !important
}
.mc-title {
font-size: .818rem
}
.mc-tag {
min-width: 0;
border-color: transparent
}
.mc-tag svg {
height: 16px
}
.mc-bottom {
padding: 8px 12px
}
.mc-price {
font-size: 13px
}
.listing-wrapper {
padding: 0 5vw
}
.listing-control {
margin-bottom: 6px
}
.mc-image,
.sc-image {
min-height: 0;
height: 30vw
}
.mc-cat,
.mc-loc-data,
.mc-post-date {
font-size: 12px
}
.filters-toggle-btn>span,
.mc-postal-code,
.sort-toggle-btn>span,
.tag-text {
display: none
}
.secondary-cards {
flex-direction: row !important;
gap: 0
}
.secondary-card {
width: 49%
}
.listing-wrapper,
.main-cards {
gap: 2px;
padding: 0
}
}
@media (min-width:770px) {
#sidebarContent {
max-width: 500px !important
}
#categoriesDropdown {
display: flex
}
}
@media (max-width:769px) {
#categoriesDropdown {
display: none !important
}
}
@media (max-width:659px) {
#categoryBack {
display: none !important
}
}
@keyframes dropdownIn {
0% {
opacity: 0;
transform: scale(.98)
}
to {
opacity: 1;
transform: scale(1)
}
}
@keyframes dropdownOut {
0% {
opacity: 1;
transform: scale(1)
}
to {
opacity: 0;
transform: scale(.98)
}
}
@keyframes itemIn {
0% {
opacity: 0;
transform: translateY(4px)
}
to {
opacity: 1;
transform: translateY(0)
}
}
@keyframes jsShimmer {
0% {
background-position: -200% 0
}
to {
background-position: 200% 0
}
}
@media (min-width:1221px) {
.filters-toggle-btn {
display: none !important
}
}
/* ✅ 1221px - 1599px: left filters + right secondary cards narrower */
@media (min-width: 1221px) and (max-width: 1599px) {
/* Left */
.qfc-location-box,
.qfc-filters {
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
}
/* Right */
.secondary-cards {
width: 240px !important;
max-width: 240px !important;
}
}
@media (max-width:480px) {
.card-skeleton,
.main-card {
flex-direction: column;
max-width: 300px
}
.lcc-left {
width: 90%;
margin-right: 6px
}
}
@media (max-width:1220px) {
.quick-filters-container {
display: none !important
}
}
@keyframes shimmer {
0% {
background-position: -200% 0
}
to {
background-position: 200% 0
}
}
@media (max-width:360px) {
.viewmode-toggle-wrapper {
display: none !important
}
}
@media (max-width:305px) {
.mc-bottom {
flex-direction: column
}
.mc-tags,
.star-rating {
display: none
}
.mc-bottom {
align-items: flex-start
}
.mc-price>span {
font-size: 15px
}
#searchInput {
font-size: 13px
}
#searchInput::placeholder {
width: calc(100% - 50px)
}
.msc-ic-search>img {
height: 16px
}
.mc-title,
.sc-title {
font-size: 14px
}
.lcc-left {
width: 90%
}
.lcc-left,
.lcc-right {
zoom: .86
}
.item-like {
zoom: .8
}
}
@media (max-width:265px) {
#lcc-right-more {
height: 24px;
width: auto
}
.lcc-left {
width: 90%;
zoom: .7
}
.qfc-loc-input {
width: 100%
}
.listing-wrapper {
padding: 0 4px
}
.lc-controls {
padding: 4px
}
.item-like {
zoom: .68
}
}
@media (max-width:550px) {
.ad-badges {
flex-direction: row;
gap: 4px
}
#searchBtnContainer {
zoom: .85
}
}
@media (max-width:510px) {
.ad-badges {
top: auto;
left: auto;
bottom: 0;
right: 0;
zoom: .8
}
#searchBtnContainer {
zoom: .8
}
}
@media (max-width:360px) {
.ad-badges {
bottom: auto;
right: auto;
top: 0;
left: 0;
flex-direction: column;
zoom: .85
}
#lc-save-search {
right: 10px;
zoom: .9
}
#lc-filter-overlay {
left: 10px;
zoom: .9
}
#searchBtnContainer {
zoom: .74
}
}
@media (max-width:250px) {
.ad-badges {
bottom: 0;
right: 0;
top: auto;
left: auto;
flex-direction: row;
zoom: .85
}
#phoneNavBar>ul {
zoom: .9
}
#searchBtnContainer {
zoom: .65
}
}
.main-cards.grid {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 20px 8px
}
.main-cards.grid .main-card {
flex-direction: column;
max-width: 24.4%
}
.main-cards.grid .mc-cat,
.main-cards.grid .mc-loc-data,
.main-cards.grid .mc-post-date {
font-size: 12px
}
.main-cards.grid .mc-tags {
display: none
}
.main-cards.grid .mc-title {
font-size: 1rem;
text-wrap-mode: nowrap;
overflow: hidden
}
.main-cards.grid .mc-title-container {
width: auto;
margin: 0
}
.main-cards.grid .mc-main {
padding: 6px 14px
}
.main-cards.grid .mc-postal-code {
display: none
}
.main-cards.grid .mc-price {
zoom: .8
}
.main-cards.grid .mc-image {
max-width: none
}
@media (max-width:1919px) {
.main-cards.grid .main-card {
max-width: 32%
}
}
@media (max-width:1600px) {
.main-cards.grid {
zoom: .9
}
}
@media (max-width:1440px) {
.main-cards.grid {
zoom: .8
}
}
@media (max-width:1280px) {
.main-cards.grid .main-card {
max-width: 49%
}
}
@media (max-width:1220px) {
.main-cards.grid .main-card {
max-width: 24%
}
}
@media (max-width:720px) {
.main-cards.grid .main-card {
max-width: 32.3%
}
}
@media (min-width:246px) and (max-width:410px) {
.main-cards.grid {
zoom: .68
}
.main-cards.grid .main-card {
max-width: 48.8% !important
}
.main-cards.grid .mc-image {
min-height: 0;
height: 160px
}
}
@media (max-width:245px) {
.main-cards.grid {
zoom: 1
}
.main-cards.grid .main-card {
max-width: none
}
}
@media (max-width: 1440px) and (min-width: 1221px) {
#cardsContainer {
margin: 0 10px !important;
}
}
/* ✅ FIX: 1440px–1599px me left narrow hone ke baad right overflow na ho */
@media (min-width: 1440px) and (max-width: 1599px) {
/* main 3-column wrapper ko expand karo */
html body #cardsContainer{
max-width: calc(100% - 20px) !important;
width: calc(100% - 20px) !important;
margin-left: 10px !important;
margin-right: 10px !important;
box-sizing: border-box !important;
}
/* center list ko shrink allow karo (overflow avoid) */
html body #cardsContainer .main-cards{
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* right column ko hard width de do (left jaisa) */
html body #cardsContainer .secondary-cards{
width: 240px !important;
min-width: 240px !important;
max-width: 240px !important;
flex: 0 0 240px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* right column ke cards ko 100% pe lock */
html body #cardsContainer .secondary-cards .secondary-card,
html body #cardsContainer .secondary-cards .main-card{
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* right column ki image bhi overflow na kare */
html body #cardsContainer .secondary-cards .mc-image{
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 480px) {
.main-cards.view-small-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
gap: 10px !important;
}
.main-cards.view-small-grid .main-card {
width: 48% !important;
max-width: 48% !important;
margin: 0 !important;
flex: 0 0 48% !important;
}
.main-cards.view-small-grid .mc-image {
height: 35vw !important;
max-width: 100% !important;
}
.main-cards.view-grid {
display: flex !important;
flex-direction: column !important;
}
.main-cards.view-grid .main-card {
width: 100% !important;
max-width: 100% !important;
margin: 0 0 20px 0 !important;
flex: 0 0 100% !important;
}
.main-cards.view-grid .mc-image {
height: 65vw !important;
max-width: 100% !important;
}
}
.cat-sidebar-container{position:fixed;top:0;left:0;bottom:0;right:0;z-index:30;background-color:transparent;transform:translateX(0);transition:transform .5s ease;will-change:transform}.cat-sidebar-container.hidden-left{transform:translateX(-100%)}.cat-sidebar{width:100%;height:100%;background-color:var(--background-color);border-right:2px solid var(--secondary-dark);display:flex;flex-direction:column;gap:0;animation:none}.catside-head{background-color:var(--secondary-dark);color:#fff;display:flex;padding:10px 14px;align-items:center;justify-content:space-between}.catside-title{font-size:1.35rem}.catside-close{border:none;background:0 0;padding:0;margin:0;color:#fff}.catside-close svg{width:26px;height:auto}.catside-body{flex-direction:row;flex-wrap:wrap;gap:12px;padding:28px 24px 80px;font-size:.875rem;line-height:1.25rem;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.cat-card,.catside-body{display:flex;justify-content:center}.cat-card{align-items:center;flex:1 1 100px;gap:12px;height:120px;border:3px solid transparent;border-radius:20px;background-color:var(--teal-light);box-shadow:-1px 3px 8px #000;flex-direction:column;gap:8px;min-width:155px;max-width:155px;cursor:pointer}.cat-card.selected{border-color:var(--secondary-dark)}ul .cat-card{flex:1 1 150px;max-width:200px}.cat-card img{height:24px;width:auto}.cat-card span{font-size:18px;font-weight:500}.cat-card .card-inner{padding:0;margin-top:-4px}.sub-cats-container{display:flex;flex-direction:column;background-color:var(--teal-light);border-radius:20px;padding:12px 10px;gap:12px;min-width:100%;border:3px solid var(--secondary-dark);transition:none!important}.cat-row{display:flex;gap:12px;background-color:hsla(0,0%,100%,0);padding:10px;border-radius:10px;cursor:pointer}.cat-row:hover{background-color:hsla(0,0%,100%,.2)}.cat-row span{display:flex;align-items:center;justify-content:start;font-size:18px;width:100%}.catside-body *{user-select:none}.catside-body .cat-card img{height:36px}@media (max-width:341px){.cat-card{min-width:50px!important;height:110px!important}.cat-card span{font-size:12px;font-weight:700}}@media (min-width:770px){.cat-sidebar-container{display:block;max-width:375px!important}}
.qfc-location-box {
width: 300px;
max-width: 300px;
min-width: 300px;
background-color: #fff;
padding: 0 0 10px;
border: 2px solid #ddd;
border-radius: 18px;
display: flex;
flex-direction: column;
gap: 6px
}
#fc-loc-data {
border: none;
width: 100%;
height: 100%;
padding: 6px 24px;
background-color: #f9f9f9;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, .4666666666666667);
text-align: center;
font-size: medium;
cursor: pointer;
outline: 0
}
.qfc-loc-title {
background-color: var(--secondary-dark);
color: #fff;
padding: 6px 0;
margin-bottom: 6px;
text-align: center
}
.fc-loc-icon {
left: 0
}
.fc-loc-icon,
.qfc-loc-dd-trigger {
color: #6f6f6f;
transition: all .3s ease
}
.qfc-loc-dd-trigger {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px
}
.qfc-loc-dd-trigger:hover {
color: var(--secondary-dark)
}
.qfc-loc-dd-trigger svg {
width: 22px;
height: 22px
}
.qfc-loc-dropdown {
position: absolute;
top: 0;
z-index: 1;
background: #f9f9f9;
width: 100%;
padding: 10px;
margin-top: 39px;
border: 1px solid rgba(0, 0, 0, .4666666666666667);
border-radius: 0 0 16px 16px;
opacity: 0;
transform: translateY(20px);
pointer-events: none;
display: none
}
.qfc-loc-suggestions {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #ddd
}
.qfc-loc-suggest-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 8px;
cursor: pointer;
transition: all .2s ease;
font-size: 14px;
color: #333
}
.qfc-loc-suggest-item:hover {
background: #f0f9f8;
border-color: var(--secondary-dark);
color: var(--secondary-dark);
transform: translateX(3px)
}
.qfc-loc-suggest-item:active {
transform: translateX(3px) scale(.98)
}
.qfc-loc-suggest-item svg {
flex-shrink: 0;
color: var(--secondary-dark);
opacity: .8;
transition: opacity .2s ease
}
.qfc-loc-suggest-item:hover svg {
opacity: 1
}
.qfc-loc-suggest-item span {
flex: 1;
font-weight: 500
}
.quick-filters-container {
background: transparent
}
.qfc-filters-wrapper,
.quick-filters-container {
display: flex;
flex-direction: column;
gap: 10px
}
.qfc-filters {
width: 300px;
max-width: 300px;
min-width: 300px;
background-color: #fff;
padding: 0 0 10px;
border: 2px solid #ddd;
border-radius: 18px;
flex-direction: column;
gap: 6px;
overflow: hidden
}
.qfc-filter-row,
.qfc-filters {
display: flex;
transition: none !important
}
.qfc-filter-row {
flex-direction: row;
gap: 4px;
align-items: center;
justify-content: space-between;
font-size: 15px
}
.qfc-filter-row.qfc-row-title {
justify-content: center;
font-size: 19px;
background-color: var(--secondary-dark);
padding: 5px 0;
margin: -1px;
border-radius: 18px 18px 0 0;
text-transform: capitalize;
color: #fff;
transition: none !important;
min-height: 47px
}
.qfc-filter-row.pl {
padding-left: 14px;
transition: none !important
}
.qfc-filter-row.pl .clickable-text {
width: 100%;
transition: none !important
}
.active-category-bg {
border: 3px solid rgba(0, 0, 0, .4);
box-sizing: border-box
}
.qfc-filter-col {
display: flex;
flex-direction: column;
gap: 8px;
align-items: center;
justify-content: center;
font-size: 15px;
padding: 0 14px;
transition: none !important
}
.qfc-filter-input {
background-color: #fff;
color: var(--secondary-dark);
border: 2px solid var(--secondary-dark);
border-radius: 10px;
margin: 0 14px;
padding: 5px 10px;
outline: none
}
.qfc-riw {
flex-grow: 1;
gap: -1px
}
.range-group.qfc-rg {
width: 100% !important;
gap: 5px;
padding: 0 10px !important;
flex-direction: column
}
.qfc-row-title {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0
}
.qfc-row-title .arrow {
transition: transform .3s ease;
font-size: .9em;
color: #aaa;
margin-left: 6px
}
.qfc-row-title.expanded .arrow {
transform: rotate(180deg);
color: #8b5cf6
}
.qfc-filter-select {
margin: 0 10px;
padding: 6px 8px;
background-color: #fff;
border: 2px solid var(--secondary-dark);
outline: none;
border-radius: .5rem
}
.range-input.price-max,
.range-input.price-min {
padding: 0;
text-align: center;
outline: none
}
.qfc-unit-label {
padding: 0 .7rem
}
.qfc-riw>input {
height: 33px !important;
font-size: 14px !important
}
.qfc-selected-text {
text-align: left;
font-size: 13px;
font-weight: 600;
color: var(--secondary-dark);
letter-spacing: .5px;
margin-top: 8px;
margin-bottom: 4px;
padding: 0 14px
}
.qfc-selected-list {
display: flex;
flex-direction: column;
gap: 0;
padding: 0 10px;
min-height: 50px
}
.qfc-empty-state {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 10px;
color: #999;
font-size: 14px;
font-style: italic;
text-align: center
}
.qfc-selected-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 8px;
border-bottom: 1px solid #e0e0e0;
transition: background-color .2s ease
}
.qfc-selected-item.location-item {
background-color: #f0f7ff;
border-left: 3px solid var(--secondary-dark);
cursor: default
}
.qfc-selected-item.location-item .qfc-selected-label {
font-weight: 600;
color: var(--secondary-dark);
display: flex;
align-items: center;
gap: 8px
}
.qfc-selected-item.location-item .qfc-selected-label:before {
content: none
}
.qfc-selected-item:last-child {
border-bottom: none
}
.qfc-selected-item:hover {
background-color: #f8f8f8
}
.qfc-selected-label {
color: var(--secondary-dark);
font-size: 14px;
flex-grow: 1
}
.qfc-remove-btn {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
color: #999;
transition: color .2s ease, transform .2s ease
}
.qfc-remove-btn:hover {
color: #dc3545;
transform: scale(1.1)
}
.qfc-remove-btn svg {
display: block
}
.qfc-actions {
display: flex;
justify-content: flex-end;
padding: 8px 14px 0
}
.qfc-delete-all {
background: none;
border: none;
color: var(--secondary-dark);
font-size: 14px;
font-weight: 500;
cursor: pointer;
padding: 6px 12px;
transition: color .2s ease, text-decoration .2s ease
}
.qfc-delete-all:hover {
color: #dc3545;
text-decoration: underline
}
.sort-dropdown-wrapper {
position: relative;
display: inline-block
}
.sort-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
min-width: 190px;
z-index: 1000;
overflow: hidden;
color: #000
}
.sort-option {
display: flex;
align-items: center;
gap: 2px;
padding: 8px 16px;
cursor: pointer;
transition: background-color .2s ease;
user-select: none;
opacity: 0;
transform: translateX(-20px)
}
.sort-option:hover {
background-color: #f5f5f5
}
.sort-option .sort-check-icon {
flex-shrink: 0;
opacity: 0;
transition: opacity .2s ease;
border: none
}
.sort-option.active .sort-check-icon {
opacity: 1
}
.sort-option span {
font-size: 14px;
color: #000;
font-weight: 500;
text-align: right;
flex-grow: 1
}
.sort-option.active span {
color: #000;
font-weight: 600
}
.viewmode-toggle-wrapper {
display: inline-block
}
.viewmode-toggle-btn,
.viewmode-toggle-wrapper {
position: relative;
height: 100%
}
.viewmode-toggle-btn .viewmode-icon {
flex-shrink: 0;
transition: opacity .3s ease, transform .3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.viewmode-toggle-btn .viewmode-icon:not(.active) {
opacity: 0;
pointer-events: none
}
.viewmode-toggle-btn .viewmode-icon.active {
opacity: 1
}
.qfc-suggest {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 1000;
background: #fff;
color: #000;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 10px;
box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
overflow: hidden
}
.qfc-suggest.hidden {
display: none
}
.qfc-suggest-list {
max-height: 320px;
overflow-y: auto
}
.qfc-suggest-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
user-select: none
}
.qfc-suggest-item:hover {
background: #e5e5e5
}
.qfc-suggest-title {
line-height: 1.2
}
.qfc-suggest-type {
font-size: .72rem;
padding: 4px 8px;
line-height: 1;
border-radius: 9999px;
border: 1px solid rgba(2, 6, 23, .12);
color: #0f172a;
background: #fff;
white-space: nowrap
}
.qfc-suggest-empty {
padding: 14px;
color: #555;
font-size: 14px
}
.qfc-skeleton-item {
padding: 12px 14px
}
.qfc-skel-line {
height: 14px;
width: 60%;
border-radius: 6px
}
.qfc-skel-line,
.qfc-skel-sub {
background: #eee;
position: relative;
overflow: hidden
}
.qfc-skel-sub {
margin-top: 8px;
height: 10px;
width: 90px;
border-radius: 9999px
}
.qfc-skel-line:after,
.qfc-skel-sub:after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, .8) 50%, hsla(0, 0%, 100%, 0));
animation: qfc-shimmer 1.2s linear infinite
}
@keyframes qfc-shimmer {
0% {
left: -100%
}
to {
left: 100%
}
}
.more-dropdown-wrapper {
position: relative;
display: inline-block
}
.more-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
min-width: 190px;
z-index: 1000;
overflow: hidden;
color: #000
}
.more-toggle-btn {
height: 100%;
position: relative;
aspect-ratio: unset !important;
padding: 4px !important
}
.sort-by-header {
padding: 8px 16px;
font-size: 14px;
font-weight: 600;
color: #000;
border-bottom: 1px solid #e0e0e0;
opacity: 0;
transform: translateX(-20px);
transition: opacity .2s ease, transform .2s ease
}
@media (min-width:481px) {
.more-dropdown-wrapper {
display: none
}
}
.dropdown-header {
font-size: 14px;
font-weight: 600;
color: #000;
border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
transition: opacity .2s ease, transform .2s ease
}
.dropdown-header,
.dropdown-option {
padding: 8px 16px;
opacity: 0;
transform: translateX(-20px)
}
.dropdown-option {
display: flex;
align-items: center;
gap: 2px;
cursor: pointer;
transition: background-color .2s ease;
user-select: none
}
.dropdown-option:hover {
background-color: #f5f5f5
}
.dropdown-option .sort-check-icon {
flex-shrink: 0;
opacity: 0;
transition: opacity .2s ease;
border: none
}
.dropdown-option.active .sort-check-icon {
opacity: 1
}
.dropdown-option span {
font-size: 14px;
color: #000;
font-weight: 500;
text-align: right;
flex-grow: 1
}
footer {
color: var(--text-light);
background: var(--teal);
margin-top: 0;
}
.footer-links-contact-container {
display: flex;
flex-wrap: nowrap;
gap: 100px;
padding-right: 10px;
}
.footer-top {
background: var(--teal);
padding: 40px 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 19px;
}
.footer-logo {
max-width: 400px;
}
.footer-logo .brand {
display: flex;
align-items: center;
margin-bottom: 8px;
}
#logo-def {
height: 60px;
margin-right: 8px;
}
#logo-sm {
height: 38px;
margin-top: -10px;
}
.footer-logo p {
font-size: 17px;
color: var(--text-muted);
text-align: justify;
}
.social-icons {
margin-top: 18px;
margin-left: 8px;
display: flex;
gap: 8px;
}
.social-icons a {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
text-decoration: none;
padding: 10px;
border: 2px solid var(--text-muted);
border-radius: 50%;
transition: background 0.3s ease, color 0.3s ease;
}
.social-icons a:hover {
background-color: var(--text-muted);
}
.social-icons a:hover svg path {
fill: var(--teal);
}
.social-icons svg {
height: 20px;
width: auto;
}
.footer-contact h4,
.footer-links h4,
.footer-services h4 {
margin-bottom: 15px;
font-size: 20px;
font-weight: 700;
}
.footer-links ul li,
.footer-services ul li {
margin-bottom: 10px;
}
.footer-links a,
.footer-services a {
color: var(--text-muted);
text-decoration: none;
font-size: 17px;
transition: color 0.3s ease;
border: none;
outline: none;
}
.footer-links a:hover,
.footer-services a:hover {
color: var(--highlight);
text-decoration: none;
}
.footer-links a:focus,
.footer-services a:focus,
.footer-links a:active,
.footer-services a:active {
text-decoration: none;
outline: none;
border: none;
}
.footer-contact p {
font-size: 17px;
margin-bottom: 3px;
}
.footer-contact strong {
display: inline-block;
width: 50px;
}
.footer-center {
background: var(--teal-light);
padding: 15px 20px;
text-align: center;
}
.footer-center nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 8px;
}
.footer-center nav a {
color: var(--text-muted);
text-decoration: none;
font-size: 15px;
transition: color 0.3s ease;
border: none;
outline: none;
}
.footer-center nav a:hover {
color: var(--highlight);
text-decoration: none;
}
.footer-center nav a:focus,
.footer-center nav a:active {
text-decoration: none;
outline: none;
border: none;
}
.footer-bottom {
background: var(--secondary-dark);
padding: 15px 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
font-size: 13px;
text-align: center;
}
.footer-section {
flex: 1 1 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
}
.links-footer-bottom {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.links-footer-bottom svg {
height: 28px;
width: auto;
}
.apps {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
}
.apps img {
height: 40px;
width: auto;
}
.country {
display: flex;
align-items: center;
gap: 10px;
}
.custom-select {
position: relative;
width: 200px;
}
.custom-select select {
display: none; /* Hide the real select */
}
.custom-select-trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 36px 6px 12px;
background-color: var(--text-light);
color: var(--dark-gray);
font-size: 14px;
cursor: pointer;
border: none;
height: 36px;
position: relative;
user-select: none;
}
.custom-select-trigger::after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 36px;
height: 100%;
background: var(--gray-bg);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: center;
background-size: 20px 20px;
}
.custom-select-trigger.active::after {
background-image: url('data:image/svg+xml;utf8,');
}
.custom-select-trigger .flag-icon {
font-size: 18px;
line-height: 1;
}
.custom-options {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: var(--text-light);
border: 1px solid var(--gray-bg);
max-height: 200px;
overflow-y: auto;
z-index: 1000;
display: none;
margin-bottom: 2px;
}
.custom-options.active {
display: block;
}
.custom-option {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
cursor: pointer;
color: var(--dark-gray);
font-size: 14px;
transition: background-color 0.2s ease;
}
.custom-option:hover {
background-color: var(--gray-bg);
color: var(--text-light);
}
.custom-option.selected {
background-color: var(--teal-light);
color: var(--text-light);
}
.custom-option .flag-icon {
font-size: 18px;
line-height: 1;
}
.footer-copyright {
color: var(--text-copyright);
font-size: 12px;
}
@media (min-width: 1920px) and (max-width: 2000px) {
.footer-top {
padding: 50px 0px;
gap: 28px;
max-width: calc(1560px + 2rem);
margin: auto;
}
}
@media (max-width: 1919px) {
.footer-top {
padding: 38px 0;
max-width: calc(1440px + 2rem);
margin: auto;
}
}
@media (max-width: 1550px) {
.footer-top {
max-width: 1350px;
}
}
@media (max-width: 1770px) {
.footer-links-contact-container {
gap: 80px;
padding-right: 14px;
}
.footer-contact h4, .footer-links h4, .footer-services h4 {
font-size: 19px;
}
.footer-links a, .footer-services a, .footer-contact p {
font-size: 16px;
}
}
@media (max-width: 1440px) {
.footer-links-contact-container {
gap: 65px;
}
.footer-top {
padding: 40px 30px;
}
}
@media (max-width: 1220px) {
.footer-links-contact-container {
gap: 55px;
}
.footer-contact h4, .footer-links h4, .footer-services h4 {
margin-bottom: 10px;
font-size: 18px;
}
.footer-links a, .footer-services a, .footer-contact p, .footer-logo p {
font-size: 15px;
}
.footer-top {
padding: 36px 20px;
}
}
@media (max-width: 1111px) {
.footer-links-contact-container {
gap: 40px;
padding-right: 0;
}
}
@media (max-width: 1046px) {
.footer-links-contact-container {
gap: 27px;
}
.footer-links a, .footer-services a, .footer-contact p {
font-size: 14.5px;
}
}
@media (max-width: 1000px) {
.footer-top {
flex-direction: column;
gap: 25px;
}
.footer-logo p {
font-size: 17px;
}
.footer-logo {
max-width: 700px;
}
#logo-def {
height: 68px;
width: auto;
}
.footer-links-contact-container {
align-items: baseline;
justify-content: space-between;
gap: 0;
width: 700px;
}
.footer-contact h4, .footer-links h4, .footer-services h4 {
font-size: 19px;
}
.footer-links a, .footer-services a, .footer-contact p {
font-size: 15.5px;
}
}
@media (min-width: 790px) and (max-width: 920px) {
.links-footer-bottom {
gap: 8px;
}
.links-footer-bottom svg {
height: 24px;
}
}
@media (max-width: 888px) {
.footer-logo, .footer-links-contact-container {
max-width: 650px;
}
#logo-def {
height: 57px;
width: auto;
}
.footer-logo p {
font-size: 14px;
}
.footer-links a, .footer-services a, .footer-contact p, .footer-center nav a {
font-size: 13px;
}
.footer-links ul li, .footer-services ul li {
margin-bottom: 0;
}
.footer-center {
padding: 12px 6px;
}
#geoDataDetails {
display: none;
}
.footer-center nav {
gap: 3px;
}
}
@media (max-width: 769px) {
.footer-top {
padding: 24px 12px;
gap: 16px;
}
}
@media (max-width: 789px) {
.footer-bottom {
flex-direction: column-reverse;
align-items: center;
gap: 24px;
}
.footer-section {
flex: 1 1;
}
}
@media (max-width: 715px) {
.footer-top {
zoom: 0.92;
}
}
@media (max-width: 630px) {
.footer-links-contact-container {
width: 100%;
flex-wrap: wrap;
gap: 26px;
}
.footer-contact h4, .footer-links h4, .footer-services h4 {
font-size: 16px;
margin-bottom: 5px;
}
.country {
zoom: 0.93;
}
.footer-copyright {
zoom: 0.95;
}
.apps, .links-footer-bottom {
zoom: 0.82;
}
}
@media (max-width: 485px) {
.footer-links-contact-container {
flex-direction: column;
}
.country {
zoom: 0.9;
}
.apps, .footer-copyright, .links-footer-bottom {
zoom: 0.78;
}
.footer-top {
padding: 24px 12px;
gap: 16px;
}
}
@media (max-width: 350px){
.footer-bottom {
padding: 15px 0;
}
.country, .apps {
flex-direction: row;
}
#logo-def {
height: 52px;
width: auto;
}
.footer-links-contact-container {
gap: 22px;
}
.footer-bottom{
gap: 14px;
}
.apps, .footer-copyright, .links-footer-bottom {
zoom: 0.72;
}
.country {
zoom: 0.85;
}
}
@media (max-width: 273px) {
.footer-links-contact-container {
gap: 18px;
}
.footer-links a, .footer-services a, .footer-contact p {
font-size: 12px;
}
.footer-logo p {
font-size: 12.5px;
}
.footer-bottom{
gap: 14px;
}
.apps, .footer-copyright, .links-footer-bottom {
zoom: 0.65;
}
.country {
zoom: 0.8;
}
}
@media (max-width: 200px) {
.footer-logo p {
font-size: min(6.15vw, 14.15px);
}
}
/* =========================================================
UI SCALE FREEZE (BASE 1920)
- 1920px wali footer layout ko lock rakho
- 1921px+ par koi manual (2K/4K/8K) scaling rules apply na hon
- Actual size ui-scale.css (zoom/transform) se handle hogi
========================================================= */
@media (min-width: 1921px){
html[data-ui-scale="on"] .footer-top{
padding: 50px 0px !important;
gap: 28px !important;
max-width: calc(1560px + 2rem) !important;
margin: auto !important;
}
html[data-ui-scale="on"] .footer-links-contact-container{
display: flex !important;
flex-wrap: nowrap !important;
gap: 100px !important;
padding-right: 10px !important;
}
html[data-ui-scale="on"] .footer-logo{
max-width: 400px !important;
}
html[data-ui-scale="on"] #logo-def{
height: 60px !important;
margin-right: 8px !important;
}
html[data-ui-scale="on"] #logo-sm{
height: 38px !important;
margin-top: -10px !important;
}
html[data-ui-scale="on"] .footer-logo p{
font-size: 17px !important;
}
html[data-ui-scale="on"] .footer-contact h4,
html[data-ui-scale="on"] .footer-links h4,
html[data-ui-scale="on"] .footer-services h4{
margin-bottom: 15px !important;
font-size: 20px !important;
font-weight: 700 !important;
}
html[data-ui-scale="on"] .footer-links a,
html[data-ui-scale="on"] .footer-services a,
html[data-ui-scale="on"] .footer-contact p{
font-size: 17px !important;
}
html[data-ui-scale="on"] .footer-center{
padding: 15px 20px !important;
text-align: center !important;
}
html[data-ui-scale="on"] .footer-center nav{
gap: 8px !important;
}
html[data-ui-scale="on"] .footer-center nav a{
font-size: 15px !important;
}
html[data-ui-scale="on"] .footer-bottom{
padding: 15px 20px !important;
gap: 20px !important;
font-size: 13px !important;
}
html[data-ui-scale="on"] .apps{
font-size: 16px !important;
}
html[data-ui-scale="on"] .apps img{
height: 40px !important;
width: auto !important;
}
html[data-ui-scale="on"] .custom-select{
width: 200px !important;
}
html[data-ui-scale="on"] .custom-select-trigger{
font-size: 14px !important;
height: 36px !important;
}
html[data-ui-scale="on"] .custom-option{
font-size: 14px !important;
}
html[data-ui-scale="on"] .footer-copyright{
font-size: 12px !important;
}
}