@charset "UTF-8";/*! * Bootstrap v5.2.3 (https://getbootstrap.com/) * Copyright 2011-2022 The Bootstrap Authors * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--bs-blue:#0d6efd;--bs-indigo:#6610f2;--bs-purple:#6f42c1;--bs-pink:#d63384;--bs-red:#dc3545;--bs-orange:#fd7e14;--bs-yellow:#ffc107;--bs-green:#198754;--bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;--bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;--bs-gray-100:#f8f9fa;--bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;--bs-gray-500:#adb5bd;--bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;--bs-gray-900:#212529;--bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;--bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;--bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;--bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;--bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;--bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;--bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;--bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;--bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;--bs-link-hover-color:#0a58ca;--bs-code-color:#d63384;--bs-highlight-bg:#fff3cd}*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.25}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}.h1,h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){.h1,h1{font-size:2.5rem}}.h2,h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){.h2,h2{font-size:2rem}}.h3,h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){.h3,h3{font-size:1.75rem}}.h4,h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.h4,h4{font-size:1.5rem}}.h5,h5{font-size:1.25rem}.h6,h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}b,strong{font-weight:bolder}.small,small{font-size:.875em}.mark,mark{padding:.1875em;background-color:var(--bs-highlight-bg)}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:var(--bs-link-color);text-decoration:underline}a:hover{color:var(--bs-link-hover-color)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,pre{font-family:var(--bs-font-monospace);font-size:1em}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:var(--bs-code-color);word-wrap:break-word}a>code{color:inherit}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator{display:none!important}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}::file-selector-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.lead{font-size:1.25rem;font-weight:300}.figure{display:inline-block}.container,.container-fluid{--bs-gutter-x:30px;--bs-gutter-y:0;width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1200px}}.row{--bs-gutter-x:30px;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(-1 * var(--bs-gutter-y));margin-right:calc(-.5 * var(--bs-gutter-x));margin-left:calc(-.5 * var(--bs-gutter-x))}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col{flex:1 0 0%}.col-6{flex:0 0 auto;width:50%}.g-1{--bs-gutter-x:0.25rem}.g-1{--bs-gutter-y:0.25rem}.g-2{--bs-gutter-x:0.5rem}.g-2{--bs-gutter-y:0.5rem}.g-3{--bs-gutter-x:1rem}.g-3{--bs-gutter-y:1rem}@media (min-width:768px){.col-md-6{flex:0 0 auto;width:50%}.col-md-12{flex:0 0 auto;width:100%}}@media (min-width:992px){.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.33333333%}.col-lg-5{flex:0 0 auto;width:41.66666667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.33333333%}.col-lg-8{flex:0 0 auto;width:66.66666667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-6{margin-left:50%}}@media (min-width:1200px){.col-xl-2{flex:0 0 auto;width:16.66666667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.33333333%}.col-xl-5{flex:0 0 auto;width:41.66666667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-8{flex:0 0 auto;width:66.66666667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.33333333%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-3{margin-left:25%}.offset-xl-7{margin-left:58.33333333%}}.table{--bs-table-color:var(--bs-body-color);--bs-table-bg:transparent;--bs-table-border-color:var(--bs-border-color);--bs-table-accent-bg:transparent;--bs-table-striped-color:var(--bs-body-color);--bs-table-striped-bg:rgba(0, 0, 0, 0.05);--bs-table-active-color:var(--bs-body-color);--bs-table-active-bg:rgba(0, 0, 0, 0.1);--bs-table-hover-color:var(--bs-body-color);--bs-table-hover-bg:rgba(0, 0, 0, 0.075);width:100%;margin-bottom:1rem;color:var(--bs-table-color);vertical-align:top;border-color:var(--bs-table-border-color)}.table>:not(caption)>*>*{padding:.5rem .5rem;background-color:var(--bs-table-bg);border-bottom-width:1px;box-shadow:inset 0 0 0 9999px var(--bs-table-accent-bg)}.table>tbody{vertical-align:inherit}.table>thead{vertical-align:bottom}.btn{--bs-btn-padding-x:0.75rem;--bs-btn-padding-y:0.375rem;--bs-btn-font-family: ;--bs-btn-font-size:1rem;--bs-btn-font-weight:400;--bs-btn-line-height:1.5;--bs-btn-color:#212529;--bs-btn-bg:transparent;--bs-btn-border-width:1px;--bs-btn-border-color:transparent;--bs-btn-border-radius:0.375rem;--bs-btn-hover-border-color:transparent;--bs-btn-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.15),0 1px 1px rgba(0, 0, 0, 0.075);--bs-btn-disabled-opacity:0.65;--bs-btn-focus-box-shadow:0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);display:inline-block;padding:var(--bs-btn-padding-y) var(--bs-btn-padding-x);font-family:var(--bs-btn-font-family);font-size:var(--bs-btn-font-size);font-weight:var(--bs-btn-font-weight);line-height:var(--bs-btn-line-height);color:var(--bs-btn-color);text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:var(--bs-btn-border-width) solid var(--bs-btn-border-color);border-radius:var(--bs-btn-border-radius);background-color:var(--bs-btn-bg);transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn:hover{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color)}.btn:focus-visible{color:var(--bs-btn-hover-color);background-color:var(--bs-btn-hover-bg);border-color:var(--bs-btn-hover-border-color);outline:0;box-shadow:var(--bs-btn-focus-box-shadow)}.btn.active,.btn.show,.btn:first-child:active,:not(.btn-check)+.btn:active{color:var(--bs-btn-active-color);background-color:var(--bs-btn-active-bg);border-color:var(--bs-btn-active-border-color)}.btn.active:focus-visible,.btn.show:focus-visible,.btn:first-child:active:focus-visible,:not(.btn-check)+.btn:active:focus-visible{box-shadow:var(--bs-btn-focus-box-shadow)}.btn.disabled,.btn:disabled,fieldset:disabled .btn{color:var(--bs-btn-disabled-color);pointer-events:none;background-color:var(--bs-btn-disabled-bg);border-color:var(--bs-btn-disabled-border-color);opacity:var(--bs-btn-disabled-opacity)}.fade{transition:opacity .15s linear}@media (prefers-reduced-motion:reduce){.fade{transition:none}}.fade:not(.show){opacity:0}.collapse:not(.show){display:none}.collapsing{height:0;overflow:hidden;transition:height .35s ease}@media (prefers-reduced-motion:reduce){.collapsing{transition:none}}.collapsing.collapse-horizontal{width:0;height:auto;transition:width .35s ease}@media (prefers-reduced-motion:reduce){.collapsing.collapse-horizontal{transition:none}}.dropdown,.dropend,.dropstart,.dropup{position:relative}.dropdown-toggle{white-space:nowrap}.dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid;border-right:.3em solid transparent;border-bottom:0;border-left:.3em solid transparent}.dropdown-toggle:empty::after{margin-left:0}.dropdown-menu{--bs-dropdown-zindex:1000;--bs-dropdown-min-width:10rem;--bs-dropdown-padding-x:0;--bs-dropdown-padding-y:0.5rem;--bs-dropdown-spacer:0.125rem;--bs-dropdown-font-size:1rem;--bs-dropdown-color:#212529;--bs-dropdown-bg:#fff;--bs-dropdown-border-color:var(--bs-border-color-translucent);--bs-dropdown-border-radius:0.375rem;--bs-dropdown-border-width:1px;--bs-dropdown-inner-border-radius:calc(0.375rem - 1px);--bs-dropdown-divider-bg:var(--bs-border-color-translucent);--bs-dropdown-divider-margin-y:0.5rem;--bs-dropdown-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-dropdown-link-color:#212529;--bs-dropdown-link-hover-color:#1e2125;--bs-dropdown-link-hover-bg:#e9ecef;--bs-dropdown-link-active-color:#fff;--bs-dropdown-link-active-bg:#0d6efd;--bs-dropdown-link-disabled-color:#adb5bd;--bs-dropdown-item-padding-x:1rem;--bs-dropdown-item-padding-y:0.25rem;--bs-dropdown-header-color:#6c757d;--bs-dropdown-header-padding-x:1rem;--bs-dropdown-header-padding-y:0.5rem;position:absolute;z-index:var(--bs-dropdown-zindex);display:none;min-width:var(--bs-dropdown-min-width);padding:var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);margin:0;font-size:var(--bs-dropdown-font-size);color:var(--bs-dropdown-color);text-align:left;list-style:none;background-color:var(--bs-dropdown-bg);background-clip:padding-box;border:var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);border-radius:var(--bs-dropdown-border-radius)}.dropup .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:0;border-right:.3em solid transparent;border-bottom:.3em solid;border-left:.3em solid transparent}.dropup .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:0;border-bottom:.3em solid transparent;border-left:.3em solid}.dropend .dropdown-toggle:empty::after{margin-left:0}.dropend .dropdown-toggle::after{vertical-align:0}.dropstart .dropdown-toggle::after{display:inline-block;margin-left:.255em;vertical-align:.255em;content:""}.dropstart .dropdown-toggle::after{display:none}.dropstart .dropdown-toggle::before{display:inline-block;margin-right:.255em;vertical-align:.255em;content:"";border-top:.3em solid transparent;border-right:.3em solid;border-bottom:.3em solid transparent}.dropstart .dropdown-toggle:empty::after{margin-left:0}.dropstart .dropdown-toggle::before{vertical-align:0}.dropdown-item{display:block;width:100%;padding:var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);clear:both;font-weight:400;color:var(--bs-dropdown-link-color);text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:focus,.dropdown-item:hover{color:var(--bs-dropdown-link-hover-color);background-color:var(--bs-dropdown-link-hover-bg)}.dropdown-item.active,.dropdown-item:active{color:var(--bs-dropdown-link-active-color);text-decoration:none;background-color:var(--bs-dropdown-link-active-bg)}.dropdown-item.disabled,.dropdown-item:disabled{color:var(--bs-dropdown-link-disabled-color);pointer-events:none;background-color:transparent}.dropdown-menu.show{display:block}.nav{--bs-nav-link-padding-x:1rem;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-link-color);--bs-nav-link-hover-color:var(--bs-link-hover-color);--bs-nav-link-disabled-color:#6c757d;display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.nav-link{display:block;padding:var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);font-size:var(--bs-nav-link-font-size);font-weight:var(--bs-nav-link-font-weight);color:var(--bs-nav-link-color);text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out}@media (prefers-reduced-motion:reduce){.nav-link{transition:none}}.nav-link:focus,.nav-link:hover{color:var(--bs-nav-link-hover-color)}.nav-link.disabled{color:var(--bs-nav-link-disabled-color);pointer-events:none;cursor:default}.navbar{--bs-navbar-padding-x:0;--bs-navbar-padding-y:0.5rem;--bs-navbar-color:rgba(0, 0, 0, 0.55);--bs-navbar-hover-color:rgba(0, 0, 0, 0.7);--bs-navbar-disabled-color:rgba(0, 0, 0, 0.3);--bs-navbar-active-color:rgba(0, 0, 0, 0.9);--bs-navbar-brand-padding-y:0.3125rem;--bs-navbar-brand-margin-end:1rem;--bs-navbar-brand-font-size:1.25rem;--bs-navbar-brand-color:rgba(0, 0, 0, 0.9);--bs-navbar-brand-hover-color:rgba(0, 0, 0, 0.9);--bs-navbar-nav-link-padding-x:0.5rem;--bs-navbar-toggler-padding-y:0.25rem;--bs-navbar-toggler-padding-x:0.75rem;--bs-navbar-toggler-font-size:1.25rem;--bs-navbar-toggler-icon-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");--bs-navbar-toggler-border-color:rgba(0, 0, 0, 0.1);--bs-navbar-toggler-border-radius:0.375rem;--bs-navbar-toggler-focus-width:0.25rem;--bs-navbar-toggler-transition:box-shadow 0.15s ease-in-out;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:var(--bs-navbar-padding-y) var(--bs-navbar-padding-x)}.navbar>.container,.navbar>.container-fluid{display:flex;flex-wrap:inherit;align-items:center;justify-content:space-between}.navbar-nav{--bs-nav-link-padding-x:0;--bs-nav-link-padding-y:0.5rem;--bs-nav-link-font-weight: ;--bs-nav-link-color:var(--bs-navbar-color);--bs-nav-link-hover-color:var(--bs-navbar-hover-color);--bs-nav-link-disabled-color:var(--bs-navbar-disabled-color);display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link.active,.navbar-nav .show>.nav-link{color:var(--bs-navbar-active-color)}.navbar-nav .dropdown-menu{position:static}.card{--bs-card-spacer-y:1rem;--bs-card-spacer-x:1rem;--bs-card-title-spacer-y:0.5rem;--bs-card-border-width:1px;--bs-card-border-color:var(--bs-border-color-translucent);--bs-card-border-radius:0.375rem;--bs-card-box-shadow: ;--bs-card-inner-border-radius:calc(0.375rem - 1px);--bs-card-cap-padding-y:0.5rem;--bs-card-cap-padding-x:1rem;--bs-card-cap-bg:rgba(0, 0, 0, 0.03);--bs-card-cap-color: ;--bs-card-height: ;--bs-card-color: ;--bs-card-bg:#fff;--bs-card-img-overlay-padding:1rem;--bs-card-group-margin:0.75rem;position:relative;display:flex;flex-direction:column;min-width:0;height:var(--bs-card-height);word-wrap:break-word;background-color:var(--bs-card-bg);background-clip:border-box;border:var(--bs-card-border-width) solid var(--bs-card-border-color);border-radius:var(--bs-card-border-radius)}.card>hr{margin-right:0;margin-left:0}.card>.list-group{border-top:inherit;border-bottom:inherit}.card>.list-group:first-child{border-top-width:0;border-top-left-radius:var(--bs-card-inner-border-radius);border-top-right-radius:var(--bs-card-inner-border-radius)}.card>.list-group:last-child{border-bottom-width:0;border-bottom-right-radius:var(--bs-card-inner-border-radius);border-bottom-left-radius:var(--bs-card-inner-border-radius)}.pagination{--bs-pagination-padding-x:0.75rem;--bs-pagination-padding-y:0.375rem;--bs-pagination-font-size:1rem;--bs-pagination-color:var(--bs-link-color);--bs-pagination-bg:#fff;--bs-pagination-border-width:1px;--bs-pagination-border-color:#dee2e6;--bs-pagination-border-radius:0.375rem;--bs-pagination-hover-color:var(--bs-link-hover-color);--bs-pagination-hover-bg:#e9ecef;--bs-pagination-hover-border-color:#dee2e6;--bs-pagination-focus-color:var(--bs-link-hover-color);--bs-pagination-focus-bg:#e9ecef;--bs-pagination-focus-box-shadow:0 0 0 0.25rem rgba(13, 110, 253, 0.25);--bs-pagination-active-color:#fff;--bs-pagination-active-bg:#0d6efd;--bs-pagination-active-border-color:#0d6efd;--bs-pagination-disabled-color:#6c757d;--bs-pagination-disabled-bg:#fff;--bs-pagination-disabled-border-color:#dee2e6;display:flex;padding-left:0;list-style:none}.alert{--bs-alert-bg:transparent;--bs-alert-padding-x:1rem;--bs-alert-padding-y:1rem;--bs-alert-margin-bottom:1rem;--bs-alert-color:inherit;--bs-alert-border-color:transparent;--bs-alert-border:1px solid var(--bs-alert-border-color);--bs-alert-border-radius:0.375rem;position:relative;padding:var(--bs-alert-padding-y) var(--bs-alert-padding-x);margin-bottom:var(--bs-alert-margin-bottom);color:var(--bs-alert-color);background-color:var(--bs-alert-bg);border:var(--bs-alert-border);border-radius:var(--bs-alert-border-radius)}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.progress{--bs-progress-height:1rem;--bs-progress-font-size:0.75rem;--bs-progress-bg:#e9ecef;--bs-progress-border-radius:0.375rem;--bs-progress-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.075);--bs-progress-bar-color:#fff;--bs-progress-bar-bg:#0d6efd;--bs-progress-bar-transition:width 0.6s ease;display:flex;height:var(--bs-progress-height);overflow:hidden;font-size:var(--bs-progress-font-size);background-color:var(--bs-progress-bg);border-radius:var(--bs-progress-border-radius)}.list-group{--bs-list-group-color:#212529;--bs-list-group-bg:#fff;--bs-list-group-border-color:rgba(0, 0, 0, 0.125);--bs-list-group-border-width:1px;--bs-list-group-border-radius:0.375rem;--bs-list-group-item-padding-x:1rem;--bs-list-group-item-padding-y:0.5rem;--bs-list-group-action-color:#495057;--bs-list-group-action-hover-color:#495057;--bs-list-group-action-hover-bg:#f8f9fa;--bs-list-group-action-active-color:#212529;--bs-list-group-action-active-bg:#e9ecef;--bs-list-group-disabled-color:#6c757d;--bs-list-group-disabled-bg:#fff;--bs-list-group-active-color:#fff;--bs-list-group-active-bg:#0d6efd;--bs-list-group-active-border-color:#0d6efd;display:flex;flex-direction:column;padding-left:0;margin-bottom:0;border-radius:var(--bs-list-group-border-radius)}.list-group-item{position:relative;display:block;padding:var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);color:var(--bs-list-group-color);text-decoration:none;background-color:var(--bs-list-group-bg);border:var(--bs-list-group-border-width) solid var(--bs-list-group-border-color)}.list-group-item:first-child{border-top-left-radius:inherit;border-top-right-radius:inherit}.list-group-item:last-child{border-bottom-right-radius:inherit;border-bottom-left-radius:inherit}.list-group-item.disabled,.list-group-item:disabled{color:var(--bs-list-group-disabled-color);pointer-events:none;background-color:var(--bs-list-group-disabled-bg)}.list-group-item.active{z-index:2;color:var(--bs-list-group-active-color);background-color:var(--bs-list-group-active-bg);border-color:var(--bs-list-group-active-border-color)}.list-group-item+.list-group-item{border-top-width:0}.list-group-item+.list-group-item.active{margin-top:calc(-1 * var(--bs-list-group-border-width));border-top-width:var(--bs-list-group-border-width)}.toast{--bs-toast-zindex:1090;--bs-toast-padding-x:0.75rem;--bs-toast-padding-y:0.5rem;--bs-toast-spacing:1.5rem;--bs-toast-max-width:350px;--bs-toast-font-size:0.875rem;--bs-toast-color: ;--bs-toast-bg:rgba(255, 255, 255, 0.85);--bs-toast-border-width:1px;--bs-toast-border-color:var(--bs-border-color-translucent);--bs-toast-border-radius:0.375rem;--bs-toast-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-toast-header-color:#6c757d;--bs-toast-header-bg:rgba(255, 255, 255, 0.85);--bs-toast-header-border-color:rgba(0, 0, 0, 0.05);width:var(--bs-toast-max-width);max-width:100%;font-size:var(--bs-toast-font-size);color:var(--bs-toast-color);pointer-events:auto;background-color:var(--bs-toast-bg);background-clip:padding-box;border:var(--bs-toast-border-width) solid var(--bs-toast-border-color);box-shadow:var(--bs-toast-box-shadow);border-radius:var(--bs-toast-border-radius)}.toast.showing{opacity:0}.toast:not(.show){display:none}.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color: ;--bs-modal-bg:#fff;--bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:1px;--bs-modal-border-radius:0.5rem;--bs-modal-box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-modal-inner-border-radius:calc(0.5rem - 1px);--bs-modal-header-padding-x:1rem;--bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);--bs-modal-header-border-width:1px;--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;--bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:1px;position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}@media (prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}.modal.show .modal-dialog{transform:none}.modal.modal-static .modal-dialog{transform:scale(1.02)}.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-bg:#000;--bs-backdrop-opacity:0.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:var(--bs-backdrop-bg)}.modal-backdrop.fade{opacity:0}.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}@media (min-width:576px){.modal{--bs-modal-margin:1.75rem;--bs-modal-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15)}.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}}.tooltip{--bs-tooltip-zindex:1080;--bs-tooltip-max-width:200px;--bs-tooltip-padding-x:0.5rem;--bs-tooltip-padding-y:0.25rem;--bs-tooltip-margin: ;--bs-tooltip-font-size:0.875rem;--bs-tooltip-color:#fff;--bs-tooltip-bg:#000;--bs-tooltip-border-radius:0.375rem;--bs-tooltip-opacity:0.9;--bs-tooltip-arrow-width:0.8rem;--bs-tooltip-arrow-height:0.4rem;z-index:var(--bs-tooltip-zindex);display:block;padding:var(--bs-tooltip-arrow-height);margin:var(--bs-tooltip-margin);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-tooltip-font-size);word-wrap:break-word;opacity:0}.tooltip.show{opacity:var(--bs-tooltip-opacity)}.tooltip .tooltip-arrow{display:block;width:var(--bs-tooltip-arrow-width);height:var(--bs-tooltip-arrow-height)}.tooltip .tooltip-arrow::before{position:absolute;content:"";border-color:transparent;border-style:solid}.tooltip-inner{max-width:var(--bs-tooltip-max-width);padding:var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);color:var(--bs-tooltip-color);text-align:center;background-color:var(--bs-tooltip-bg);border-radius:var(--bs-tooltip-border-radius)}.popover{--bs-popover-zindex:1070;--bs-popover-max-width:276px;--bs-popover-font-size:0.875rem;--bs-popover-bg:#fff;--bs-popover-border-width:1px;--bs-popover-border-color:var(--bs-border-color-translucent);--bs-popover-border-radius:0.5rem;--bs-popover-inner-border-radius:calc(0.5rem - 1px);--bs-popover-box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);--bs-popover-header-padding-x:1rem;--bs-popover-header-padding-y:0.5rem;--bs-popover-header-font-size:1rem;--bs-popover-header-color: ;--bs-popover-header-bg:#f0f0f0;--bs-popover-body-padding-x:1rem;--bs-popover-body-padding-y:1rem;--bs-popover-body-color:#212529;--bs-popover-arrow-width:1rem;--bs-popover-arrow-height:0.5rem;--bs-popover-arrow-border:var(--bs-popover-border-color);z-index:var(--bs-popover-zindex);display:block;max-width:var(--bs-popover-max-width);font-family:var(--bs-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--bs-popover-font-size);word-wrap:break-word;background-color:var(--bs-popover-bg);background-clip:padding-box;border:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-radius:var(--bs-popover-border-radius)}.popover .popover-arrow{display:block;width:var(--bs-popover-arrow-width);height:var(--bs-popover-arrow-height)}.popover .popover-arrow::after,.popover .popover-arrow::before{position:absolute;display:block;content:"";border-color:transparent;border-style:solid;border-width:0}.popover-header{padding:var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);margin-bottom:0;font-size:var(--bs-popover-header-font-size);color:var(--bs-popover-header-color);background-color:var(--bs-popover-header-bg);border-bottom:var(--bs-popover-border-width) solid var(--bs-popover-border-color);border-top-left-radius:var(--bs-popover-inner-border-radius);border-top-right-radius:var(--bs-popover-inner-border-radius)}.popover-header:empty{display:none}.popover-body{padding:var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);color:var(--bs-popover-body-color)}.carousel{position:relative}.carousel.pointer-event{touch-action:pan-y}.carousel-item{position:relative;display:none;float:left;width:100%;margin-right:-100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .6s ease-in-out}@media (prefers-reduced-motion:reduce){.carousel-item{transition:none}}.carousel-item-next,.carousel-item-prev,.carousel-item.active{display:block}.active.carousel-item-end,.carousel-item-next:not(.carousel-item-start){transform:translateX(100%)}.active.carousel-item-start,.carousel-item-prev:not(.carousel-item-end){transform:translateX(-100%)}.carousel-indicators{position:absolute;right:0;bottom:0;left:0;z-index:2;display:flex;justify-content:center;padding:0;margin-right:15%;margin-bottom:1rem;margin-left:15%;list-style:none}.carousel-indicators [data-bs-target]{box-sizing:content-box;flex:0 1 auto;width:30px;height:3px;padding:0;margin-right:3px;margin-left:3px;text-indent:-999px;cursor:pointer;background-color:#fff;background-clip:padding-box;border:0;border-top:10px solid transparent;border-bottom:10px solid transparent;opacity:.5;transition:opacity .6s ease}@media (prefers-reduced-motion:reduce){.carousel-indicators [data-bs-target]{transition:none}}.carousel-indicators .active{opacity:1}@keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.offcanvas{--bs-offcanvas-zindex:1045;--bs-offcanvas-width:400px;--bs-offcanvas-height:30vh;--bs-offcanvas-padding-x:1rem;--bs-offcanvas-padding-y:1rem;--bs-offcanvas-color: ;--bs-offcanvas-bg:#fff;--bs-offcanvas-border-width:1px;--bs-offcanvas-border-color:var(--bs-border-color-translucent);--bs-offcanvas-box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075)}.offcanvas{position:fixed;bottom:0;z-index:var(--bs-offcanvas-zindex);display:flex;flex-direction:column;max-width:100%;color:var(--bs-offcanvas-color);visibility:hidden;background-color:var(--bs-offcanvas-bg);background-clip:padding-box;outline:0;transition:transform .3s ease-in-out}@media (prefers-reduced-motion:reduce){.offcanvas{transition:none}}.offcanvas.show:not(.hiding),.offcanvas.showing{transform:none}.offcanvas.show,.offcanvas.showing{visibility:visible}.offcanvas-backdrop{position:fixed;top:0;left:0;z-index:1040;width:100vw;height:100vh;background-color:#000}.offcanvas-backdrop.fade{opacity:0}.offcanvas-backdrop.show{opacity:.5}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}.placeholder.btn::before{display:inline-block;content:""}@keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-wave{100%{-webkit-mask-position:-200% 0%;mask-position:-200% 0%}}.ratio{position:relative;width:100%}.ratio::before{display:block;padding-top:var(--bs-aspect-ratio);content:""}.ratio>*{position:absolute;top:0;left:0;width:100%;height:100%}.fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}.fixed-bottom{position:fixed;right:0;bottom:0;left:0;z-index:1030}.sticky-top{position:-webkit-sticky;position:sticky;top:0;z-index:1020}.vr{display:inline-block;align-self:stretch;width:1px;min-height:1em;background-color:currentcolor;opacity:.25}.d-flex{display:flex!important}.d-inline-flex{display:inline-flex!important}.d-none{display:none!important}.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}.border{border:var(--bs-border-width) var(--bs-border-style) var(--bs-border-color)!important}.w-100{width:100%!important}.justify-content-center{justify-content:center!important}.justify-content-between{justify-content:space-between!important}.align-items-start{align-items:flex-start!important}.align-items-end{align-items:flex-end!important}.align-items-center{align-items:center!important}.m-1{margin:.25rem!important}.mt-5{margin-top:3rem!important}.p-1{padding:.25rem!important}.text-end{text-align:right!important}.text-center{text-align:center!important}.visible{visibility:visible!important}@media (min-width:768px){.d-md-block{display:block!important}.text-md-start{text-align:left!important}.text-md-end{text-align:right!important}}@media (min-width:992px){.text-lg-end{text-align:right!important}}@media (min-width:1200px){.d-xl-block{display:block!important}.d-xl-none{display:none!important}} /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } /** * Swiper 8.4.5 * Most modern mobile touch slider and framework with hardware accelerated transitions * https://swiperjs.com * * Copyright 2014-2022 Vladimir Kharlampidi * * Released under the MIT License * * Released on: November 21, 2022 */ @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:50%;width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev{left:10px;right:auto}.swiper-button-prev:after{content:'prev'}.swiper-button-next{right:10px;left:auto}.swiper-button-next:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:50%;background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,.1)}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-scrollbar.swiper-scrollbar-vertical{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000} .mt-5{margin-top:5px !important}.mt-30{margin-top:30px}.mt-60{margin-top:60px}.mb-20{margin-bottom:20px}.mb-25{margin-bottom:25px}.mb-30{margin-bottom:30px}.mb-45{margin-bottom:45px}.mb-55{margin-bottom:55px}.mb-70{margin-bottom:70px}.mb-100{margin-bottom:100px}.mb-110{margin-bottom:110px}.mb-130{margin-bottom:130px}.mb-140{margin-bottom:140px}.mb-200{margin-bottom:200px}.ml-20{margin-left:20px}.mr-5{margin-right:5px}.pt-60{padding-top:60px}.pt-120{padding-top:120px}.pb-10{padding-bottom:10px}.pb-35{padding-bottom:35px}.pb-40{padding-bottom:40px}.pb-120{padding-bottom:120px}.pb-200{padding-bottom:200px}.pr-15{padding-right:15px} /*----------------------------------------------------------------------------------- Template Name: Agntix - Digital Agency & Creative Portfolio HTML Template Author: Theme_Pure Support: https://help.themepure.net/support/ Description: Template Version: 1.0.3 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** ----------------- 01. THEME CSS ----------------- 1.1 Theme Default 1.2 Common Classes ----------------- 02. COMPONENTS CSS ----------------- 2.1 Back to top 2.2 Buttons 2.3 Animations 2.4 Preloader 2.5 Background 2.6 Nice Select 2.7 Breadcrumb 2.8 Accordion 2.9 Section Title 2.10 Accordion 2.11 Search 2.12 Magic Cursor ----------------- 03. HEADER CSS ----------------- 3.1 Header Style --------------------------------- 04. MENU CSS --------------------------------- 4.1 Main Menu 4.2 Mobile Menu 4.3 offcanvas Menu --------------------------------- 05. BLOG CSS --------------------------------- 5.1 Postbox css 5.2 Recent Post css 5.3 Sidebar css 5.4 Blog css --------------------------------- 06. FOOTER CSS --------------------------------- 6.1 Footer Style 1 6.2 Footer Style 2 6.3 Footer Style 3 6.5 Footer Style 5 6.7 Footer Style 7 6.8 Footer Style 8 6.9 Footer Style 9 6.10 Footer Style 10 6.11 Footer Style 11 6.12 Footer Style 12 6.13 Footer Style 13 6.14 Footer Style 14 6.15 Footer Style 15 --------------------------------- 07. PAGES CSS --------------------------------- 7.1 Hero css 7.2 About Css 7.3 Banner Css 7.4 Text-slide Css 7.5 Service Css 7.6 Project Css 7.7 Funfact Css 7.8 Work Css 7.9 Testimonail Css 8.0 Award Css 8.1 Video Css 8.2 Brand Css 8.3 Team Css 8.4 Step Css 8.5 Choose Css 8.6 Price Css 8.7 Faq Css 8.8 Success Css 8.9 Instagram Css 9.0 Feature Css 9.1 Review Css 9.2 Stack Css 9.3 Benefits Css 9.4 Cta Css 9.5 Intaractive Css 9.6 Project Slider Css 9.7 Career Css 9.8 Contact Css 9.9 Portfolio css 10.0 Shop Css 10.1 Shop Details Css 10.2 Login Css 10.3 Checkout css 10.4 Cart css 10.5 Account css 10.6 Error Css 10.7 Dark Css Start 10.8 Light Css Start **********************************************/ /*----------------------------------------*/ /* 1.1 Theme Default /*----------------------------------------*/ @keyframes bannerAnimationTwo { 0% { transform: translate(0px, 0px); } 20% { transform: translate(20px, -5px); } 40% { transform: translate(50px, 20px); } 60% { transform: translate(20px, 50px); } 80% { transform: translate(-20px, 30px); } 100% { transform: translate(0px, 0px); } } .back-to-top-wrapper, a, button, p, input, select, textarea, li { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* transform */ @font-face { font-family: "Platform"; src: url("../fonts/Platform-Light.eot"); src: local("Platform Light"), local("Platform-Light"), url("../fonts/Platform-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Platform-Light.woff2") format("woff2"), url("../fonts/Platform-Light.woff") format("woff"), url("../fonts/Platform-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "Platform"; src: url("../fonts/Platform-Regular.eot"); src: local("Platform Regular"), local("Platform-Regular"), url("../fonts/Platform-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Platform-Regular.woff2") format("woff2"), url("../fonts/Platform-Regular.woff") format("woff"), url("../fonts/Platform-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: "Platform"; src: url("../fonts/Platform-Medium.eot"); src: local("Platform Medium"), local("Platform-Medium"), url("../fonts/Platform-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Platform-Medium.woff2") format("woff2"), url("../fonts/Platform-Medium.woff") format("woff"), url("../fonts/Platform-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "MangoGrotesque"; src: url("../fonts/MangoGrotesque-Bold.eot"); src: url("../fonts/MangoGrotesque-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Bold.woff") format("woff"), url("../fonts/MangoGrotesque-Bold.woff2") format("woff2"), url("../fonts/MangoGrotesque-Bold.ttf") format("truetype"); font-style: normal; font-weight: bold; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesqueLight"; src: url("../fonts/MangoGrotesque-Light.eot"); src: url("../fonts/MangoGrotesque-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Light.woff") format("woff"), url("../fonts/MangoGrotesque-Light.woff2") format("woff2"), url("../fonts/MangoGrotesque-Light.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesqueMed"; src: url("../fonts/MangoGrotesque-Medium.eot"); src: url("../fonts/MangoGrotesque-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Medium.woff") format("woff"), url("../fonts/MangoGrotesque-Medium.woff2") format("woff2"), url("../fonts/MangoGrotesque-Medium.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesqueSemBd"; src: url("../fonts/MangoGrotesque-SemiBold.eot"); src: url("../fonts/MangoGrotesque-SemiBold.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-SemiBold.woff") format("woff"), url("../fonts/MangoGrotesque-SemiBold.woff2") format("woff2"), url("../fonts/MangoGrotesque-SemiBold.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesque"; src: url("../fonts/MangoGrotesque-Regular.eot"); src: url("../fonts/MangoGrotesque-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Regular.woff") format("woff"), url("../fonts/MangoGrotesque-Regular.woff2") format("woff2"), url("../fonts/MangoGrotesque-Regular.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "MangoGrotesqueThin"; src: url("../fonts/MangoGrotesque-Thin.eot"); src: url("../fonts/MangoGrotesque-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/MangoGrotesque-Thin.woff") format("woff"), url("../fonts/MangoGrotesque-Thin.woff2") format("woff2"), url("../fonts/MangoGrotesque-Thin.ttf") format("truetype"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "dirtyline-36daysoftype-2022"; src: url("../fonts/dirtyline-36daysoftype-2022.otf"); font-style: normal; font-weight: normal; text-rendering: optimizeLegibility; } @font-face { font-family: "ClashDisplay-Light"; src: url("../fonts/ClashDisplay-Light.woff2") format("woff2"), url("../fonts/ClashDisplay-Light.woff") format("woff"), url("../fonts/ClashDisplay-Light.ttf") format("truetype"); font-weight: 300; font-display: swap; font-style: normal; } @font-face { font-family: "ClashDisplay-Regular"; src: url("../fonts/ClashDisplay-Regular.woff2") format("woff2"), url("../fonts/ClashDisplay-Regular.woff") format("woff"), url("../fonts/ClashDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; font-style: normal; } @font-face { font-family: "ClashDisplay-Medium"; src: url("../fonts/ClashDisplay-Medium.woff2") format("woff2"), url("../fonts/ClashDisplay-Medium.woff") format("woff"), url("../fonts/ClashDisplay-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; font-style: normal; } @font-face { font-family: "ClashDisplay-Semibold"; src: url("../fonts/ClashDisplay-Semibold.woff2") format("woff2"), url("../fonts/ClashDisplay-Semibold.woff") format("woff"), url("../fonts/ClashDisplay-Semibold.ttf") format("truetype"); font-weight: 600; font-display: swap; font-style: normal; } @font-face { font-family: "ClashDisplay-Bold"; src: url("../fonts/ClashDisplay-Bold.woff2") format("woff2"), url("../fonts/ClashDisplay-Bold.woff") format("woff"), url("../fonts/ClashDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; font-style: normal; } @font-face { font-family: 'monument'; src: url('../fonts/monumentextended-regular-webfont.eot'); src: url('../fonts/monumentextended-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/monumentextended-regular-webfont.woff2') format('woff2'), url('../fonts/monumentextended-regular-webfont.woff') format('woff'), url('../fonts/monumentextended-regular-webfont.ttf') format('truetype'), url('../fonts/monumentextended-regular-webfont.svg#monument_extendedregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'monument'; src: url('../fonts/monumentextended-bold-webfont.eot'); src: url('../fonts/monumentextended-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/monumentextended-bold-webfont.woff2') format('woff2'), url('../fonts/monumentextended-bold-webfont.woff') format('woff'), url('../fonts/monumentextended-bold-webfont.ttf') format('truetype'), url('../fonts/monumentextended-bold-webfont.svg#monument_extendedbold') format('svg'); font-weight: bold; font-style: normal; } @font-face { font-family: 'monument'; src: url('../fonts/monumentextended-light-webfont.eot'); src: url('../fonts/monumentextended-light-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/monumentextended-light-webfont.woff2') format('woff2'), url('../fonts/monumentextended-light-webfont.woff') format('woff'), url('../fonts/monumentextended-light-webfont.ttf') format('truetype'), url('../fonts/monumentextended-light-webfont.svg#monument_extendedlight') format('svg'); font-weight: 300; font-style: normal; } @font-face { font-family: 'monument'; src: url('../fonts/monumentextended-ultrabold-webfont.eot'); src: url('../fonts/monumentextended-ultrabold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/monumentextended-ultrabold-webfont.woff2') format('woff2'), url('../fonts/monumentextended-ultrabold-webfont.woff') format('woff'), url('../fonts/monumentextended-ultrabold-webfont.ttf') format('truetype'), url('../fonts/monumentextended-ultrabold-webfont.svg#monument_extendedultrabold') format('svg'); font-weight: 900; font-style: normal; } @font-face { font-family: 'monument'; src: url('../fonts/monumentextended-ultralight-webfont.eot'); src: url('../fonts/monumentextended-ultralight-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/monumentextended-ultralight-webfont.woff2') format('woff2'), url('../fonts/monumentextended-ultralight-webfont.woff') format('woff'), url('../fonts/monumentextended-ultralight-webfont.ttf') format('truetype'), url('../fonts/monumentextended-ultralight-webfont.svg#monument_extendedultralight') format('svg'); font-weight: 200; font-style: normal; } :root { /** @font family declaration */ --tp-ff-teko: 'Teko', serif; --tp-ff-body: 'Inter', sans-serif; --tp-ff-heading: 'Inter', sans-serif; --tp-ff-inter: 'Inter', sans-serif; --tp-ff-p: 'Inter', sans-serif; --tp-ff-besley: 'Besley', serif; --tp-ff-mango-thin: 'MangoGrotesqueThin', serif; --tp-ff-mango-light: 'MangoGrotesqueLight', serif; --tp-ff-mango: 'MangoGrotesque', serif; --tp-ff-mango-medium: 'MangoGrotesqueMed', serif; --tp-ff-mango-semibold: 'MangoGrotesqueSemBd', serif; --tp-ff-mango-bold: 'MangoGrotesque', serif; --tp-ff-clash-light: 'ClashDisplay-Light', serif; --tp-ff-clash-regular: 'ClashDisplay-Regular', serif; --tp-ff-clash-medium: 'ClashDisplay-Medium', serif; --tp-ff-clash-semibold: 'ClashDisplay-Semibold', serif; --tp-ff-clash-bold: 'ClashDisplay-Bold', serif; --tp-ff-grotesk: 'Space Grotesk', serif; --tp-ff-platform: 'Platform', serif; --tp-ff-playfair: 'Playfair Display', serif; --tp-ff-satisfy: 'Satisfy', cursive; --tp-monument: 'Monument', serif; --tp-ff-phudu: 'Phudu', serif; --tp-ff-poppins: 'Poppins', serif; --tp-ff-onest: 'Onest', serif; --tp-ff-fontawesome: "Font Awesome 6 Pro"; /** @color declaration */ --tp-common-white: #ffffff; --tp-common-black: #000000; --tp-common-black-2: #000000; --tp-common-black-3: #000000; --tp-common-black-4: #000000; --tp-common-black-5: #000000; --tp-common-black-6: #000000; --tp-common-black-7: #000000; --tp-common-black-8: #000000; --tp-common-black-9: #000000; --tp-common-black-10: #000000; --tp-common-cream: #f9f4e8; --tp-common-cream-2: #FFF6BF; --tp-common-cream-3: #ffffe6; --tp-common-yellow: #ffc446; --tp-common-yellow-1: #2fb677; --tp-common-yellow-green: #2fb677; --tp-common-green-light: #2fb677; --tp-common-green-regular: #2fb677; --tp-common-green-1: #2fb677; --tp-common-green-solid: #17312F; --tp-common-pink-light: #FDE1DA; --tp-common-paste: #43D4A0; --tp-common-paste-2: #0C5752; --tp-common-sky: #C5FCFC; --tp-common-red: #2fb677; --tp-common-red-2: #2fb677; --tp-common-red-3: #2fb677; --tp-common-blue: #7463FF; --tp-common-brown: #453030; --tp-grey-1: #f8f8f8; --tp-grey-2: #f1f1f1; --tp-grey-3: #F8F8FB; --tp-grey-4: #F6F8EF; --tp-coffe-1: #653624; --tp-coffe-2: #552411; --tp-cream-1: #B7AB98; --tp-cream-2: #CFC292; --tp-text-body: #2e2d2d; --tp-theme-green: #2fb677; --tp-theme-pink: #EC6FD5; --tp-theme-yellow: #FFB701; --tp-border-1: #EAEBED; --tp-border-2: #e7e7e7; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (min-width: 1400px) { .container { max-width: 1510px; } .container-1830 { max-width: 1830px; } .container-1750 { max-width: 1750px; } .container-1680 { max-width: 1680px; } .container-1580 { max-width: 1580px; } .container-1230 { max-width: 1230px; } } /*--------------------------------- typography css start ---------------------------------*/ body { font-size: 14px; line-height: 26px; font-weight: normal; color: var(--tp-text-body); font-family: var(--tp-ff-body); } img { max-width: 100%; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { margin-top: 0px; font-weight: 500; line-height: 1.2; -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -ms-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out; color: var(--tp-common-black); font-family: var(--tp-ff-heading); } h1 { font-size: 40px; } h2 { font-size: 36px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 20px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } p { font-weight: 400; font-size: 18px; line-height: 1.56; margin-bottom: 15px; letter-spacing: -0.02em; font-family: var(--tp-ff-p); color: var(--tp-text-body); } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea { outline: none; height: 60px; width: 100%; line-height: 60px; font-size: 16px; padding-left: 26px; padding-right: 26px; border-radius: 8px; background: rgb(246, 246, 249); color: var(--tp-common-black); border: 1px solid rgb(246, 246, 249); } input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: var(--tp-common-black); } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder { /* Firefox 19+ */ color: var(--tp-common-black); } input[type=text]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, input[type=number]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=url]:-moz-placeholder, textarea:-moz-placeholder { /* Firefox 4-18 */ color: var(--tp-common-black); } input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, textarea:-ms-input-placeholder { /* IE 10+ Edge*/ color: var(--tp-common-black); } input[type=text]::placeholder, input[type=email]::placeholder, input[type=tel]::placeholder, input[type=number]::placeholder, input[type=password]::placeholder, input[type=url]::placeholder, textarea::placeholder { /* MODERN BROWSER */ color: var(--tp-common-black); } input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus { border-color: var(--tp-common-black); } input[type=text]:focus::placeholder, input[type=email]:focus::placeholder, input[type=tel]:focus::placeholder, input[type=number]:focus::placeholder, input[type=password]:focus::placeholder, input[type=url]:focus::placeholder, textarea:focus::placeholder { opacity: 0; } textarea { line-height: 1.4; padding-top: 17px; padding-bottom: 17px; } input[type=color] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } *::-moz-placeholder { color: var(--tp-common-black); font-size: 14px; opacity: 1; } *::placeholder { color: var(--tp-common-black); font-size: 14px; opacity: 1; } .tp-line-white { display: inline; transition: all 0.3s linear; background-repeat: no-repeat; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .tp-line-white.green { background-position: 100% 100%, 0 75%; background-image: linear-gradient(currentcolor, currentcolor), linear-gradient(currentcolor, currentcolor); } .tp-line-white:hover { background-size: 0% 1px, 100% 1px; } .tp_img_reveal { visibility: hidden; overflow: hidden; } /*--------------------------------- 1.2 Common Classes ---------------------------------*/ .fix { overflow: hidden; } .clear { clear: both; } .z-index-2 { position: relative; z-index: 2; } .z-index-5 { position: relative; z-index: 5; } .gx-40 { --bs-gutter-x: 40px; } .p-relative { position: relative; } /* dropcap */ /*----------------------------------------*/ /* 2.1 Back to top /*----------------------------------------*/ .back-to-top-wrapper { position: fixed; right: 50px; bottom: 0; height: 44px; width: 44px; cursor: pointer; display: block; border-radius: 50%; z-index: 99; opacity: 0; visibility: hidden; } @media (max-width: 767px) { .back-to-top-wrapper { right: 20px; bottom: 20px; } } .back-to-top-wrapper.back-to-top-btn-show { visibility: visible; opacity: 1; bottom: 50px; } .back-to-top-btn { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; border-radius: 50%; color: var(--tp-common-black); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: var(--tp-common-white); box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3); } .back-to-top-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .back-to-top-btn:hover { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } /*----------------------------------------*/ /* 2.2 Buttons /*----------------------------------------*/ .tp-btn-black { position: relative; display: inline-block; } .tp-btn-black-text { font-size: 16px; font-weight: 500; padding: 7px 22px; border-radius: 9999px; color: var(--tp-common-white); background-color: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-btn-black-text { font-size: 14px; padding: 7px 17px; } } @media (max-width: 767px) { .tp-btn-black-text { font-size: 15px; padding: 7px 13px; } } .tp-btn-black-filter-blur { position: absolute; top: 0; left: 0; } .tp-btn-black-circle { width: 36px; height: 36px; line-height: 32px; margin-left: -4px; text-align: center; border-radius: 9999px; transition-duration: 0.9s; background: var(--tp-common-black); transition-timing-function: cubic-bezier(0.135, 0.9, 0.15, 1); } .tp-btn-black-circle > svg { width: 14px; margin-left: 3px; color: var(--tp-common-white); transform: translateX(-2px); } .tp-btn-black:hover .tp-btn-black-circle { transform: translateX(12px) rotate(45deg); } .tp-btn-black.btn-green-light-bg .tp-btn-black-text { color: var(--tp-common-black); background-color: var(--tp-common-green-light); } .tp-btn-black.btn-green-light-bg .tp-btn-black-circle { background-color: var(--tp-common-green-light); } .tp-btn-black.btn-green-light-bg .tp-btn-black-circle svg { color: var(--tp-common-black); } .tp-btn-sky-border { font-weight: 600; font-size: 16px; line-height: 1; display: inline-block; letter-spacing: -0.02em; color: #00d084; border: 1.5px solid #00d084; border-radius: 50px; padding: 22px 36px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-btn-sky-border { padding: 17px 25px; } } @media (max-width: 767px) { .tp-btn-sky-border { padding: 16px 25px; } } .tp-btn-sky-border:hover { background-color: #00d084; color: var(--tp-common-black); } .tp-btn-sky-border.solid-bg { color: var(--tp-common-black); background-color: #00d084; } .tp-btn-sky-border.solid-bg:hover { color: var(--tp-common-sky); background-color: transparent; } .tp-btn-yellow-green { border-radius: 10px; padding: 16px 24px; font-weight: 600; font-size: 14px; line-height: 1; display: inline-block; letter-spacing: -0.01em; text-transform: uppercase; color: var(--tp-common-black-9); background-color: var(--tp-common-yellow-green); } .tp-btn-yellow-green span { position: relative; z-index: 1; overflow: hidden; display: inline-block; } .tp-btn-yellow-green span span.text-1 { position: relative; display: block; transition: 0.3s; } .tp-btn-yellow-green span span.text-2 { position: absolute; top: 100%; display: block; transition: 0.3s; } .tp-btn-yellow-green.lg { font-size: 16px; padding: 22px 28px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-btn-yellow-green.lg { font-size: 14px; padding: 17px 20px; } } .tp-btn-yellow-green:hover { color: var(--tp-common-black); } .tp-btn-yellow-green:hover span span.text-1 { -webkit-transform: translateY(-150%); transform: translateY(-150%); } .tp-btn-yellow-green:hover span span.text-2 { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tp-btn-yellow-green:focus { color: var(--tp-common-black); } /* Glow Border Animation */ /*----------------------------------------*/ /* 2.3 Animations /*----------------------------------------*/ @keyframes rotate2 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes animationglob { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes lqdItiImgOut { 0% { transform: translateY(0) scale(1); } to { transform: translateY(100%) scale(1.15); } } @keyframes hero-circle-2 { 0% { -webkit-transform: translateX(1000px); -moz-transform: translateX(1000px); -ms-transform: translateX(1000px); -o-transform: translateX(1000px); transform: translateX(1000px); } 100% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @keyframes hero-circle-3 { 0% { -webkit-transform: translateX(500px); -moz-transform: translateX(500px); -ms-transform: translateX(500px); -o-transform: translateX(500px); transform: translateX(500px); } 100% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @keyframes move1 { 0% { bottom: -300px; left: -300px; } 30% { bottom: 100px; left: 300px; } 60% { bottom: 200px; left: 600px; } 100% { bottom: -300px; left: 1200px; } } @keyframes move1-reverse { 0% { bottom: -150px; left: 1400px; } 40% { bottom: 50px; left: 600px; } 70% { bottom: 200px; left: 300px; } 100% { bottom: -150px; left: -150px; } } @keyframes animate-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2), 0 0 0 0 rgba(255, 255, 255, 0.2); } 40% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 255, 255, 0.2); } 80% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } } @keyframes animate-pulse-2 { 0% { box-shadow: 0 0 0 0 rgba(255, 246, 105, 0.1), 0 0 0 0 rgba(255, 246, 105, 0.1); } 40% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 0 rgba(255, 246, 105, 0.1); } 80% { box-shadow: 0 0 0 50px rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 109, 74, 0), 0 0 0 30px rgba(255, 109, 74, 0); } } @keyframes rotate { 100% { transform: translate(-50%, -50%) rotate(1turn); } } @keyframes marquee-horizontal { from { transform: translateX(0); } to { transform: translateX(-100%); } } @-webkit-keyframes video-border { 0% { transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @-moz-keyframes video-border { 0% { transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @-ms-keyframes video-border { 0% { transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @keyframes video-border { 0% { transform: translate(-50%, -50%) scale(1); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } } @keyframes scroll-up-down { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes scroll1 { 0% { top: 0px; } 100% { top: 100%; } } @keyframes scroll2 { 0% { top: 0px; } 100% { top: 100%; } } @keyframes transform { 0% { transform: scale(0.5); opacity: 0.8; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0.8; } } @keyframes dash { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 0; } } @-webkit-keyframes tp_zoom_in_out { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @-moz-keyframes tp_zoom_in_out { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @-ms-keyframes tp_zoom_in_out { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @keyframes tp_zoom_in_out { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } 50% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @keyframes scroll_anim { 0% { transform: translateY(0); } 50% { transform: translateY(10px); } 100% { transform: translateY(0); } } @keyframes loadingAnimation { to { transform: rotate(-360deg); } } @keyframes roteted { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes headerSlideDown { 0% { margin-top: -150px; } 100% { margin-top: 0; } } @keyframes bar_anim { 0%, 100% { -webkit-clip-path: inset(-2px 0); clip-path: inset(-2px 0); } 42% { -webkit-clip-path: inset(-2px 0 -2px 100%); clip-path: inset(-2px 0 -2px 100%); } 43% { -webkit-clip-path: inset(-2px 100% -2px 0); clip-path: inset(-2px 100% -2px 0); } } @keyframes scrollText { from { transform: translateX(0%); } to { transform: translateX(-50%); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @-moz-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @-ms-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } /*----------------------------------------*/ /* 2.4 Preloader /*----------------------------------------*/ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; background-color: var(--tp-theme-green); } .preloader { width: 50px; height: 50px; display: inline-block; padding: 0px; text-align: left; box-sizing: border-box; position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; } .preloader span { position: absolute; display: inline-block; width: 50px; height: 50px; border-radius: 100%; background: var(--tp-common-black); animation: preloader 1.3s linear infinite; -webkit-animation: preloader 1.3s linear infinite; } .preloader span:last-child { animation-delay: -0.9s; -webkit-animation-delay: -0.9s; } @keyframes preloader { 0% { transform: scale(0, 0); opacity: 0.5; } 100% { transform: scale(1, 1); opacity: 0; } } @-webkit-keyframes preloader { 0% { -webkit-transform: scale(0, 0); opacity: 0.5; } 100% { -webkit-transform: scale(1, 1); opacity: 0; } } /*--- end of preloader ---*/ /*----------------------------------------*/ /* 2.5 Background /*----------------------------------------*/ .black-bg-7 { background-color: var(--tp-common-black-7); } .black-bg-8 { background-color: var(--tp-common-black-8); } /*----------------------------------------*/ /* 2.6 Nice Select /*----------------------------------------*/ /*----------------------------------------*/ /* 2.7 Breadcrumb /*----------------------------------------*/ /*----------------------------------------*/ /* 2.8 Accordion /*----------------------------------------*/ /*----------------------------------------*/ /* 2.9 Section Title /*----------------------------------------*/ .tp-section-subtitle { font-weight: 400; font-size: 18px; line-height: 1; display: inline-block; text-transform: uppercase; color: var(--tp-common-black); } .tp-section-subtitle.pre::before { content: ""; height: 8px; width: 8px; margin-right: 12px; border-radius: 4px; display: inline-block; transform: translateY(-2px); background-color: var(--tp-common-red-3); } .tp-section-subtitle.fs-17 { font-weight: 400; font-size: 17px; line-height: 1; text-transform: capitalize; color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-section-subtitle.fs-17 { display: inline-block; margin-bottom: 15px; } } .tp-section-subtitle.fs-17.pre-circle::before { content: ""; height: 8px; width: 8px; margin-right: 12px; border-radius: 50%; display: inline-block; transform: translateY(-2px); background-color: var(--tp-common-white); } .tp-section-subtitle.st { font-weight: 500; color: #494949; margin-bottom: 20px; } .tp-section-title { font-size: 80px; font-weight: 700; line-height: 1; letter-spacing: -0.08em; text-transform: uppercase; } @media only screen and (min-width: 1701px) and (max-width: 1800px) { .tp-section-title { font-size: 70px; } } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-section-title { font-size: 60px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-section-title { font-size: 50px; } } @media (max-width: 767px) { .tp-section-title { font-size: 42px; } } .tp-section-title.fs-64 { font-weight: 600; font-size: 64px; line-height: 1.1; letter-spacing: -0.02em; text-transform: capitalize; color: var(--tp-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-section-title.fs-64 { font-size: 55px; } } @media (max-width: 767px) { .tp-section-title.fs-64 { font-size: 42px; } } .tp-section-title.fs-44 { font-weight: 600; font-size: 44px; line-height: 1.18; margin-bottom: 0; letter-spacing: -0.03em; text-transform: capitalize; color: var(--tp-common-white); } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-section-title.fs-44 { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-section-title.fs-44 { font-size: 38px; } .tp-section-title.fs-44 br { display: none; } } .tp-revel-line { overflow: hidden; } /*----------------------------------------*/ /* 2.11 Search /*----------------------------------------*/ .tp-search-area { position: fixed; left: 0; top: 0; width: 100%; opacity: 0; height: 300px; visibility: hidden; background: var(--tp-common-white); -webkit-transform: translateY(calc(-100% - 80px)); -moz-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); -o-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); transition: all 0.5s ease-in-out 0s, visibility 0.5s ease-in-out; animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; z-index: 99999; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .tp-search-area::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } .tp-search-area.opened { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .tp-search-close-btn { position: relative; height: 50px; width: 50px; z-index: 2; line-height: 1; border-radius: 50%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: transparent; color: var(--tp-common-black); border: 1px solid rgba(22, 22, 19, 0.1); } .tp-search-close-btn svg { height: 12px; width: 12px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .tp-search-close-btn:hover svg { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /*----------------------------------------*/ /* 2.12 Magic Cursor /*----------------------------------------*/ body.tp-magic-cursor #magic-cursor { display: block; } #magic-cursor { position: absolute; display: none; width: 10px; height: 10px; pointer-events: none; z-index: 99999; opacity: 0; top: 0; left: 0; } #ball { position: fixed; display: flex; align-items: center; pointer-events: none; border-radius: 50%; color: transparent; justify-content: center; mix-blend-mode: difference; background-color: var(--tp-common-black); } .cursor-bg-red #ball { background-color: #FF535B !important; } .cursor-bg-red #ball .ball-view { color: var(--tp-common-white); } .cursor-bg-red-2 #ball { background-color: #FF481F !important; } .cursor-bg-red-2 #ball .ball-view { color: var(--tp-common-white); } .cursor-bg-yellow #ball { background-color: #FFF669 !important; } .cursor-bg-yellow #ball .ball-view { color: var(--tp-common-black); } .cursor-white-bg #ball .ball-view { color: var(--tp-common-black); } /* Ball view ============= */ #ball .ball-view { position: absolute; opacity: 0; visibility: hidden; padding: 0 5px; font-size: 15px; font-weight: 500; line-height: 1.3; text-align: center; transform: scale(0); color: var(--tp-common-black); } /* Ball drag ============= */ #ball.with-blur { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Ball close ============== */ .tp-magnetic-wrap { display: flex; align-items: center; justify-content: center; } /* HEADER CSS */ /*----------------------------------------*/ /* 3.1 Header Style /*----------------------------------------*/ .header-transparent { position: absolute; top: 0; left: 0; right: 0; z-index: 9; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-header-ptb { padding: 10px 0; } } .tp-header-menu > nav > ul > li { margin: 0 20px; list-style-type: none; display: inline-block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-menu > nav > ul > li { margin: 0 15px; } } .tp-header-menu > nav > ul > li > a { padding: 35px 0; font-weight: 500; font-size: 17px; display: inline-block; letter-spacing: -0.01em; color: var(--tp-common-white); } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-header-box { padding-right: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-box { padding-right: 0px; } } .tp-header-logo img { max-width: inherit; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-header-logo { padding-left: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-logo { padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-header-logo { padding: 10px 0; } } .tp-header-8-bar { transition: 0.3s; padding: 8px 22px; margin-right: 18px; border-radius: 24px; display: inline-block; border: 1px solid rgba(25, 25, 25, 0.1); } .tp-header-8-bar:hover { border-color: var(--tp-common-red-2); background-color: var(--tp-common-red-2); } .tp-header-8-bar:hover span { color: var(--tp-common-white); } .tp-header-8-bar span { line-height: 1; transition: 0.3s; font-size: 15px; letter-spacing: -0.01em; text-transform: uppercase; color: var(--tp-common-black); font-family: var(--tp-ff-clash-medium); } .tp-header-8-bar span svg { margin-left: 7px; } .tp-header-14-bar-wrap .tp-header-8-bar { margin-right: 0; padding: 8px 18px; border: 1px solid rgba(255, 255, 255, 0.1); } .tp-header-14-bar-wrap .tp-header-8-bar:hover { background-color: var(--tp-common-white); } .tp-header-14-bar-wrap .tp-header-8-bar:hover span { color: var(--tp-common-black); } .tp-header-14-bar-wrap .tp-header-8-bar span { font-size: 14px; font-weight: 700; letter-spacing: -0.14px; text-transform: uppercase; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } .tp-header-inner-style .tp-header-menu > nav > ul { padding: 0 10px; border-radius: 30px; display: inline-block; background-color: rgb(246, 246, 249); } .tp-header-inner-style .tp-header-menu > nav > ul > li > a { padding: 10px 0; color: var(--tp-common-black); } .tp-header-inner-style .tp-header-dropdown nav ul li.has-dropdown::after { color: var(--tp-common-black); } .tp-header-inner-style .tp-header-dropdown nav ul li .tp-submenu { top: 110%; } .tp-header-inner-style .tp-header-14-bar-wrap .tp-header-8-bar { border: 0; background-color: rgb(246, 246, 249); } .tp-header-inner-style .tp-header-14-bar-wrap .tp-header-8-bar span { color: var(--tp-common-black); } .tp-header-inner-style .tp-header-14-bar-wrap .tp-header-8-bar:hover { background-color: var(--tp-common-black); } .tp-header-inner-style .tp-header-14-bar-wrap .tp-header-8-bar:hover span { color: var(--tp-common-white); } .tp-header-inner-style.header-inner-white .tp-header-menu > nav > ul { background-color: #000; } .tp-header-inner-style.header-inner-white .tp-header-menu > nav > ul > li > a { color: #BFBFC0; } .tp-header-inner-style.header-inner-white .tp-header-menu > nav > ul > li:hover > a { color: var(--tp-common-white); } .tp-header-inner-style.header-inner-white .tp-header-dropdown > nav > ul > li.has-dropdown::after { color: #BFBFC0; } .tp-header-inner-style.header-inner-white .tp-header-dropdown > nav > ul > li:hover.has-dropdown::after { color: var(--tp-common-white); } .tp-header-inner-style.header-inner-white .tp-header-14-bar-wrap .tp-header-8-bar { background-color: #000; } .tp-header-inner-style.header-inner-white .tp-header-14-bar-wrap .tp-header-8-bar span { color: var(--tp-common-white); } .tp-header-inner-style.header-inner-white .tp-header-14-bar-wrap .tp-header-8-bar:hover { background-color: var(--tp-common-white); } .tp-header-inner-style.header-inner-white .tp-header-14-bar-wrap .tp-header-8-bar:hover span { color: var(--tp-common-black); } .header-lang-submenu { position: absolute; top: 110%; right: 0px; width: 120px; z-index: 9; opacity: 0; padding: 15px 20px; visibility: hidden; background: #4D3D30; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; box-shadow: 0 30px 70px 6px rgba(11, 6, 70, 0.08); } .header-lang-submenu li { list-style: none; } .header-lang-submenu li a { font-size: 13px; text-transform: capitalize; color: var(--tp-common-white); } .header-lang-submenu.open { top: 100%; opacity: 1; visibility: visible; } /*----------------------------------------*/ /* 4.1 Main Menu /*----------------------------------------*/ .header-sticky { position: fixed; top: 0; left: 0; right: 0; opacity: 1; width: 100%; z-index: 10; visibility: visible; background: rgba(38, 37, 40, 0.9); box-shadow: 0 2px 6px 0 rgba(19, 19, 22, 0.08); animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; -webkit-animation: 0.95s ease 0s normal forwards 1 running headerSlideDown; } .header-sticky .tp-header-menu > nav > ul > li > a { padding: 22px 0; } .header-sticky.tp-header-blur::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; backdrop-filter: blur(40px); z-index: -1; } .header-sticky .tp-header-logo { padding: 0; } .header-sticky.tp-header-inner-style .tp-header-menu > nav > ul { padding: 0; border-radius: 0; display: inline-block; margin-bottom: 0; background-color: transparent; } .header-sticky.tp-header-inner-style .tp-header-dropdown nav > ul > li .tp-submenu { top: 104%; } .header-sticky.tp-header-inner-style .tp-header-dropdown nav > ul > li .tp-submenu li .tp-submenu { top: 0; } .tp-header-dropdown nav ul li { position: relative; list-style: none; } .tp-header-dropdown nav ul li.p-static { position: static; } .tp-header-dropdown nav ul li.has-dropdown::after { content: ""; width: 7px; height: 7px; margin-left: 7px; display: inline-block; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--tp-common-white); transform: translateY(-2px) rotate(45deg); transition: all 0.3s 0s ease-out; } .tp-header-dropdown nav ul li.has-dropdown:hover::after { transform: translateY(2px) rotate(225deg); } .tp-header-dropdown nav ul li .tp-submenu { position: absolute; top: 100%; left: 0; width: 260px; z-index: 99; opacity: 0; padding: 12px 0; transition: 0.5s; text-align: start; visibility: hidden; border-radius: 14px; transform-origin: 0 0; transform: scale(1, 0); backdrop-filter: blur(40px); background: rgba(38, 37, 40, 0.9); box-shadow: 0 20px 30px -8px rgba(19, 19, 22, 0.1); } .tp-header-dropdown nav ul li .tp-submenu li { width: 100%; padding: 0 12px; border-radius: 8px; } .tp-header-dropdown nav ul li .tp-submenu li a { position: relative; border-radius: 8px; font-weight: 500; font-size: 16px; line-height: 1; color: #bfbfc0; padding: 12px 18px; display: inline-block; letter-spacing: -0.01em; text-align: start; width: 100%; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-header-dropdown nav ul li .tp-submenu li a { font-size: 14px; } } .tp-header-dropdown nav ul li .tp-submenu li .tp-submenu { top: 0; left: 100%; } .tp-header-dropdown nav ul li .tp-submenu li:hover > a { background-color: #2c2b2e; color: var(--tp-common-white); } .tp-header-dropdown nav ul li .tp-submenu li.menu-item-has-children > a { display: flex; align-items: center; justify-content: space-between; } .tp-header-dropdown nav ul li .tp-submenu li.menu-item-has-children > a::after { content: "\f107"; font-size: 16px; font-weight: 400; margin-left: 2px; color: #bfbfc0; display: inline-block; transform: rotate(-90deg); transition: all 0.3s 0s ease-out; font-family: var(--tp-ff-fontawesome); } .tp-header-dropdown nav ul li .tp-submenu li.menu-item-has-children:hover a::after { transform: rotate(0deg); color: var(--tp-common-white); } .tp-header-dropdown nav ul li:hover > .tp-submenu { visibility: visible; opacity: 1; transform: scale(1); } /*----------------------------------------*/ /* 4.2 Mobile Menu /*----------------------------------------*/ .tp-offcanvas-menu { margin-bottom: 80px; } .tp-offcanvas-menu ul { list-style: none; } .tp-offcanvas-menu ul li { position: relative; } .tp-offcanvas-menu ul li > a { padding: 10px 0; display: block; font-size: 20px; font-weight: 500; } .tp-offcanvas-menu ul li.active > a { color: var(--tp-common-red-3); } .tp-offcanvas-menu ul li.active > .tp-menu-close i, .tp-offcanvas-menu ul li.active > .tp-menu-close .eris-submenu-plus { top: 10px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); } .tp-offcanvas-menu ul li .submenu { display: none; } .tp-offcanvas-menu ul li .submenu .submenu { margin-left: 30px; } .tp-offcanvas-menu .mega-menu { width: auto; opacity: 1; visibility: visible; transition: none; position: static; display: none; -webkit-transform: perspective(0) rotateX(0); -moz-transform: perspective(0) rotateX(0); -ms-transform: perspective(0) rotateX(0); -o-transform: perspective(0) rotateX(0); transform: perspective(0) rotateX(0); } .tp-offcanvas-menu .tp-submenu li a { padding: 8px 20px; border-radius: 10px; font-size: 17px; } .tp-offcanvas-menu .tp-submenu li a:hover { background-color: #f8f8fb; color: var(--tp-common-black); } .tp-menu-close { position: absolute; right: 7px; top: 12px; } .tp-menu-close i { transition: all 0.3s; font-size: 18px; font-weight: 500; } .tp-menu-close .eris-submenu-plus { display: inline-block; font-family: Arial, sans-serif; font-size: 18px; line-height: 1; transition: transform 0.3s; } .menu-item-has-children .tp-menu-close { right: 14px; top: 9px; } /*----------------------------------------*/ /* 4.3 offcanvas Menu /*----------------------------------------*/ .body-overlay { position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: 0.45s ease-in-out; background: rgba(24, 24, 24, 0.4); } .body-overlay.opened { opacity: 1; visibility: visible; } .tp-offcanvas-wrapper { position: fixed; top: 0; right: 0; width: 450px; height: 100vh; z-index: 999; padding: 50px 50px; overflow-y: scroll; transition: all 0.3s; background: #FFF; overscroll-behavior-y: contain; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); } @media (max-width: 767px) { .tp-offcanvas-wrapper { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-offcanvas-wrapper { width: 450px; } } .tp-offcanvas-wrapper .logo-2 { display: none; } .tp-offcanvas-wrapper.offcanvas-black-bg { background: #000; } .tp-offcanvas-wrapper.offcanvas-black-bg .logo-1 { display: none; } .tp-offcanvas-wrapper.offcanvas-black-bg .logo-2 { display: block !important; } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-close-btn { color: var(--tp-common-white); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-menu ul li > a { color: var(--tp-common-white); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-menu ul li.active > a { color: var(--tp-common-red-3); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-menu .tp-submenu li a:hover { background-color: #2c2b2e; color: var(--tp-common-white); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-menu-close i { color: var(--tp-common-white); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-title.sm { color: var(--tp-common-white); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-contact ul li a { color: rgba(255, 255, 255, 0.8); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-contact ul li a:hover { color: var(--tp-common-white); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-contact ul li a::after { background-color: var(--tp-common-white); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-title { color: var(--tp-common-white); } .tp-offcanvas-wrapper.offcanvas-black-bg .tp-offcanvas-content p { color: rgba(255, 255, 255, 0.8); } .tp-offcanvas-area.opened .tp-offcanvas-wrapper { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .tp-offcanvas-top { margin-bottom: 90px; } .tp-offcanvas-close-btn { color: black; } .tp-offcanvas-close-btn:hover { opacity: 1; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .tp-offcanvas-content { margin-bottom: 45px; } .tp-offcanvas-content p { font-size: 16px; font-weight: 400; line-height: 24px; color: #414144; } .tp-offcanvas-title { font-size: 40px; line-height: 1; letter-spacing: -0.8px; font-weight: 700; margin-bottom: 15px; color: var(--tp-common-black); } .tp-offcanvas-title.sm { font-size: 20px; font-weight: 700; margin-bottom: 15px; text-transform: uppercase; color: var(--tp-common-black); } .tp-offcanvas-contact { margin-bottom: 55px; } .tp-offcanvas-contact ul li { list-style: none; } .tp-offcanvas-contact ul li:not(:last-child) { margin-bottom: 2px; } .tp-offcanvas-contact ul li a { display: inline-block; color: #414144; font-size: 16px; position: relative; } .tp-offcanvas-contact ul li a::after { position: absolute; bottom: 2px; right: 0; width: 0; height: 1px; content: ""; transition: 0.4s; background-color: #1e1e1e; } .tp-offcanvas-contact ul li a:hover { color: var(--tp-common-black); } .tp-offcanvas-contact ul li a:hover::after { width: 100%; right: auto; left: 0; } .tp-offcanvas-2-area { position: relative; } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a { font-weight: 700; font-size: 50px; line-height: 1; color: #717172; letter-spacing: -0.02em; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a { font-size: 35px; } } @media (max-width: 767px) { .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a { font-size: 30px; } } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a::after { position: absolute; left: 0; top: 3px; font-weight: 500; font-size: 13px; content: "0" counter(count); counter-increment: count; color: rgba(113, 113, 114, 0.8); } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li.is-active > a { color: var(--tp-common-white); } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li.is-active .tp-menu-close i { color: var(--tp-common-white); } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > ul > li > a { font-weight: 600; font-size: 30px; line-height: 1; transition: 0.3s; color: #717172; letter-spacing: -0.02em; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > ul > li > a { font-size: 20px; } } .tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > ul > li > a:hover { transform: translateX(15px); color: var(--tp-common-white); } .tp-offcanvas-2-area .tp-offcanvas-menu .tp-submenu li a:hover { background-color: initial; color: var(--tp-common-white); } .tp-offcanvas-2-area .tp-offcanvas-menu ul li:not(:last-child) > a { border-bottom: 0; } .tp-offcanvas-2-area .tp-offcanvas-menu ul li > a { padding: 0; padding-left: 30px; } .tp-offcanvas-2-area .tp-offcanvas-menu ul > li:not(:last-child) { margin-bottom: 45px; } .tp-offcanvas-2-area .tp-offcanvas-menu ul li .submenu { padding-left: 20px; margin-top: 40px; margin-bottom: 56px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-offcanvas-2-area .tp-offcanvas-menu ul li .submenu { padding-left: 0; } } .tp-offcanvas-2-area .tp-offcanvas-menu ul li .submenu li:not(:last-child) { margin-bottom: 30px; } .tp-offcanvas-2-close-btn { font-size: 14px; font-weight: 500; text-transform: uppercase; color: var(--tp-common-white); } .tp-offcanvas-2-close-btn .text { width: 60px; height: 20px; transition: 0.3s; overflow: hidden; display: inline-block; transform: translateY(4px); color: var(--tp-common-white); } .tp-offcanvas-2-close-btn .text span { transition: 0.3s; display: inline-block; -webkit-transform: translateX(120%); -moz-transform: translateX(120%); -ms-transform: translateX(120%); -o-transform: translateX(120%); transform: translateX(120%); } .tp-offcanvas-2-close-btn:hover .text span { transform: translateX(0%); } .tp-offcanvas-2-close-btn:hover span svg { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } /*----------------------------------------*/ /* 5.1 Postbox css /*----------------------------------------*/ .postbox-arrow-prev { position: absolute; top: 50%; left: 30px; z-index: 2; transform: translateY(-50%); } .postbox-arrow-next { position: absolute; top: 50%; right: 30px; z-index: 2; transform: translateY(-50%); } /*----------------------------------------*/ /* 5.2 Recent Post css /*----------------------------------------*/ /*----------------------------------------*/ /* 5.3 Sidebar css /*----------------------------------------*/ /*----------------------------------------*/ /* 5.4 Blog css /*----------------------------------------*/ .creative-blog-title-box { padding-left: 80px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-blog-title-box { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-blog-title-box { margin-bottom: 10px; } } .creative-blog-top-content { padding-left: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-blog-top-content { padding-left: 0; } } .creative-blog-top-content p { font-weight: 400; font-size: 17px; line-height: 1.53; margin-bottom: 25px; color: var(--tp-common-white); } @media (max-width: 767px) { .creative-blog-top-content p br { display: none; } } /*----------------------------------------*/ /* 6.1 Footer Style 1 /*----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-area { padding-top: 90px; } } @media (max-width: 767px) { .tp-footer-area { padding-top: 80px; } } .tp-footer-col-2 { padding-left: 150px; padding-right: 50px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-footer-col-2 { padding-left: 130px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-col-2 { padding-left: 55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-footer-col-2 { padding-left: 40px; padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-col-2 { padding-left: 0; padding-right: 0; } } @media (max-width: 767px) { .tp-footer-col-2 { padding-left: 0; padding-right: 0; } } .tp-footer-col-3 { padding-left: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-col-3 { padding-left: 0; } } @media (max-width: 767px) { .tp-footer-col-3 { padding: 0; } } .tp-footer-widget-title { font-weight: 700; font-size: 80px; line-height: 1; margin-bottom: 30px; letter-spacing: -0.06em; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-footer-widget-title { font-size: 75px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-footer-widget-title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-footer-widget-title { font-size: 65px; } .tp-footer-widget-title br { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 767px) { .tp-footer-widget-title { font-size: 50px; } } .tp-footer-widget-title-sm { font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: -0.02em; } .tp-footer-widget-title-sm.pre::before { content: ""; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; display: inline-block; transform: translateY(-2px); background-color: var(--tp-common-red-3); } .tp-footer-widget-social a { height: 42px; width: 42px; line-height: 39px; text-align: center; border-radius: 50%; display: inline-block; color: var(--tp-common-black); background-color: var(--tp-grey-2); margin-bottom: 8px; } .tp-footer-widget-social a:not(:last-child) { margin-right: 3px; } .tp-footer-widget-social a:hover { color: var(--tp-common-white); background-color: var(--tp-common-red-3); } .tp-footer-widget-menu ul li { list-style-type: none; display: inline-block; } .tp-footer-widget-menu ul li a { font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tp-common-black); border-radius: 20px; padding: 13px 20px; display: inline-block; margin-bottom: 8px; background-color: var(--tp-grey-2); } .tp-footer-widget-menu ul li a:hover { color: var(--tp-common-white); background-color: var(--tp-common-red-3); } .tp-footer-widget-info { margin-bottom: 15px; } .tp-footer-widget-info a { display: block; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--tp-common-black); } .tp-footer-widget-info a:hover { color: var(--tp-common-red-3); } .tp-footer-widget-info a:not(:last-child) { margin-bottom: 10px; } .tp-footer-text-color.tp-footer-style-6 .tp-footer-widget-title { color: var(--tp-common-white); } .tp-footer-text-color.tp-footer-style-6 .tp-footer-widget-info a { color: var(--tp-common-white); } .tp-footer-text-color.tp-footer-style-6 .tp-footer-widget-title-sm { color: var(--tp-common-white); } .tp-footer-text-color.tp-footer-style-6 .tp-copyright-left span { color: var(--tp-common-white); } .tp-footer-text-color.tp-footer-style-6 .tp-copyright-right a { color: var(--tp-common-white); } .tp-copyright-big-text { font-weight: 800; font-size: 259px; line-height: 1; letter-spacing: -16px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-copyright-big-text { font-size: 239px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-copyright-big-text { font-size: 194px; letter-spacing: -10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-copyright-big-text { font-size: 163px; letter-spacing: -7px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-copyright-big-text { font-size: 120px; letter-spacing: -7px; } } @media (max-width: 767px) { .tp-copyright-big-text { font-size: 50px; letter-spacing: -2px; } } .tp-copyright-left { padding-left: 330px; } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-copyright-left { padding-left: 290px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-copyright-left { padding-left: 255px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-copyright-left { padding-left: 215px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-copyright-left { padding-left: 0; } } .tp-copyright-left span { font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--tp-common-black); } .tp-copyright-right { padding-right: 40px; } @media (max-width: 767px) { .tp-copyright-right { padding-right: 0; } } .tp-copyright-right a { font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--tp-common-black); } .tp-copyright-right a:hover { color: var(--tp-common-red-3); } .tp-copyright-right a:not(:first-child) { margin-left: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-copyright-right a:not(:first-child) { margin-left: 20px; } } @media (max-width: 767px) { .tp-copyright-right a:not(:first-child) { margin-left: 0; margin: 0 8px; } } .tp-copyright-bottom { position: relative; margin-top: -30px; padding-bottom: 55px; z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-copyright-bottom { margin-top: 0; padding-bottom: 30px; } } @media (max-width: 767px) { .tp-copyright-bottom { margin-top: 0; padding-bottom: 20px; } } .text-scale-anim { white-space: pre-wrap; transform-origin: top left; } .tp-letter-span { display: inline-block; } .tp-word-span { display: inline-block; } .tp-footer-style-6 .tp-footer-widget-title { color: var(--tp-common-cream); } .tp-footer-style-6 .tp-footer-widget-title-sm { color: var(--tp-common-cream); } .tp-footer-style-6 .tp-footer-widget-title-sm.pre::before { background-color: var(--tp-common-red); } .tp-footer-style-6 .tp-footer-widget-social a { color: var(--tp-common-white); background-color: rgba(255, 255, 255, 0.06); } .tp-footer-style-6 .tp-footer-widget-social a:hover { color: var(--tp-common-white); background-color: var(--tp-common-red); } .tp-footer-style-6 .tp-footer-widget-info a { color: var(--tp-common-cream); } .tp-footer-style-6 .tp-footer-widget-info a:hover { color: var(--tp-common-red); } .tp-footer-style-6 .tp-footer-widget-menu ul li a { color: var(--tp-common-white); background-color: rgba(255, 255, 255, 0.06); } .tp-footer-style-6 .tp-footer-widget-menu ul li a:hover { color: var(--tp-common-white); background-color: var(--tp-common-red); } .tp-copyright-style-6 .tp-copyright-big-text { color: var(--tp-common-red); } .tp-copyright-style-6 .tp-copyright-left span { color: var(--tp-common-cream); } .tp-copyright-style-6 .tp-copyright-right a { color: var(--tp-common-cream); } .tp-copyright-style-6 .tp-copyright-right a:hover { color: var(--tp-common-red); } /*----------------------------------------*/ /* 6.2 Footer Style 2 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.3 Footer Style 3 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.5 Footer Style 5 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.7 Footer Style 7 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.8 Footer Style 8 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.9 Footer Style 9 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.10 Footer Style 10 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.11 Footer Style 11 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.12 Footer Style 12 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.13 Footer Style 13 /*----------------------------------------*/ .cr-footer-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cr-footer-bg img { height: 100%; } /*----------------------------------------*/ /* 6.14 Footer Style 14 /*----------------------------------------*/ /*----------------------------------------*/ /* 6.15 Footer Style 15 /*----------------------------------------*/ /*----------------------------------------*/ /* 7.1 Hero css /*----------------------------------------*/ @media (max-width: 767px) { .tp-hero-2-area { padding-bottom: 0; } } .design-hero-ptb { padding-top: 250px; padding-bottom: 70px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .design-hero-ptb { padding-top: 200px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .design-hero-ptb { padding-top: 180px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .design-hero-ptb { padding-top: 220px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .design-hero-ptb { padding-top: 160px; } } @media (max-width: 767px) { .design-hero-ptb { padding-top: 160px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .design-hero-ptb { padding-top: 190px; } } .design-hero-slide-active .swiper-slide { width: auto; } .design-hero-marquee { width: 100%; overflow: hidden; } .eris-hero-ticker { display: block; width: 100%; height: 280px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .eris-hero-ticker { height: 230px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .eris-hero-ticker { height: 196px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .eris-hero-ticker { height: 207px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .eris-hero-ticker { height: 161px; } } @media (max-width: 767px) { .eris-hero-ticker { height: 115px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .eris-hero-ticker { height: 150px; } } .design-hero-circle-1 { position: absolute; top: -25%; left: -6%; height: 600px; width: 600px; filter: blur(70px); -webkit-filter: blur(70px); border-radius: 50%; display: inline-block; background-color: #007a4c; } .design-hero-circle-2 { position: absolute; bottom: -50%; right: -8%; height: 800px; width: 800px; filter: blur(140px); -webkit-filter: blur(140px); border-radius: 50%; display: inline-block; background-color: #007a4c; } .design-hero-content p { font-weight: 500; font-size: 24px; line-height: 1.3; color: #e0eeee; margin-bottom: 35px; letter-spacing: -0.02em; } @media (max-width: 767px) { .design-hero-content p { font-size: 17px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .design-hero-content p { font-size: 19px; } .design-hero-content p br { display: none; } } @media (max-width: 767px) { .design-hero-content-wrap { margin-bottom: 60px; } } @media (max-width: 767px) { .design-hero-social { margin-bottom: 20px; } } .design-hero-social a { font-weight: 600; font-size: 14px; line-height: 1; color: #e0eeee; text-transform: uppercase; position: relative; } .design-hero-social a:not(:last-child) { padding-right: 20px; margin-right: 20px; } .design-hero-social a:not(:last-child)::after { position: absolute; content: ""; top: 0; right: 0; width: 1px; height: 16px; background-color: #e0eeee; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .design-hero-wrap { margin-bottom: 50px; } } .content__img { width: 250px; aspect-ratio: 1.1; border-radius: 10px; position: absolute; top: 0; left: 0; opacity: 0; overflow: hidden; will-change: transform, filter; } .content__img-inner { background-position: 50% 50%; width: calc(100% + 20px); height: calc(100% + 20px); background-size: cover; position: absolute; top: -10px; left: -10px; } .ai-hero-slider-2 { transform: scale(1, -1); } .ai-hero-slider-2 img { transform: scale(1, -1); } .box { display: inline-flex; } .box .eye { position: relative; width: 74px; height: 74px; display: block; background: var(--tp-common-yellow-green); margin: 0 5px; border-radius: 50%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .box .eye { width: 64px; height: 64px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .box .eye { width: 54px; height: 54px; } } .box .eye:before { content: ""; position: absolute; top: 50%; left: 22px; width: 30px; height: 30px; border-radius: 50%; background: #17312f; transform: translate(-50%, -50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .box .eye:before { width: 25px; height: 25px; } } .tp-image-distortion { overflow: hidden; height: 100%; position: relative; } .tp-image-distortion canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } /*----------------------------------------*/ /* 7.2 About Css /*----------------------------------------*/ /*----------------------------------------*/ /* 7.3 Banner Css /*----------------------------------------*/ .ar-banner-shape img { max-width: inherit; } /*----------------------------------------*/ /* 7.4 Text-slide Css /*----------------------------------------*/ .tp-text-slide-active .swiper-slide { width: auto; } .des-text-item span { position: relative; padding-right: 80px; margin-right: 40px; font-weight: 600; font-size: 300px; line-height: 1; white-space: nowrap; text-transform: uppercase; color: var(--tp-common-cream); font-family: var(--tp-ff-mango); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .des-text-item span { font-size: 240px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .des-text-item span { font-size: 235px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .des-text-item span { font-size: 200px; } } @media (max-width: 767px) { .des-text-item span { font-size: 100px; } } .des-text-item span::after { position: absolute; content: ""; top: 75px; right: 0; width: 40px; height: 40px; border-radius: 50%; background-color: #fb4566; } @media (max-width: 767px) { .des-text-item span::after { top: 24px; } } .des-text-item.sm { margin-bottom: 160px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .des-text-item.sm { margin-bottom: 80px; } } .des-text-item.sm span { font-weight: 300; font-size: 160px; line-height: 1; transition: 0.3s; text-transform: capitalize; color: rgba(249, 244, 232, 0.1); font-family: var(--tp-ff-mango-light); } @media (max-width: 767px) { .des-text-item.sm span { font-size: 115px; } } .des-text-item.sm span::after { top: 50px; opacity: 0.1; transition: 0.3s; } @media (max-width: 767px) { .des-text-item.sm span::after { top: 30px; } } .des-text-moving-top.active .des-text-item.sm span { color: var(--tp-common-cream); } .des-text-moving-top.active .des-text-item.sm span::after { opacity: 1; } .ai-text-slider-active { padding: 50px 0; } .ai-text-slider-active .swiper-slide { width: auto; } .crp-text-slider-active { padding-top: 160px; padding-bottom: 150px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .crp-text-slider-active { padding-top: 70px; } } @media (max-width: 767px) { .crp-text-slider-active { padding-top: 55px; padding-bottom: 60px; } } .crp-text-slider-active .swiper-slide { width: auto; } /*----------------------------------------*/ /* 7.5 Service Css /*----------------------------------------*/ @media (max-width: 767px) { .creative-service-content { flex-wrap: wrap; } } .creative-service-content > span { font-weight: 500; font-size: 16px; line-height: 1; min-width: 125px; display: inline-block; letter-spacing: -0.04em; transform: translateY(18px); color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .creative-service-content > span { min-width: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .creative-service-content > span { min-width: 50px; } } @media (max-width: 767px) { .creative-service-content > span { min-width: auto; margin-bottom: 30px; } } .creative-service-title { font-weight: 400; font-size: 134px; line-height: 1; margin-bottom: 20px; letter-spacing: -0.04em; color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .creative-service-title { font-size: 105px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .creative-service-title { font-size: 110px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .creative-service-title { font-size: 80px; } } @media (max-width: 767px) { .creative-service-title { font-size: 70px; } } .creative-service-title a { background: linear-gradient(#2fb677, #2fb677) left no-repeat, #fff; background-size: 0% 100%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; transition: 0.5s ease-in-out; padding-right: 15px; } .creative-service-category span { font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .creative-service-category span { font-size: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .creative-service-category span { font-size: 13px; } } .creative-service-category span:not(:last-child) { padding-right: 13px; margin-right: 13px; position: relative; } .creative-service-category span:not(:last-child)::before { position: absolute; top: 5px; right: -3px; content: ""; height: 6px; width: 6px; border-radius: 50%; transform: translateY(3px); background-color: var(--tp-common-white); } .creative-service-link { margin-top: 20px; } .creative-service-link a { height: 64px; width: 64px; line-height: 58px; text-align: center; border-radius: 40px; transition: 0.3s; display: inline-block; color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.1); } .creative-service-item { margin-left: 80px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 28px; padding-bottom: 80px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-service-item { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-service-item { padding-bottom: 40px; } } @media (max-width: 767px) { .creative-service-item { flex-wrap: wrap; } } .creative-service-item:hover .creative-service-link a { border-color: #2fb677; background-color: #2fb677; color: var(--tp-common-black); } .creative-service-item:hover .creative-service-title a { background-size: 100% 100%; } .creative-service-wrap .row [class*=col-] .creative-service-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ar-service-item { height: 100%; width: 25%; cursor: pointer; } .ar-service-item:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.2); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .inner-service-1-left { margin-bottom: 50px; } } .inner-service-1-left > span { font-weight: 500; font-size: 14px; line-height: 1; color: #f9f4e8; margin-bottom: 25px; display: inline-block; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--tp-ff-clash-semibold); } .inner-service-1-left ul li { list-style-type: none; } .inner-service-1-left ul li:not(:last-child) { margin-bottom: 12px; } .inner-service-1-left ul li span { font-weight: 600; font-size: 20px; line-height: 1; color: #ff535b; letter-spacing: 0.02em; text-transform: uppercase; font-family: var(--tp-ff-clash-semibold); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-inner-service-area { padding-top: 20px; padding-bottom: 0; } } .tp-service-4-dot .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; transition: 0.3s; border-radius: 50%; display: inline-block; background: transparent; border: 1px solid #999; } .tp-service-4-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--tp-common-green-regular); background-color: var(--tp-common-green-regular); } .creative-service-2-style .tp-section-subtitle { margin-bottom: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-service-2-style .tp-section-subtitle { margin-bottom: 15px; } } /*----------------------------------------*/ /* 7.6 Project Css /*----------------------------------------*/ .dgm-project-active { margin: 0px -460px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .dgm-project-active { margin: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .dgm-project-active { margin: 0; margin: 0px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-project-area { padding-bottom: 80px; } } .creative-project-thumb { overflow: hidden; border-radius: 20px; margin-bottom: 25px; } .creative-project-thumb{ position: relative; overflow: hidden; border-radius: 20px; } /* IMAGE – standing state */ .creative-project-thumb img{ width: 100%; display: block; border-radius: 20px; filter: grayscale(100%) contrast(1.1) brightness(0.85); transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1); transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 500ms ease; } /* GREEN AURA – standing */ .creative-project-thumb::before{ content: ""; position: absolute; inset: 0; border-radius: 20px; background: radial-gradient( 800px circle at 20% 0%, rgba(47,182,119,0.28), transparent 45% ), linear-gradient( to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.55) ); opacity: 0.9; transition: opacity 500ms ease; pointer-events: none; } /* GREEN GLOW RIM (hidden) */ .creative-project-thumb::after{ content: ""; position: absolute; inset: 0; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(47,182,119,0.25), 0 0 0 rgba(47,182,119,0); transition: box-shadow 500ms ease; pointer-events: none; } /* HOVER – color + glow */ .creative-project-thumb:hover img{ filter: grayscale(0%) saturate(1.3) contrast(1.1) brightness(1.03); } .creative-project-thumb:hover::before{ opacity: 0.25; } .creative-project-thumb:hover::after{ box-shadow: inset 0 0 0 1px rgba(47,182,119,0.6), 0 0 35px rgba(47,182,119,0.55); } .creative-project-meta span { font-weight: 400; font-size: 16px; line-height: 1; margin-bottom: 10px; display: inline-block; color: var(--tp-common-white); } .creative-project-meta span:not(:last-child) { padding-right: 13px; margin-right: 13px; position: relative; } .creative-project-meta span:not(:last-child)::after { position: absolute; top: 7px; right: -2px; content: ""; height: 6px; width: 6px; border-radius: 50%; display: inline-block; background-color: var(--tp-common-white); } .creative-project-title-sm { font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tp-common-white); } .creative-project-category { position: absolute; top: -2px; right: 0; padding: 15px; padding-top: 7px; background-color: #0e0f11; border-radius: 0 0 0 20px; opacity: 0; visibility: hidden; transition: 0.4s; transform: translateY(-50px); } .creative-project-category span { border-radius: 20px; padding: 9px 18px; font-weight: 500; font-size: 15px; line-height: 1; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; display: inline-block; background-color: #242426; color: var(--tp-common-white); } .creative-project-category span:hover { color: var(--tp-common-black); background-color: var(--tp-common-green-light); } .creative-project-category::before { content: ""; position: absolute; background-color: transparent; bottom: -40px; right: 0; height: 40px; width: 20px; border-top-right-radius: 20px; box-shadow: 0px -17px 0 0 #0E0F11; } .creative-project-category::after { content: ""; position: absolute; background-color: transparent; top: 1px; left: -20px; height: 40px; width: 20px; border-top-right-radius: 20px; box-shadow: 0 -18px 0 0 #0E0F11; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-project-item { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-project-item { margin-bottom: 50px; } } .creative-project-item:hover .creative-project-category { opacity: 1; visibility: visible; transform: translateY(-1px); } .creative-project-item:hover .creative-project-thumb img { transform: perspective(400px) rotateX(0.09deg) rotateY(0) scaleX(1.1) scaleY(1.1); } @media (max-width: 767px) { .design-project-item { margin-bottom: 60px; } } .design-project-thumb img { border-radius: 30px; will-change: transform; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .design-project-thumb img { margin-bottom: 60px; } } @media (max-width: 767px) { .design-project-thumb img { margin-bottom: 30px; } } .tp_text_invert > div { background-image: linear-gradient(to right, #111013 50%, #e4e4e4 50%); background-size: 200% 100%; background-position: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; } .tp_text_invert_2 > div { background-image: linear-gradient(to right, #e0eeee 50%, #383C3E 50%); padding: 10px 0; background-size: 200% 100%; background-position: 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .tp_text_invert_3 > div { background-image: linear-gradient(to right, #f9f4e8 50%, #383C3E 50%); padding: 10px 0; background-size: 200% 100%; background-position: 100%; -webkit-background-clip: text; background-clip: text; color: transparent; } .tp-text-right-scroll { display: inline-block; } .tp-reveal-line { overflow: hidden; } .studio-project-thumb { height: 630px; width: 1090px; margin-left: 90px; } @media only screen and (min-width: 1600px) and (max-width: 1700px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .studio-project-thumb { width: 100%; margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .studio-project-thumb { height: 100%; width: 100%; margin-left: 0; } } .studio-project-thumb img { width: 100%; } .studio-showcase-wrap { height: 1700px; overflow: hidden; margin: 0px -370px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .studio-showcase-wrap { height: 1000px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .studio-showcase-wrap { height: 700px; } } @media (max-width: 767px) { .studio-showcase-wrap { height: 700px; margin: 0; } } .studio-showcase-main { gap: 30px; margin-top: -370px; } .studio-showcase-thumb img { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .studio-showcase-area { margin-bottom: 120px; } } @media (max-width: 767px) { .studio-showcase-area { margin-bottom: 80px; } } .it-project-active { margin: 0 -260px; } @media (max-width: 767px) { .it-project-active { margin: 0; } } .it-project-dots { margin-top: -40px; } @media (max-width: 767px) { .it-project-dots { margin-top: 0; } } .it-project-dots .swiper-pagination-bullet { border-radius: 7px; width: 50px; height: 6px; opacity: 1; margin: 0 4px; transition: 0.3s; background: rgba(33, 33, 45, 0.1); } .it-project-dots .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; background: #7463FF; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .st-portfolio-heading { margin-bottom: 50px; } } .tp-project-5-title-box { position: relative; padding: 32px 0; z-index: 1; border-bottom: 1px solid rgba(207, 194, 146, 0.2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-project-5-title-box { margin-bottom: 40px; } } .tp-project-5-title-box:last-child { margin-bottom: 0; } .tp-project-5-title-box span { font-size: 14px; font-weight: 500; line-height: 1; color: #846457; text-transform: uppercase; font-family: var(--tp-ff-poppins); transition: 0.3s; } .tp-project-5-title-box.active span { color: var(--tp-cream-2); } .tp-project-5-2-title { font-size: 326px; font-weight: 400; line-height: 1; letter-spacing: -19.56px; text-transform: uppercase; color: var(--tp-cream-2); font-family: var(--tp-ff-playfair); } @media only screen and (min-width: 1600px) and (max-width: 1700px) { .tp-project-5-2-title { font-size: 280px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-project-5-2-title { font-size: 230px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-project-5-2-title { font-size: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-project-5-2-title { font-size: 160px; } } @media (max-width: 767px) { .tp-project-5-2-title { font-size: 60px; letter-spacing: -2.56px; } } .tp-portfolio-11-slider-active button { left: 40px; bottom: 60px; width: 55px; height: 56px; line-height: 53px; text-align: center; border-radius: 50%; position: absolute; color: var(--tp-common-white); border: 2px solid rgba(255, 255, 255, 0.2); transition: 0.3s; z-index: 99; } @media only screen and (min-width: 992px) { .tp-portfolio-11-slider-active button { display: none !important; } } @media (max-width: 767px) { .tp-portfolio-11-slider-active button { left: 15px; } } .tp-portfolio-11-slider-active button.slick-next { margin-left: 70px; } .tp-portfolio-11-slider-active button i { font-weight: 500; } .tp-portfolio-11-slider-active button:hover { color: var(--tp-common-black); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .tp-portfolio-11-slider-nav-item { cursor: pointer; } .tp-portfolio-11-slider-nav-active button { left: 0; width: 55px; bottom: -45px; height: 56px; line-height: 53px; text-align: center; border-radius: 50%; position: absolute; color: var(--tp-common-white); border: 2px solid rgba(255, 255, 255, 0.2); transition: 0.3s; } .tp-portfolio-11-slider-nav-active button.slick-next { margin-left: 70px; } .tp-portfolio-11-slider-nav-active button i { font-weight: 500; } .tp-portfolio-11-slider-nav-active button:hover { color: var(--tp-common-black); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .tp-portfolio-11-slider-nav-active .slick-list { padding: 50px 0; } .tp--hover-item { position: relative; } .tp--hover-img canvas { top: 0; left: 0; width: 100%; height: 100%; position: absolute; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .creative-project-2-style { padding-bottom: 0; } } .creative-project-2-top { margin-bottom: 70px; } .creative-project-2-top .tp-section-subtitle { margin-bottom: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .creative-project-2-top .tp-section-subtitle { margin-bottom: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .creative-project-2-top .tp-section-subtitle { margin-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-project-2-top .tp-section-subtitle { margin-bottom: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .creative-project-2-top .tp-section-title.fs-64 { font-size: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .creative-project-2-top .tp-section-title.fs-64 { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-project-2-top .tp-section-title.fs-64 { font-size: 40px; margin-bottom: 30px; } } /*----------------------------------------*/ /* 7.7 Funfact Css /*----------------------------------------*/ .tp-funfact-panel { width: 100%; height: 100%; will-change: transform; opacity: 1 !important; } .tp-funfact-panel-wrap { width: 300%; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: no-wrap; flex-wrap: no-wrap; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-funfact-panel-wrap { width: 100%; height: 100%; flex-wrap: wrap; } } .ar-funfact-item h4, .ar-funfact-item .eris-stat-number { line-height: 0.8; font-size: 100px; letter-spacing: -0.04em; color: var(--tp-common-black); font-family: var(--tp-ff-clash-regular); } .ar-funfact-item h4 i, .ar-funfact-item .eris-stat-number i { font-style: normal; } .ar-funfact-item span { font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: 1px; text-transform: uppercase; color: var(--tp-common-black); font-family: var(--tp-ff-clash-medium); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .ar-funfact-item span { font-size: 15px; } } .ar-funfact-bg { padding: 45px 0; padding-bottom: 0; } .ar-funfact-2-style .ar-funfact-item { position: relative; padding-left: 30px; } .ar-funfact-2-style .ar-funfact-item::after { position: absolute; content: ""; top: -15px; left: 0; width: 1px; height: 140px; display: inline-block; background-color: rgba(255, 255, 255, 0.1); } .ar-funfact-2-style .ar-funfact-item h4, .ar-funfact-2-style .ar-funfact-item .eris-stat-number { color: var(--tp-common-white); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 767px) { .ar-funfact-2-style .ar-funfact-item h4, .ar-funfact-2-style .ar-funfact-item .eris-stat-number { font-size: 75px; } } .ar-funfact-2-style .ar-funfact-item span { font-size: 18px; letter-spacing: 0; text-transform: capitalize; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .ar-funfact-2-style .ar-funfact-item span { font-size: 14px; } } .ar-funfact-2-border { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .ar-funfact-2-border::after { position: absolute; bottom: -10px; left: 0; right: 0; height: 1px; width: 95%; content: ""; margin: 0 auto; text-align: center; display: inline-block; background-color: rgba(255, 255, 255, 0.1); } /*----------------------------------------*/ /* 7.8 Work Css /*----------------------------------------*/ /*----------------------------------------*/ /* 7.9 Testimonail Css /*----------------------------------------*/ .tp-testimonial-slider-active { padding-top: 180px; margin: 0px -100px; } @media (max-width: 767px) { .tp-testimonial-slider-active { padding-top: 60px; margin: 0; } } .dgm-testimonial-dot .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; transition: 0.3s; border-radius: 50%; display: inline-block; background: transparent; border: 1px solid rgba(20, 24, 32, 0.3); } .dgm-testimonial-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--tp-common-black); background-color: var(--tp-common-black); } .creative-testimonial-item { padding: 35px 35px; border-radius: 20px; background-color: #1a1b1e; } .creative-testimonial-avater img { flex: 0 0 auto; border-radius: 50%; margin-right: 13px; height: 54px; width: 54px; } .creative-testimonial-avater-info { line-height: 1; } .creative-testimonial-avater-info h4, .creative-testimonial-avater-info h3 { font-weight: 500; font-size: 16px; line-height: 1; margin-bottom: 8px; letter-spacing: -0.03em; color: var(--tp-common-white); } .creative-testimonial-avater-info span { font-weight: 400; font-size: 15px; line-height: 1; letter-spacing: -0.03em; color: rgba(255, 255, 255, 0.6); } .creative-testimonial-avater-wrap { margin-bottom: 35px; } @media (max-width: 767px) { .creative-testimonial-avater-wrap { flex-wrap: wrap; } } .creative-testimonial-text p { font-weight: 600; font-size: 26px; line-height: 1.3; margin-bottom: 0; letter-spacing: -0.02em; color: var(--tp-common-white); } @media (max-width: 767px) { .creative-testimonial-text p { font-size: 24px; } } .creative-testimonial-text p span { margin-right: 8px; display: inline-block; } .creative-testimonial-text p span svg { transform: translateY(-7px); } .creative-testimonial-active { margin-right: -370px; } @media (max-width: 767px) { .creative-testimonial-active { margin: 0; } } .creative-testimonial-slider-wrap .tp-scrollbar { margin-top: 80px; height: 2px; width: 100%; overflow: hidden; background: rgba(255, 255, 255, 0.1); } @media (max-width: 767px) { .creative-testimonial-slider-wrap .tp-scrollbar { margin-top: 40px; } } .creative-testimonial-slider-wrap .tp-scrollbar .swiper-scrollbar-drag { background: #fff; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-testimonial-arrow { margin-bottom: 30px; } } .creative-testimonial-arrow button { height: 40px; width: 40px; line-height: 1; border-radius: 50%; text-align: center; display: inline-block; transition: 0.3s; color: var(--tp-common-white); background-color: #242426; } .creative-testimonial-arrow button:hover { color: var(--tp-common-black); background-color: var(--tp-common-green-light); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .creative-testimonial-btn { margin-bottom: 30px; } } .design-testimonial-active { margin: 0px -380px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .design-testimonial-active { margin: 0; } } #paginations { position: absolute; bottom: -7px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .shop-slider-progress-bar { position: absolute; top: 50%; left: 50%; width: 200px; height: 1px; z-index: 11; background-color: #d9d9d9; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .it-testimonial-prev { position: absolute; top: 50%; left: -15%; transform: translateY(-50%); } .it-testimonial-next { position: absolute; top: 50%; right: -12%; transform: translateY(-50%); } /*----------------------------------------*/ /* 8.0 Award Css /*----------------------------------------*/ .design-award-item { position: relative; width: 70%; margin: 0 auto; padding-bottom: 35px; transition-duration: 0.3s; transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 1, 1); border-bottom: 1px solid rgba(224, 238, 238, 0.3); } @media only screen and (min-width: 768px) and (max-width: 991px) { .design-award-item { width: 690px; } } @media (max-width: 767px) { .design-award-item { width: 100%; } } .design-award-item::after { position: absolute; content: ""; bottom: 2px; right: 0; height: 1px; width: 8px; transform: rotate(40deg); background: rgba(224, 238, 238, 0.3); } .design-award-item::before { position: absolute; content: ""; bottom: -4px; right: 0; height: 1px; width: 8px; transform: rotate(-40deg); background: rgba(224, 238, 238, 0.3); } .design-award-item:hover { border-color: var(--tp-common-white); } .design-award-item:hover::after, .design-award-item:hover::before { background-color: var(--tp-common-white); } .design-award-wrap .row [class*=col]:not(:first-child) .design-award-item { padding-top: 40px; } .ar-award-item { padding: 26px 0; position: relative; border-bottom: 1px solid rgba(29, 33, 50, 0.08); } @media (max-width: 767px) { .ar-award-item { padding: 26px 10px; } } .ar-award-item:first-child { border-top: 1px solid rgba(29, 33, 50, 0.08); } .ar-award-item::after { position: absolute; content: ""; top: 0; left: 0; height: 0; width: 100%; transition: 0.3s ease-in-out; background-color: var(--tp-common-red-2); } .ar-award-item:hover::after { height: 100%; } .ar-award-item:hover span { color: var(--tp-common-white); } .ar-award-item:hover span svg { color: var(--tp-common-white); } .st-award-thumb-shape { position: absolute; width: 175px; height: 70px; bottom: 0; left: 0; border-radius: 5px; background-color: #FFCF27; -webkit-transform: rotate(-55deg) translate(-100%, 150%); transform: rotate(-55deg) translate(-100%, 150%); -webkit-transition: all 0.5s; transition: all 0.5s; z-index: 1; opacity: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .st-award-thumb-shape { display: none; } } #st-award-thumb img { transform-origin: bottom left; } /*----------------------------------------*/ /* 8.1 Video Css /*----------------------------------------*/ .tp-video-thumb-wrap { transform-origin: top center; display: flex; flex-wrap: wrap; justify-content: space-between; } .design-video-thumb { height: 850px; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px) { .design-video-thumb { height: 500px; } } @media (max-width: 767px) { .design-video-thumb { height: 450px; } } .design-video-thumb img { margin-top: -150px; } @media (max-width: 767px) { .design-video-thumb img { margin-top: 100px; } } /*----------------------------------------*/ /* 8.2 Brand Css /*----------------------------------------*/ @media (max-width: 767px) { .des-brand-area { padding-bottom: 100px; } } .des-brand-item.black-style .des-brand-item-inner { background-color: #2fb677; } .des-brand-item.black-style .des-brand-item-inner img{ filter: grayscale(100%) contrast(1.1) brightness(.9); transition: filter .25s ease; mix-blend-mode: multiply; filter: } .des-brand-item.black-style .des-brand-item-inner img:hover { filter: none; mix-blend-mode: normal; } .des-brand-item-inner { height: 220px; min-width: 380px; display: grid; padding: 40px; margin: 0px 5px; border-radius: 20px; place-content: center; background-color: #F6F6F9; } @media (max-width: 767px) { .des-brand-item-inner { height: 120px; min-width: 250px; } } .tp-brand-active .swiper-slide { width: auto; } @media (max-width: 767px) { .tp-brand-inner-item { margin-bottom: 20px; } } .tp-brand-inner-item img { width: 100%; } .dgm-brand-active { margin: 0px -20px; } .ai-brand-slider-active .swiper-slide { width: auto; } .ar-brand-active .swiper-slide { width: auto; } .ar-brand-active .swiper-wrapper { align-items: center; } .app-brand-active .swiper-slide { width: auto; } .st-brand-active { margin-right: -90px; margin-left: 80px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .st-brand-active { margin-right: 0; margin-left: 0; } } .st-brand-active .swiper-slide { width: auto; } /*----------------------------------------*/ /* 8.3 Team Css /*----------------------------------------*/ .des-team-item-box { padding: 0 120px; padding-top: 40px; padding-bottom: 15px; border-bottom: 1px solid rgba(159, 156, 149, 0.2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .des-team-item-box { padding: 30px 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .des-team-item-box { padding: 0; padding-top: 40px; padding-bottom: 15px; } } @media (max-width: 767px) { .des-team-item-box { padding: 0; padding-top: 40px; padding-bottom: 40px; } } .des-team-item-box span { font-weight: 600; font-size: 16px; line-height: 1; transition: 0.3s; color: rgba(249, 244, 232, 0.1); } .des-team-item-box.active span { color: var(--tp-common-cream); } @media (max-width: 767px) { .des-team-item-box.active span { display: block; } } .studio-team-title-box p { font-weight: 500; font-size: 20px; margin-bottom: 0; line-height: 1.4; letter-spacing: -0.02em; color: rgba(249, 244, 232, 0.8); } @media (max-width: 767px) { .studio-team-title-box p { font-size: 18px; } .studio-team-title-box p br { display: none; } } .tp-team-slider-active { margin: 0 -65px; } @media (max-width: 767px) { .tp-team-slider-active { margin: 0; } } /*----------------------------------------*/ /* 8.4 Step Css /*----------------------------------------*/ .studio-step-slider-active { margin: 0 -200px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .studio-step-slider-active { margin: 0; } } /*----------------------------------------*/ /* 8.5 Choose Css /*----------------------------------------*/ /*----------------------------------------*/ /* 8.6 Price Css /*----------------------------------------*/ #lineMarker { position: absolute; top: 5px; height: 36px; z-index: -1; transition: 0.4s; border-radius: 6px; display: inline-block; background: var(--tp-common-white); } /*----------------------------------------*/ /* 8.7 Faq Css /*----------------------------------------*/ .it-faq-accordion .faq-active { position: relative; } .it-faq-accordion .faq-active::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 0; transition: 0.5s; background: #ffd743; border-radius: 20px; } .it-faq-accordion .accordion-items.faq-active::before { top: auto; bottom: 0; height: 100%; transition: 0.5s; } /*----------------------------------------*/ /* 8.8 Success Css /*----------------------------------------*/ /*----------------------------------------*/ /* 8.9 Instagram Css /*----------------------------------------*/ .pp-social-item { display: block; text-align: center; padding: 45px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .pp-social-item:last-child { border: none; } /*----------------------------------------*/ /* 9.0 Feature Css /*----------------------------------------*/ /*----------------------------------------*/ /* 9.1 Review Css /*----------------------------------------*/ /*----------------------------------------*/ /* 9.2 Stack Css /*----------------------------------------*/ /*----------------------------------------*/ /* 9.3 Benefits Css /*----------------------------------------*/ .tp-gsap-bg { position: absolute; top: 0; left: 0; right: 0; width: 100%; margin: 0 auto; height: 100%; text-align: center; background-color: var(--tp-common-black); z-index: -1; } /*----------------------------------------*/ /* 9.4 Cta Css /*----------------------------------------*/ .st-cta-bg-circle { position: absolute; top: 0; left: -3.5%; height: 1000px; width: 107%; display: inline-block; right: 0; margin: 0 auto; text-align: center; } /*----------------------------------------*/ /* 9.5 Intaractive Css /*----------------------------------------*/ .tp-porfolio-10-title-wrap ul li { list-style-type: none; display: inline-block; padding-right: 30px; padding-bottom: 25px; transition: 0.4s; } @media (max-width: 767px) { .tp-porfolio-10-title-wrap ul li { padding: 16px; } } .tp-porfolio-10-title-wrap ul li.active { transition: 0.4s; } .tp-port-slider-title { font-size: 180px; font-weight: 600; line-height: 1; letter-spacing: 5px; text-transform: uppercase; color: transparent; color: transparent; transition: 0.3s; cursor: pointer; display: block; background-size: 0% 100%; background-repeat: no-repeat; -webkit-background-clip: text; font-family: var(--tp-ff-mango-bold); -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.4); transition: background-size 0.6s cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s, 0.6s -webkit-clip-path cubic-bezier(0.32, 0.55, 0.58, 0.76) 0s; background-image: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50.1%); mix-blend-mode: luminosity; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-port-slider-title { font-size: 120px; } } @media (max-width: 767px) { .tp-port-slider-title { font-size: 70px; } } .tp-port-slider-title:hover { background-size: 200% 100%; color: var(--tp-common-white); } /*----------------------------------------*/ /* 9.6 Project Slider Css /*----------------------------------------*/ /* ============ creative Slider ================= */ .tp-portfolio-slider__item { grid-area: 1/1/-1/-1; position: relative; width: 100%; height: 100%; overflow: hidden; display: grid; place-items: center; opacity: 0; pointer-events: none; } .tp-portfolio-slider__item.current { opacity: 1; z-index: 50; pointer-events: auto; } .tp-portfolio-slider__item-inner { position: relative; width: 120%; height: 120%; display: grid; place-items: center; grid-area: 1/1/-1/-1; background-size: cover; background-position: 50% 50%; } .tp-portfolio-slider-type { grid-area: main; display: grid; place-items: center; z-index: 9; position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); } @media (max-width: 767px) { .tp-portfolio-slider-type { bottom: 20%; width: 100%; } } .type__item { grid-area: 1/1/-1/-1; opacity: 0; } .type__item--current { opacity: 1; } .char-wrap { display: inline-block; position: relative; overflow: hidden; display: inline-flex; } .slider--bg { z-index: 1; } .slider--bg .tp-portfolio-slider__item-inner { position: relative; } .slider--bg .tp-portfolio-slider__item-inner::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2, 2, 1, 0.2); } .slider--fg { position: absolute; width: 20vw; min-width: 200px; aspect-ratio: 0.75; height: auto; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); } .slider-nav { position: fixed; width: 100%; line-height: 1; bottom: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; } .slider-nav__item--prev { grid-area: prev; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .slider-nav__item--prev { margin-left: 45px; } } @media (max-width: 767px) { .slider-nav__item--prev { margin-left: 30px; } } .slider-nav__item--next { grid-area: next; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .slider-nav__item--next { margin-right: 45px; } } @media (max-width: 767px) { .slider-nav__item--next { margin-right: 30px; } } /* ============ creative Slider ================= */ /* ============ Showcase Slider ================= */ .tp-showcase-slider-bg { display: flex; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; } .tp-showcase-slider-bg::after { opacity: 0.3; background: #1d1d1d; content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; pointer-events: none; } .tp-showcase-slider-main .swiper-pagination { bottom: 40px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: auto; } @media (max-width: 767px) { .tp-showcase-slider-main .swiper-pagination { display: none; } } .tp-showcase-slider-main .swiper-pagination-bullet { background: transparent; margin: 0 10px !important; } .tp-showcase-slider-main .path { display: none; } .tp-showcase-slider-main .swiper-pagination-bullet-active .path { display: inline-block !important; stroke-dasharray: 1000; stroke-dashoffset: 0; -webkit-animation: dash linear 10s; animation: dash linear 10s; -webkit-animation-iteration-count: unset; animation-iteration-count: unset; } /* ============ Showcase Slider ================= */ /* ============ parallax Slider ================= */ .parallax-sliders { position: absolute; top: 0; left: 0; width: 3800px; height: 100%; } .parallax-img { position: absolute; height: 100%; width: 800px; background-size: cover; background-position: center; margin-left: -100px; } .parallax-img::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; content: ""; opacity: 0; visibility: hidden; transition: 0.4s; background-color: rgba(0, 0, 0, 0.3); } /* ============ parallax Slider ================= */ /* ============ showcase Slider ================= */ #canvas-slider { width: 100%; height: 100%; position: fixed; top: 0; right: 0; overflow: hidden; -webkit-transition: width 0.5s ease-in-out 0; transition: width 0.5s ease-in-out 0s; z-index: 1; } #showcase-slider-holder { width: 100%; height: 100vh; position: relative; overflow: hidden; opacity: 1; z-index: 2; } .parallax-slider-active .swiper-slide { position: relative; overflow: hidden; width: 100%; height: 100vh; } .parallax-slider-active .swiper-container { width: 100%; height: 100vh; } /* ============ showcase Slider ================= */ .slide { width: 100%; height: 100%; grid-area: 1/1/-1/-1; pointer-events: none; opacity: 0; overflow: hidden; position: relative; display: grid; place-items: center; will-change: transform, opacity; } .slide--current { pointer-events: auto; opacity: 1; } .slide__img { width: 100%; height: 100%; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; will-change: transform, opacity, filter; } .skew-slider-wrap { width: 100%; height: 100vh; display: grid; overflow: hidden; place-items: center; grid-template-rows: 100%; grid-template-columns: 100%; } .slides-numbers { position: absolute; top: 50%; right: 100px; transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .slides-numbers-wrap { display: none; } } .slides-numbers span { font-size: 14px; font-weight: 600; display: block; line-height: 1; color: var(--tp-common-white); } .slides-numbers span.text-1 { transform: translateX(-5px); } .slides-numbers span.text-2 { margin-left: 10px; transform: rotate(25deg); transform-origin: left bottom; } .slides-numbers::after, .slides-numbers::before { content: ""; width: 2px; height: 130px; display: inline-block; transform: translateX(13px); background-color: var(--tp-common-white); } .slides-numbers::before { margin-bottom: 30px; } .slides-numbers::after { margin-top: 40px; } .coverflow-slider-active { padding: 100px 0; } .coverflow-slider-text-active { height: 100px; } .coverflow-slider-prev svg { margin-right: 8px; } .coverflow-slider-next svg { margin-left: 8px; } .tp-portfolio-slicer-wrap { margin-bottom: 220px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-portfolio-slicer-wrap { margin-bottom: 130px; } } @media (max-width: 767px) { .tp-portfolio-slicer-wrap { margin-bottom: 100px; } } /* SLIDER */ .tp-perspective-slider { width: 100%; overflow: hidden; padding: 2vw 3vw 0; box-sizing: border-box; margin-bottom: 80px; } .tp-perspective-slider .tp-perspective-inner { width: 100%; height: 90vh; position: relative; display: inline-block; } .tp-perspective-slider .tp-perspective-inner .tp-perspective-image { width: 100%; height: 100%; background-size: cover; position: relative; display: inline-block; } .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:before { content: ""; width: 40px; height: 103%; position: absolute; left: -20px; top: -1.5%; z-index: 10; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: #000; } @media (max-width: 767px) { .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:before { content: none; } } .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after { content: ""; width: 40px; height: 103%; position: absolute; right: -20px; top: -1.5%; z-index: 10; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; background: #000; } @media (max-width: 767px) { .tp-perspective-slider .tp-perspective-inner .tp-perspective-image:after { content: none; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-pd-3-portfolio-item { margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-pd-3-portfolio-item-wrap { padding-top: 0; } } .tp-pd-6-hero-slider-active .slick-dots { text-align: center; } .tp-pd-6-hero-slider-active .slick-dots li { font-size: 0; height: 12px; width: 12px; margin: 0 5px; border-radius: 50%; cursor: pointer; display: inline-block; border: 2px solid rgba(20, 24, 32, 0.3); } .tp-pd-6-hero-slider-active .slick-dots li.slick-active { border-color: var(--tp-common-black); background-color: var(--tp-common-black); } /*----------------------------------------*/ /* 9.7 Career Css /*----------------------------------------*/ @media (max-width: 767px) { .tp-career-details-ptb { padding-top: 100px; } } .tp-career-details-wrapper { padding-right: 105px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-career-details-wrapper { padding-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-career-details-wrapper { padding-right: 0; } } /*----------------------------------------*/ /* 9.8 Contact Css /*----------------------------------------*/ .tp-contact-map-icon { position: relative; } .tp-contact-map-icon::after { position: absolute; content: ""; top: -5px; left: -5px; margin: 0 auto; height: 120px; width: 120px; z-index: -1; border-radius: 140px; backdrop-filter: blur(7px); transform: translate(-20%, -20%); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--tp-common-white); animation: animate-pulse 3s linear infinite; box-shadow: 0px 20px 50px 0px rgba(17, 16, 19, 0.14); } .tp-contact-map-icon span { display: grid; height: 60px; width: 60px; z-index: 2; text-align: center; border-radius: 50%; place-content: center; background-color: var(--tp-common-red-3); } .tp-contact-map-icon-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .tp-contact-form-input label { font-size: 16px; font-weight: 500; color: #111013; line-height: 1; margin-bottom: 12px; } .tp-contact-form-input input, .tp-contact-form-input textarea { border-radius: 8px; background: #F8F8FB; border-color: #F8F8FB; } .tp-contact-form-input input:focus, .tp-contact-form-input textarea:focus { background: var(--tp-common-white); border-color: var(--tp-common-red-3); } .tp-contact-form-input textarea { resize: none; height: 160px; } .tp-contact-form-btn button { font-size: 18px; font-weight: 600; line-height: 1; border-radius: 30px; padding: 20px 54px; letter-spacing: -0.18px; color: var(--tp-common-white); background-color: #087447; } .tp-contact-form-btn button span { position: relative; z-index: 1; line-height: 1; overflow: hidden; display: inline-block; } .tp-contact-form-btn button span span.text-1 { position: relative; display: block; transition: 0.3s; } .tp-contact-form-btn button span span.text-2 { position: absolute; top: 100%; display: block; transition: 0.3s; } .tp-contact-form-btn button:hover span span.text-1 { -webkit-transform: translateY(-150%); transform: translateY(-150%); } .tp-contact-form-btn button:hover span span.text-2 { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tp-contact-category-btn { font-size: 18px; font-weight: 600; line-height: 1; cursor: pointer; border-radius: 12px; padding: 20px 43px; margin-bottom: 10px; margin-right: 10px; display: inline-block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.08); } .tp-contact-category-btn:hover, .tp-contact-category-btn.active { background-color: #FFF669; color: var(--tp-common-black-7); } @media (max-width: 767px) { .tp-contact-category-btn { font-size: 16px; padding: 16px 36px; } } @media (max-width: 767px) { .tp-contact-us-form-ptb { padding-top: 30px; } } .tp-contact-us-form-wrapper { padding: 10px; border-radius: 14px; background: #1B1B1D; } .tp-contact-us-map { width: 100%; height: 100%; border-radius: 8px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-contact-us-map { height: 500px; margin-bottom: 30px; } } @media (max-width: 767px) { .tp-contact-us-map { height: 450px; margin-bottom: 30px; } } .tp-contact-us-map iframe { width: 100%; height: 100%; border-radius: 8px; } .tp-contact-us-title { font-size: 30px; font-weight: 600; letter-spacing: -0.6px; text-transform: uppercase; color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-contact-us-title { margin-bottom: 30px; } } .tp-contact-us-wrap { padding: 110px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-contact-us-wrap { padding: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-contact-us-wrap { padding: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tp-contact-us-wrap { padding: 30px; } } @media (max-width: 767px) { .tp-contact-us-wrap { padding: 20px; } } .tp-contact-us-wrap .tp-contact-form-input label { color: var(--tp-common-white); } .tp-contact-us-wrap .tp-contact-form-input input, .tp-contact-us-wrap .tp-contact-form-input textarea { background: #302F32; border-color: #302F32; color: var(--tp-common-white); } .tp-contact-us-wrap .tp-contact-form-input input:focus, .tp-contact-us-wrap .tp-contact-form-input textarea:focus { background-color: #1B1B1D; border-color: var(--tp-common-red-3); } .tp-contact-us-thumb { overflow: hidden; border-radius: 10px; margin-bottom: 40px; } .tp-contact-us-thumb img { width: 100%; transition: 0.9s; border-radius: 10px; } .tp-contact-us-content { padding: 15px; border-radius: 14px; background: #1B1B1D; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-contact-us-content { margin-top: 0; } } .tp-contact-us-content:hover .tp-contact-us-thumb img { transform: scale(1.1); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-contact-us-info-area { padding-bottom: 90px; } } .tp-contact-us-info-title { font-size: 26px; font-weight: 700; color: #F5F7F5; letter-spacing: -0.52px; margin-bottom: 25px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .tp-contact-us-info-details { margin-bottom: 45px; } .tp-contact-us-info-details a { font-size: 18px; font-weight: 400; display: block; margin-bottom: 15px; color: rgba(255, 255, 255, 0.7); } .tp-contact-us-info-details a:hover { color: var(--tp-common-white); } .tp-contact-us-bottom { padding: 0 22px 28px; } .tp-contact-us-btn .tp-btn-yellow-green { font-size: 16px; font-weight: 600; padding: 15px 10px; border-radius: 30px; display: inline-block; text-transform: capitalize; color: var(--tp-common-white); background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.1); } .tp-contact-us-btn .tp-btn-yellow-green.active { background-color: #087447; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .cn-contactform-support-area { margin-bottom: 80px; } } .cn-contactform-support-bg { background-repeat: no-repeat; background-size: cover; object-fit: cover; height: 385px; } .cn-contactform-support-text span { font-size: 44px; font-weight: 500; line-height: 52px; max-width: 755px; margin: 0 auto; display: inline-block; letter-spacing: -0.88px; color: var(--tp-common-white); } @media (max-width: 767px) { .cn-contactform-support-text span { font-size: 40px; } } /*----------------------------------------*/ /* 9.9 Portfolio css /*----------------------------------------*/ .tp-pd-2-dot .swiper-pagination-bullet { width: 6px; height: 6px; opacity: 1; transition: 0.3s; border-radius: 50%; display: inline-block; background: rgba(255, 255, 255, 0.3); } .tp-pd-2-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 24px; border-radius: 10px; background-color: var(--tp-common-white); } .tp-pd-5-hero-black-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 1; background-color: #000; transition: opacity 0.2s ease; } .tp-pd-5-hero-white-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; z-index: 1; background-color: #fff; transition: opacity 0.4s ease; } .project-details-video { margin-bottom: 60px; } .project-details-video video { height: 800px; width: 100% !important; object-fit: cover; overflow: hidden; } @media (max-width: 767px) { .project-details-video video { height: 400px; } } .project-details-video figcaption { align-items: center; display: grid; grid-gap: 1rem; grid-template-columns: 50px auto 115px; padding: 0.5rem; } .project-details-video button { border: 0; display: inline; color: white; order: 1; padding: 0.5rem; transition: opacity 0.25s ease-out; width: 100%; font-size: 24px; } .project-details-video button:hover { cursor: pointer; opacity: 0.8; } .project-details-video label { font-size: 20px; text-align: center; color: var(--tp-common-white); transform: translateY(35px); } .project-details-video { /* Fallback stuff */ } .project-details-video progress[value] { position: relative; appearance: none; border: none; display: inline; height: 3px; order: 1; width: 100%; background: rgba(255, 255, 255, 0.2); } .project-details-video { /* WebKit styles */ } .project-details-video progress[value]::-webkit-progress-bar { background-color: whiteSmoke; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25) inset; } .project-details-video progress[value]::-webkit-progress-value { background-color: var(--tp-common-white); position: relative; transition: width 1s linear; } .project-details-video { /* Firefox styles */ } .project-details-video progress[value]::-moz-progress-bar { background-color: var(--tp-common-white); position: relative; transition: width 1s linear; } /*----------------------------------------*/ /* 10.0 Shop Css /*----------------------------------------*/ .tp-hero-shop-dot { position: absolute; bottom: 60px !important; } .tp-hero-shop-dot .swiper-pagination-bullet { width: 16px; height: 16px; opacity: 1; transition: 0.3s; border-radius: 50%; display: inline-block; background: transparent; border: 1px solid #F4F0EA; } .tp-hero-shop-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .shop-text-slider-active { border-bottom: 1px solid rgba(77, 61, 48, 0.12); } .shop-text-slider-active .swiper-slide { width: 100%; } .subscribe-popup { position: fixed; left: 0; top: 0; right: 0; width: 100%; height: 100%; z-index: 1099; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; opacity: 0; transition: all 0.3s; margin: 0 auto; text-align: center; } .subscribe-popup.show { visibility: visible; opacity: 1; } .subscribe-popup .close i { position: absolute; right: 20px; top: 20px; font-size: 20px; cursor: pointer; font-weight: 400; color: var(--tp-common-black); transition: 0.3s; } .subscribe-popup .close:hover i { transform: rotate(180deg); } @keyframes zoomInOut { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .tp-shop-product-banner { margin-bottom: 15px; } } /*----------------------------------------*/ /* 10.1 Shop Details Css /*----------------------------------------*/ .modal .modal-dialog { width: 100%; max-width: 100%; margin-top: 0; margin-bottom: 0; } .modal { overflow-y: scroll; overflow-x: hidden; --bs-modal-border-width: 0; --bs-modal-border-radius: 0; } .modal-body { padding: 0; } /*----------------------------------------*/ /* 10.2 Login Css /*----------------------------------------*/ /*----------------------------------------*/ /* 10.3 Checkout css /*----------------------------------------*/ /*----------------------------------------*/ /* 10.4 Cart css /*----------------------------------------*/ .cartmini__area { position: fixed; right: 0; top: 0; width: 320px; height: 100%; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); background: var(--tp-common-white) none repeat scroll 0 0; z-index: 99999; scrollbar-width: none; transition: 0.3s; } .cartmini__area::-webkit-scrollbar { display: none; } .cartmini__area.cartmini-opened { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } /*----------------------------------------*/ /* 10.5 Account css /*----------------------------------------*/ /*----------------------------------------*/ /* 10.6 Error Css /*----------------------------------------*/ /* HEADER CSS */ /*----------------------------------------*/ /* 3.1 Header Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.2 Hero Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.3 common Style /*----------------------------------------*/ @-webkit-keyframes shake { 0%, 50%, 100% { transform: rotate(0); } 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40% { transform: rotate(6deg); } 45% { transform: rotate(4deg); } 7.5%, 12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5%, 42.5% { transform: rotate(-6deg); } 47.5% { transform: rotate(-2deg); } } @keyframes shake { 0%, 50%, 100% { transform: rotate(0); } 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40% { transform: rotate(6deg); } 45% { transform: rotate(4deg); } 7.5%, 12.5%, 17.5%, 22.5%, 27.5%, 32.5%, 37.5%, 42.5% { transform: rotate(-6deg); } 47.5% { transform: rotate(-2deg); } } @keyframes marquee-horizontal-rtl { from { transform: translateX(-100%); } to { transform: translateX(0); } } /*----------------------------------------*/ /* 3.2 About Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.2 Feature Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.2 Video Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.2 Service Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.2 Portfolio Style /*----------------------------------------*/ @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .cnt-portfolio-ptb { padding-top: 100px; } } @media (max-width: 767px) { .cnt-portfolio-ptb { padding-top: 80px; padding-bottom: 60px; } } .cnt-portfolio-video-wrapper { position: relative; width: 100%; height: 950px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) { .cnt-portfolio-video-wrapper { height: auto; padding-bottom: 60px; } } .cnt-portfolio-video-wrapper video { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center center; } .cnt-portfolio-video-card { width: 630px; margin: 0 auto; margin-bottom: 60px; padding: 60px 50px; border-radius: 16px; display: inline-block; background-color: #F2F1EE; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cnt-portfolio-video-card { padding: 30px; } } @media (max-width: 767px) { .cnt-portfolio-video-card { padding: 20px; width: auto; margin: 0 20px; margin-bottom: 30px; } } /*----------------------------------------*/ /* 3.4 Testimonial Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.4 Faq Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.4 Cta Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.3 Brand Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.3 Team Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.4 blog Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.4 Footer Style /*----------------------------------------*/ /*----------------------------------------*/ /* 3.5 Dark Style /*----------------------------------------*/ /*----------------------------------------*/ /* 10.7 Dark Css Start /*----------------------------------------*/ /*----------------------------------------*/ /* 10.8 Light Css Start /*----------------------------------------*/ @keyframes animate-pulse-2 { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.1); } 40% { box-shadow: 0 0 0 50px rgba(0, 0, 74, 0), 0 0 0 0 rgba(0, 0, 0, 0.1); } 80% { box-shadow: 0 0 0 50px rgba(0, 0, 74, 0), 0 0 0 30px rgba(0, 0, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 0, 74, 0), 0 0 0 30px rgba(0, 0, 74, 0); } } :root{ --g:#2FB677; --bg:#0b0f10; --card:#0f1517; --muted:rgba(255,255,255,.68); } .proof-special{ color:#fff; } .proof-wrap{ max-width:1600px; margin:0 auto; padding:0 24px; } .proof-head{ margin-bottom: 34px; } .counter-number{ font-size: 56px; font-weight: 900; letter-spacing: -0.02em; } .count{ color: #fff; } .plus{ color: var(--g); margin-left: 2px; text-shadow: 0 0 18px rgba(47,182,119,.55); } .counter-label{ margin-top: 6px; color: var(--muted); font-size: 14px; } /* TikTok pulse */ /* Chart */ /* Line draw */ .line{ position:absolute; inset: 0; width: 100%; height: 100%; z-index: 3; } /* Mini stats */ .mini-stats{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; position: relative; z-index: 1; } .stat{ background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; } .stat .k{ font-size: 22px; font-weight: 800; color: #fff; } .stat .t{ margin-top: 4px; color: var(--muted); font-size: 12px; } /* Logos */ .pill{ font-size: 12px; padding: 10px 12px; border-radius: 999px; background: rgba(47,182,119,.10); border: 1px solid rgba(47,182,119,.25); color: rgba(255,255,255,.82); } /* RUN ANIMATIONS ONLY when section is active */ @keyframes ring{ 0%{ opacity: 0; transform: scale(.88); } 30%{ opacity: .9; } 100%{ opacity: 0; transform: scale(1.15); } } @keyframes barGrow{ to{ transform: scaleY(1); } } @keyframes drawLine{ to{ stroke-dashoffset: 0; } } /* Responsive */ @media (max-width: 950px){ .counter-number{ font-size: 48px; } } /* Eris site extensions: multilingual, virals and work case studies */ .eris-map-placeholder { width: 100%; min-height: 450px; display: grid; place-items: center; background: linear-gradient(135deg, #202124, #141516); border-radius: 12px; overflow: hidden } .eris-map-placeholder iframe { width: 100%; height: 450px; border: 0 } .eris-map-load { border: 0; border-radius: 30px; background: #2fb677; color: #06120d; padding: 14px 24px; font-weight: 600; cursor: pointer } .eris-viral-frame { aspect-ratio: 9/16; background: #151515; overflow: hidden; position: relative; border-radius: 4px } .eris-viral-frame img, .eris-viral-frame video { width: 100%; height: 100%; object-fit: cover; display: block } .eris-viral-frame button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .74), transparent 45%); color: #fff; text-align: left; padding: 22px; display: flex; align-items: end; cursor: pointer } .eris-viral-frame button span { font-size: clamp(28px, 3vw, 45px); font-weight: 700; line-height: 1 } .design-hero-content .eris-home-hero-title{margin:0 0 13px;color:#e0eeee;font-family:var(--tp-ff-body);font-size:clamp(25px,2.25vw,36px);font-weight:600;line-height:1.08;letter-spacing:-.035em} .design-hero-content .eris-home-hero-copy{margin-bottom:28px;color:#fff;font-size:16px;line-height:1.45;letter-spacing:-.01em} .eris-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px } .eris-header-actions .tp-header-14-bar-wrap { margin-left: 0 !important } .eris-lang-switcher { position: relative; z-index: 20; display: inline-block; text-align: left } .eris-lang-switcher summary { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 58px; height: 42px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; background: rgba(15, 15, 15, .78); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; cursor: pointer; list-style: none; backdrop-filter: blur(12px) } .eris-lang-switcher summary::-webkit-details-marker { display: none } .eris-lang-switcher[open] summary svg { transform: rotate(180deg) } .eris-lang-switcher summary svg { transition: transform .2s ease } .eris-lang-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 76px; padding: 6px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: #101010; box-shadow: 0 16px 40px rgba(0, 0, 0, .35) } .eris-lang-menu a { display: block; padding: 8px 11px; border-radius: 9px; color: #aaa; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-align: center } .eris-lang-menu a:hover, .eris-lang-menu a[aria-current] { background: #2fbd83; color: #07130e } .eris-contact-map { display: block; width: 100%; min-height: 560px; border-radius: 2px; filter: grayscale(1) contrast(1.08); transition: filter .35s ease } .eris-contact-map:hover, .eris-contact-map:focus { filter: grayscale(0) } .design-video-area, .ar-funfact-area, .studio-showcase-area, .creative-service-area, .creative-testimonial-area { content-visibility: auto; contain-intrinsic-size: 900px } @media(min-width:1200px) { .tp-header-inner-style .tp-header-menu>nav>ul>li { margin: 0 7px } .tp-header-inner-style .tp-header-menu>nav>ul>li>a { font-size: 13px } } @media(max-width:575px) { .eris-header-actions { gap: 7px } .eris-lang-switcher summary { min-width: 50px; height: 38px; padding: 0 10px } .eris-header-actions .tp-header-8-bar span:first-child { display: none } } @media(min-width:1200px) and (max-width:1550px) { .eris-header-actions .tp-header-8-bar span:first-child { display: none } .eris-header-actions .tp-header-8-bar { padding-left: 12px; padding-right: 12px } .eris-header-actions .tp-header-8-bar span svg { margin-left: 0 } } @media(max-width:991px) { #magic-cursor { display: none !important } .tp_fade_anim, .tp_text_anim, .tp_text_anim * { opacity: 1 !important; visibility: visible !important; transform: none !important } } @media(max-width:600px) { .eris-viral-frame button { padding: 12px } } /* Homepage performance proof — editorial extension of the Eris visual system. */ .proof-special { padding: 88px 0 56px; background: #000; color: #fff } .proof-special .proof-wrap { width: min(100% - 48px, 1560px); max-width: none; margin: 0 auto; padding: 0 } .proof-special .proof-head { padding-top: 18px; margin: 0 0 34px; border-top: 1px solid rgba(255, 255, 255, .24) } .proof-special .proof-kicker { margin: 0 0 20px; color: #2fb677; font-size: 12px; line-height: 1; letter-spacing: .06em; text-transform: uppercase } .proof-special .proof-heading-row { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 8vw; align-items: end } .proof-special .proof-heading-row h2 { margin: 0; color: #fff; font-family: var(--tp-monument); font-size: clamp(58px, 6.4vw, 112px); font-weight: 400; line-height: .88; letter-spacing: -.055em; text-transform: uppercase } .proof-special .proof-heading-row h2 span { color: #2fb677 } .proof-special .proof-heading-row>p { max-width: 520px; margin: 0 0 4px; color: rgba(255, 255, 255, .66); font-size: clamp(17px, 1.3vw, 21px); line-height: 1.5 } .proof-special .proof-overview { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(360px, .6fr); gap: 60px; align-items: end; padding: 50px 0 52px; margin-top: 42px; border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12) } .proof-special .counter-number { font-family: var(--tp-ff-inter); font-size: clamp(70px, 8.3vw, 142px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: .78; letter-spacing: -.07em; white-space: nowrap } .proof-special .count { color: #fff } .proof-special .plus { margin-left: .04em; color: #2fb677; text-shadow: none } .proof-special .counter-label { margin-top: 27px; color: rgba(255, 255, 255, .62); font-size: 14px; letter-spacing: .03em } .proof-special .proof-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-self: stretch } .proof-special .stat { display: flex; min-width: 0; flex-direction: column; justify-content: flex-end; padding: 0 10px 2px 24px; background: none; border: 0; border-left: 1px solid rgba(255, 255, 255, .14); border-radius: 0 } .proof-special .stat .k { font-family: var(--tp-ff-inter); font-size: clamp(31px, 2.7vw, 47px); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: #fff } .proof-special .stat .t { margin-top: 12px; color: rgba(255, 255, 255, .5); font-size: 11px; letter-spacing: .13em; text-transform: uppercase } @keyframes proofBarRise { from { transform: scaleY(0) } to { transform: scaleY(1) } } @keyframes proofLineDraw { from { stroke-dashoffset: 1200 } to { stroke-dashoffset: 0 } } @media(max-width:1100px) { .proof-special .proof-overview { grid-template-columns: 1fr; gap: 38px } .proof-special .proof-stat-grid { min-height: 100px } } @media(max-width:767px) { .proof-special { padding: 58px 0 48px } .proof-special .proof-wrap { width: min(100% - 30px, 1560px) } .proof-special .proof-head { margin-bottom: 28px } .proof-special .proof-kicker { margin-bottom: 16px } .proof-special .proof-heading-row { grid-template-columns: 1fr; gap: 28px } .proof-special .proof-heading-row h2 { font-size: clamp(42px, 11.2vw, 60px) } .proof-special .proof-heading-row>p { font-size: 17px } .proof-special .proof-overview { margin-top: 30px; padding: 38px 0 } .proof-special .counter-number { font-size: clamp(47px, 12.5vw, 70px) } .proof-special .counter-label { margin-top: 20px } .proof-special .proof-stat-grid { min-height: 84px } .proof-special .stat { padding-left: 14px } .proof-special .stat:first-child { padding-left: 0; border-left: 0 } .proof-special .stat .k { font-size: 28px } .proof-special .stat .t { font-size: 9px } } /* Homepage work cards keep the source artwork's landscape proportions. */ img { height: auto } .eris-home-work .container-1580 { max-width: 1280px } /* Homepage project cards use the same wide masonry language as the Work page. */ .eris-home-work.eris-home-work--masonry .container-1580 { width: min(100% - 48px, 1830px); max-width: 1830px } .eris-home-work--masonry .eris-home-work-card { margin-bottom: 70px } .eris-home-work--masonry .eris-home-work-card-media, .eris-home-work--masonry .eris-home-work-card-media a { display: block; width: 100% } .eris-home-work--masonry .eris-home-work-card-media { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 14px; background: #101014 } .eris-home-work--masonry .eris-home-work-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; transform: scale(1); transition: transform .9s cubic-bezier(.22, 1, .36, 1) } .eris-home-work--masonry .eris-home-work-card:hover .eris-home-work-card-media img { transform: scale(1.045) } .eris-home-work--masonry .eris-home-work-card-content { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; padding: 20px 0 0 } .eris-home-work--masonry .eris-home-work-card-title { min-width: 0; margin: 0; color: #fff; font-size: clamp(22px, 1.55vw, 30px); font-weight: 600; line-height: 1.08; letter-spacing: -.04em } .eris-home-work--masonry .eris-home-work-card-title a { color: inherit } .eris-home-work--masonry .eris-home-work-card-category { flex: 0 0 auto } .eris-home-work--masonry .eris-home-work-card-category span { position: relative; display: inline-block; margin: 0; padding: 6px 18px 6px 29px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap } .eris-home-work--masonry .eris-home-work-card-category span::after { position: absolute; top: 50%; left: 11px; width: 8px; height: 8px; border-radius: 50%; background: #2fbd83; content: ""; transform: translateY(-50%) } .eris-home-work--masonry.is-lazy-reveal .eris-home-work-card-media img { opacity: 0 } .eris-home-work--masonry.is-lazy-reveal .eris-home-work-card-media.is-visible img { opacity: 1 } @media(max-width:767px) { .eris-home-work.eris-home-work--masonry .container-1580 { width: min(100% - 30px, 1830px) } .eris-home-work--masonry .eris-home-work-card { margin-bottom: 48px } .eris-home-work--masonry .eris-home-work-card-content { gap: 16px; padding-top: 16px } .eris-home-work--masonry .eris-home-work-card-title { font-size: 22px } .eris-home-work--masonry .eris-home-work-card-category span { padding: 5px 14px 5px 25px; font-size: 11px } .eris-home-work--masonry .eris-home-work-card-category span::after { left: 9px; width: 7px; height: 7px } } .eris-home-work .creative-project-thumb, .eris-home-work .creative-project-thumb a, .eris-home-work .creative-project-thumb .anim-zoomin { display: block; width: 100% } .eris-home-work .creative-project-thumb { aspect-ratio: 16 / 9 } .eris-home-work .creative-project-thumb img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover } .eris-home-work.is-lazy-reveal .creative-project-thumb img { opacity: 0 } .eris-home-work.is-lazy-reveal { visibility: hidden } .eris-home-work.is-lazy-reveal.is-section-visible { visibility: visible } .eris-home-work.is-lazy-reveal .creative-project-thumb.is-visible img { opacity: 1 } .eris-home-work .creative-project-item { margin-bottom: 72px !important; content-visibility: auto; contain-intrinsic-size: auto 380px } /* The proof section ends with two direct destinations using the site's editorial rows. */ .proof-special .proof-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; border-bottom: 1px solid rgba(255, 255, 255, .14) } .proof-special .proof-destinations a { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 24px; align-items: center; min-height: 150px; padding: 30px 36px 30px 0; color: #fff; border-right: 1px solid rgba(255, 255, 255, .14); transition: color .25s ease, background-color .25s ease } .proof-special .proof-destinations a:last-child { padding-left: 36px; border-right: 0 } .proof-special .proof-destinations a:hover { color: #2fbd83; background: rgba(255, 255, 255, .025) } .proof-special .proof-link-index { align-self: start; padding-top: 7px; color: rgba(255, 255, 255, .58); font-size: 11px; letter-spacing: .12em } .proof-special .proof-link-copy strong { display: block; color: inherit; font-family: var(--tp-monument); font-size: clamp(30px, 3vw, 50px); font-weight: 400; line-height: 1; letter-spacing: -.035em; text-transform: uppercase } .proof-special .proof-link-copy small { display: block; margin-top: 13px; color: rgba(255, 255, 255, .52); font-size: 13px; line-height: 1.4 } .proof-special .proof-link-arrow { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; font-size: 20px } /* Lightweight visual pause between performance proof and services. */ .eris-visual-interlude { position: relative; padding: 0 24px; background: #000; content-visibility: auto; contain-intrinsic-size: 720px } .proof-special:has(+ .eris-visual-interlude) { padding-bottom: 24px } .eris-visual-interlude + .creative-service-area { padding-top: 96px } .eris-visual-interlude__frame { position: relative; display: grid; min-height: clamp(520px, 72vh, 780px); overflow: hidden; place-items: center; background: #2fbd83; isolation: isolate } .eris-visual-interlude__frame::before { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(90deg, transparent calc(25% - 1px), rgba(0, 0, 0, .14) 25%, transparent calc(25% + 1px)), linear-gradient(90deg, transparent calc(50% - 1px), rgba(0, 0, 0, .14) 50%, transparent calc(50% + 1px)), linear-gradient(90deg, transparent calc(75% - 1px), rgba(0, 0, 0, .14) 75%, transparent calc(75% + 1px)); content: "" } .eris-visual-interlude__frame::after { position: absolute; width: min(66vw, 920px); aspect-ratio: 1; border: 1px solid rgba(0, 0, 0, .26); border-radius: 50%; content: "" } .eris-visual-interlude__meta { position: absolute; z-index: 3; top: 26px; right: 30px; left: 30px; display: flex; justify-content: space-between; color: #07130e; font-size: 10px; font-weight: 700; letter-spacing: .14em } .eris-visual-interlude__word { position: absolute; z-index: -1; bottom: -.13em; left: -.035em; color: rgba(0, 0, 0, .11); font-family: var(--tp-monument); font-size: clamp(170px, 31vw, 560px); font-weight: 400; line-height: .8; letter-spacing: -.08em; white-space: nowrap } .eris-visual-interlude__mark { position: relative; z-index: 2; width: clamp(340px, 43vw, 680px); max-width: 82%; height: auto; filter: brightness(0); transform: rotate(-8deg); transition: transform .7s cubic-bezier(.2, .75, .2, 1) } .eris-visual-interlude__frame:hover .eris-visual-interlude__mark { transform: rotate(0) scale(1.025) } .eris-visual-interlude__caption { position: absolute; z-index: 3; right: 30px; bottom: 27px; left: 30px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; color: #07130e; font-size: 11px; font-weight: 700; letter-spacing: .14em } .eris-visual-interlude__caption i { height: 1px; background: rgba(0, 0, 0, .45) } @media(max-width:767px) { .eris-visual-interlude { padding: 0 15px } .proof-special:has(+ .eris-visual-interlude) { padding-bottom: 15px } .eris-visual-interlude + .creative-service-area { padding-top: 72px } .eris-visual-interlude__frame { min-height: min(72vh, 620px) } .eris-visual-interlude__frame::after { width: 100vw } .eris-visual-interlude__meta { top: 20px; right: 20px; left: 20px } .eris-visual-interlude__meta span:last-child { display: none } .eris-visual-interlude__mark { width: min(88vw, 460px); max-width: none } .eris-visual-interlude__caption { right: 20px; bottom: 21px; left: 20px } } @media(prefers-reduced-motion:reduce) { .eris-visual-interlude__mark { transition: none } } /* Denser case-study typography keeps the full story readable in the sticky column. */ @media(max-width:767px) { .design-hero-ptb { padding-top: 118px; padding-bottom: 35px } .design-hero-content-wrap { margin-bottom: 38px !important } .design-hero-content .eris-home-hero-title { font-size: 25px } .design-hero-content .eris-home-hero-copy { font-size: 15px } .design-hero-wrap { margin-bottom: 32px } .design-hero-social { margin-bottom: 13px } .ar-funfact-area { margin-top: 0 } .eris-home-work .creative-project-item { margin-bottom: 48px !important } .proof-special { padding-bottom: 44px } .proof-special .proof-destinations { grid-template-columns: 1fr } .proof-special .proof-destinations a, .proof-special .proof-destinations a:last-child { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 13px; min-height: 118px; padding: 24px 0; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .14) } .proof-special .proof-destinations a:last-child { border-bottom: 0 } .proof-special .proof-link-copy strong { font-size: clamp(27px, 8vw, 38px) } .proof-special .proof-link-copy small { margin-top: 8px; font-size: 12px } .proof-special .proof-link-arrow { width: 38px; height: 38px; font-size: 17px } } /* Existing page-template refinements for Virals and media proportions. */ .des-brand-item-inner img{display:block;width:auto!important;height:auto!important;max-width:100%;max-height:100%;object-fit:contain} /* Eris Insights — editorial blog */ .eris-blog-kicker{margin:0 0 30px;color:#2fbd83;font-size:12px;font-weight:600;line-height:1;letter-spacing:.08em;text-transform:uppercase} .eris-blog-card-image{display:block;aspect-ratio:16/9;overflow:hidden;background:#101010} .eris-blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)} .eris-blog-card:hover .eris-blog-card-image img{transform:scale(1.025)} .eris-blog-card-meta{display:flex;justify-content:space-between;gap:20px;margin:20px 0 12px;color:rgba(255,255,255,.48);font-size:11px;letter-spacing:.08em;text-transform:uppercase} .eris-blog-card-meta span{color:#2fbd83} .eris-blog-card h2{max-width:780px;margin:0 0 13px;color:#fff;font-size:clamp(27px,2.2vw,40px);line-height:1.08;letter-spacing:-.035em} .eris-blog-card h2 a{color:inherit}.eris-blog-card h2 a:hover{color:#2fbd83} .eris-blog-card>p{max-width:680px;margin:0;color:rgba(255,255,255,.6);font-size:15px;line-height:1.55} .eris-home-blog{padding:125px 0;background:#050505;color:#fff;border-top:1px solid rgba(255,255,255,.1)} .eris-home-blog-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:55px}.eris-home-blog-head h2{margin:0;color:#fff;font-family:var(--tp-monument);font-size:clamp(40px,4.5vw,72px);font-weight:400;line-height:.95;letter-spacing:-.045em;text-transform:uppercase}.eris-home-blog-head>a{color:#fff;font-size:13px;font-weight:600;text-transform:uppercase}.eris-home-blog-head>a:hover{color:#2fbd83} .eris-home-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.eris-home-blog .eris-blog-card h3{margin:0 0 12px;color:#fff;font-size:clamp(23px,1.8vw,32px);line-height:1.1;letter-spacing:-.03em}.eris-home-blog .eris-blog-card h3 a{color:inherit}.eris-home-blog .eris-blog-card h3 a:hover{color:#2fbd83}.eris-home-blog .eris-blog-card>p{font-size:14px} @media(max-width:991px){.eris-home-blog-grid{grid-template-columns:1fr 1fr}.eris-home-blog-grid .eris-blog-card:last-child{display:none}} @media(max-width:767px){.eris-home-blog{padding:80px 0}.eris-home-blog-head{display:block;margin-bottom:38px}.eris-home-blog-head>a{display:inline-block;margin-top:25px}.eris-home-blog-grid{grid-template-columns:1fr;gap:55px}.eris-home-blog-grid .eris-blog-card:last-child{display:block}} @media(max-width:1199px){.des-brand-area,.studio-showcase-area{overflow:hidden}} @media(max-width:767px){.creative-service-area .creative-service-content{min-width:0;max-width:calc(100% - 70px);flex:1 1 auto}.creative-service-area .creative-service-title-info{min-width:0;max-width:100%}.creative-service-area .creative-service-title{font-size:clamp(34px,12vw,70px)}.creative-service-area .creative-service-title a{overflow-wrap:anywhere;padding-right:0}.creative-service-area .creative-service-link{flex:0 0 auto}} @media(max-width:991px){.tp-copyright-big-text{max-width:100%;font-size:clamp(36px,11vw,105px);line-height:1;letter-spacing:-.05em;white-space:nowrap}} /* Draw desktop menu chevrons without depending on the icon-font encoding. */ .tp-header-inner-style .tp-header-dropdown > nav > ul > li.has-dropdown::after{ content:""!important; display:inline-block!important; width:7px!important; height:7px!important; margin-left:7px!important; border:0!important; border-right:1.5px solid currentColor!important; border-bottom:1.5px solid currentColor!important; font-family:inherit!important; transform:translateY(-2px) rotate(45deg)!important; transition:transform .3s ease,color .3s ease!important } .tp-header-inner-style .tp-header-dropdown > nav > ul > li.has-dropdown:hover::after{ transform:translateY(2px) rotate(225deg)!important }