:root {
--color1: #36A2EB;
--color2: #4BC0C0;
--color3: #FF5C26;
--colorborder: #E7EFFB;
--colorbg: #F9FCFF;
--colorwhite: #FFFFFF;
--colorgrey: #AAAAAA;
--colortext: #555555;
--colordark: #0B0D14;
--maxwidth: 1300px;
--bradius: 8px;
--x2bradius: calc(var(--bradius) * 2);
--x10bradius: calc(var(--bradius) * 10);
--autopad: calc((100% - var(--maxwidth)) / 2);
} html { scroll-behavior: smooth; }
body {
font-family: Poppins;
font-size: 16px;
line-height: 1.8em;
color: var(--colortext);
background: #FFF;
margin: 0;
}
*,
:after,
:before {
box-sizing: border-box;
}
ul,
li {
margin: 0;
padding: 0;
} a{
color: var(--color1);
transition: .5s;
}
a:hover {
color: var(--color3);
}
a:active,
a:hover,
a:link,
a:visited {
text-decoration: none;
}
a:focus {
outline: none;
color: var(--color1);
} h1 {
font-size: 1.6em;
}
h2 {
font-size: 1.4em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5 {
font-size: 1em;
}
h1,
h2,
h3,
h4,
h5 {
margin: 10px 0;
font-weight: 600;
line-height: initial;
color: var(--colordark);
}
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
margin-top: 0;
} input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit
}
input,
select,
textarea {
padding: .5em 1em;
outline: 0;
background: #FFF;
border: 1px solid var(--colorborder);
border-radius: var(--bradius);
box-shadow: 0 2px 0 0 rgba(0,0,0,.027);
line-height: normal;
} .bttn:focus,
.button-primary:focus,
input[type='submit']:focus,
button:focus {
outline: 0;
color: var(--colorwhite);
}
.bttn,
.button-primary,
input[type='submit'],
button {
cursor: pointer;
padding: .5em 1.2em;
background: var(--color1);
border: none;
outline: 0;
color: var(--colorwhite);
transition: .3s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
line-height: normal;
font-family: inherit;
font-size: inherit;
border-radius: var(--bradius);
position: relative;
overflow: hidden;
z-index: 1;
}
.bttn._ghost {
background: transparent;
border: 1px solid var(--colorborder);
color: var(--color1);
font-weight: 500;
overflow: hidden;
}
.bttn._ghost:hover:after {
background: var(--color1);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
z-index: -1;
opacity: .1;
}
.bttn._ghost:hover {
color: var(--color1);
border-color: var(--color1);
}
.bttn:before,
.button-primary:before,
input[type='submit']:before,
button:before {
content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0.15);
transform: translateX(-110%) skewX(-20deg);
transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);;
}
.bttn:hover::before ,
.button-primary:hover::before ,
input[type='submit']:hover::before ,
button:hover::before  { 
transform: translateX(110%) skewX(-20deg);
}
.bttn:hover,
.button-primary:hover,
.form-submit input:hover,
button:hover {
color: var(--colorwhite);
transform: translateY(-2px);
}
input[type=text]:focus,
select:focus,
textarea:focus {
background: #FCFCFC;
}
textarea::placeholder,
input::placeholder {
color: #AAA;
} blockquote {
font-size: 110%;
width: 95%;
margin: 20px auto;
font-style: italic;
padding: 10px 40px;
border: 1px solid var(--colorborder);
position: relative;
background: var(--colorbg);
border-radius: var(--bradius);
}
blockquote::before {
font-family: arial, sans-serif;
content: "\201C";
color: var(--color1);
font-size: 6em;
position: absolute;
left: 0;
top: 15px;
}
blockquote::after {
content: '';
}
code {
background: var(--colordark);
color: var(--colorborder);
padding: 20px;
display: block;
border-radius: var(--bradius);
} .wp-caption {
width: auto!important;
}
img,
img.alignnone,
p img {
max-width: 100%;
}
img {
height: auto;
}
a img {
border: none;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
}
img.aligncenter {
display: block;
margin: 10px auto;
}
img.alignright {
display: inline;
margin: 0 0 5px 5px;
}
img.alignleft {
display: inline;
margin: 0 5px 5px 0;
}
.wp-caption img {
margin: 0;
padding: 0;
border: none;
}
.wp-caption p.wp-caption-text {
font-style: italic;
font-size: .8em;
padding: 0;
background: #ffffff90;
margin: 0;
text-align: center;
}
.wp-caption.aligncenter {
display: block;
margin: 10px auto;
}
.wp-caption.alignleft {
float: left;
margin: 5px 10px 5px 0;
}
.wp-caption.alignright {
float: right;
margin: 5px 0 5px 10px;
}   @keyframes blinker {
50% {
opacity: 0;
}
}
.blink {
animation: blinker 1s linear infinite;
} @keyframes pulse-glow {
0%, 100% { transform: scale(1) translateX(20%); opacity: .1; }
50% { transform: scale(3) translateY(-40%); opacity: 0.05; }
} @keyframes fadeDown {
from { opacity:0; transform:translateY(-14px); }
to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
from { opacity:0; transform:translateY(22px); }
to   { opacity:1; transform:translateY(0); }
} @keyframes floatingIn{
from{
opacity: 0;
transform: translateY(20px) scale(.95);
}
to{
opacity: 1;
transform: translateY(0) scale(1);
}
} @keyframes float {
0%,100% { transform: translateY(0px); }
50% { transform: translateY(-12px); }
} @keyframes orbFloat {
0%,100% { opacity:.2; transform:translateX(-50%) translateY(0); }
50%      { opacity:.5;  transform:translateX(-50%) translateY(22px); }
} @keyframes shimmer {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.shimmer {
color: transparent;
background: linear-gradient(120deg, var(--color1) 10%, var(--color2) 55%, var(--color1) 90%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
animation: shimmer 3s linear infinite;
} @keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(-50px)
}
80% {
transform: translateX(10px)
}
100% {
opacity: 1;
transform: translateX(0px)
}
} @keyframes button-callout {
0% {
opacity: 0
}
40% {
opacity: 0;
transform: translateX(100%) perspective(50em) rotateY(50deg)
}
to {
opacity: 1;
visibility: visible
}
}
.callout {
animation: button-callout 1s ease-in-out;
opacity: 1;
visibility: visible;
} @media (prefers-reduced-motion: no-preference) {
@keyframes animateAmbient {
0% {
transform: rotate(0deg) translateX(.5em) rotate(0deg) scale(1.12);
}
100% {
transform: rotate(360deg) translateX(2em) rotate(-360deg) scale(1.12);
}
}
}  .small {
font-size: .8em!important;
}
.medium {
font-size: .9em!important;
}
.big {
font-size: 1.4em!important;
line-height: 1.2;
}
.jumbo {
font-size: 2.7em!important;
line-height: 1.2;
}
.hidden {
font-size: 0;
}
.bgreen {
background: var(--color2);
}
.borange {
background: var(--color3);
}
.tblue {
color: var(--color1);
}
.tgreen {
color: var(--color2);
}
.torange {
color: var(--color3);
}
.tgrey {
color: #CCCCCC;
}
.twhite {
color: #FFF!important;
}
.error,
.tred {
color: red
}
.stabilo {
border-radius: .5em 0 1em 0;
padding: 0 5px 0 5px;
margin-right: -5px;
background-image: linear-gradient(
-100deg,
rgba(255, 224, 0, 0.1),
rgba(255, 224, 0, 0.5) 95%,
rgba(255, 224, 0, 0.1)
);
font-style: normal;
text-shadow: 0px 1px 1px #fff;
}   .info,
.notice,
.notis,
.sukses,
.warning {
width: 100%;
padding: 15px 20px;
background: var(--colorbg);
border: 1px solid var(--colorborder);
overflow: hidden;
border-radius: var(--bradius);
}
.notice,.notis {
background: #FFFFEC;
border-color: #FFB973;
color: #FF8000;
}
.warning {
background: #ffe2e2;
border-color: #f7b1b1;
color: red;
}
.sukses {
background: #D9F4DB;
border-color: #4CAF50;
color: #4CAF50;
} .latin {
font-size: 1.1em;
font-style: italic;
padding-right: 10px;
margin-right: -10px;
}
.glyphicon,
[class*=el-icon-] {
font-size: 80%;
margin-right: 2px;
}
.rounded {
border-radius: var(--bradius);
}
.circle {
border-radius: 50%;
} .nm > * {
margin: 0 !important;
}
.nomargin {
margin: 0 !important;
}
.nomargin-top {
margin-top: 0 !important;
}
.nomargin-bottom {
margin-bottom: 0 !important;
}
.center {
text-align: center;
}
.coret {
text-decoration: line-through;
}   .flex {
display: flex;
}
.flex.column {
flex-direction: column;
} .grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
}
.grid.two-col {
grid-template-columns: repeat(2, 1fr);
}
.grid.three-col {
grid-template-columns: repeat(3, 1fr);
}
.grid.four-col {
grid-template-columns: repeat(4, 1fr);
} .gap-5 {
gap: 5px;
}
.gap-10 {
gap: 10px;
}
.gap-15 {
gap: 15px;
}
.gap-20 {
gap: 20px;
}
.gap-30 {
gap: 30px;
}
.gap-40 {
gap: 40px;
}
.gap-50 {
gap: 50px;
} .row {
display: flex;
flex-wrap: wrap;
}
.justify-center {
justify-content: center;
}
.align-items-center {
align-items: center;
}  .card {
background: var(--colorwhite);
border: 1px solid var(--colorborder);
transition: all .5s ease;
border-radius: var(--x2bradius);
overflow: hidden;
padding: 20px;
cursor: default;
position: relative;
display: flex;
flex-direction: column;
}
.card.no-padding {
padding: 0;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color1), var(--color2));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.card:hover::before { transform: scaleX(1); }
.card:hover {
transform: translateY(-6px);
}
.card ._pigura {
width: 100%;
height: 260px;
overflow: hidden;
display: block;
position: relative;
}
.card ._pigura img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all .35s ease;
}
.card:hover ._pigura img {
transform: scale(1.1);
}
.card ._pigura ._overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
opacity: 0;
transition: all .35s ease;
}
.card ._pigura ._overlay:before {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: var(--colorwhite);
content: '';
opacity: 0.7;
}
.card:hover ._pigura ._overlay {
opacity: 1;
}
.card ._pigura ._overlay ._ghost {
background: #ffffffcc;
}
.card ._pigura ._badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
font-size: .7em;
line-height: normal;
font-weight: 600;
letter-spacing: .8px;
text-transform: uppercase;
color: #fff;
background: var(--colordark);
padding: 4px 14px;
border-radius: var(--x10bradius);
}
.card ._pigura ._badge._new {
background: var(--color3);
}
.card ._pigura ._badge._popular {
background: var(--color2);
}
.card ._content {
display: flex;
gap: 5px;
flex-direction: column;
flex: 1;
position: relative;
}
.card.no-padding ._content {
padding: 20px;
border-top: 1px solid var(--colorborder);
}
.card ._content ._cat {
font-size: .7em;
color: var(--color1);
text-transform: uppercase;
margin: -5px 0!important;
}
.card ._content ._cat a:after {
content: ' / ';
font-size: .8em;
color: var(--color1);
}
.card ._content ._cat a:last-child:after {
content: '';
}
.card ._content h3 a {
color: var(--colordark);
}
.card ._content ._desc {
line-height: 1.6em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 3;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
.card ._content ._desc > * {
margin: 0;
}
.card ._footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid var(--colorborder);
margin-top: 15px!important;
}
.card ._content ul li {
margin: 0 0 5px 20px;
}
.card ._content ul li._no {
text-decoration: line-through;
color: #c2c9d1;
}
.card ._content ul li._yes {
font-weight: 500;
color: var(--color2);
} .card._list {
flex-direction: row;
gap: 20px;
align-items: center;
}
.card._list ._pigura {
width: 150px;
height: 150px;
flex-shrink: 0;
border-radius: var(--x10bradius);
border: 1px solid var(--colorborder);
} .card._theme ._pigura {
height: 340px;
}
.card._theme ._pigura img {
object-position: top;
}
.card._theme:hover ._pigura img {
filter: blur(3px);
}
.card._theme ._content h3 {
font-size: 1.5em;
}
.card._theme ._pricing ._start {
font-size: .8em;
}
.card._theme ._pricing {
display: flex;
flex-direction: column;
gap: 0;
line-height: normal;
}
.card._theme ._pricing ._start b {
text-decoration: line-through;
color: #c2c9d1;
font-size: 1.1em;
}
.card._theme ._pricing ._start ._discount {
position: absolute;
top: 20px;
right: 20px;
font-style: normal;
border: 1px solid #ff5c2638;
background: #ff5c2614;
line-height: 1em;
padding: 5px 10px;
border-radius: var(--x10bradius);
color: var(--color3);
text-transform: uppercase;
}
.card._theme ._pricing ._price b {
font-size: 1.4em;
font-weight: 700;
color: var(--colordark);
} .group-card {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--colorborder);
border: 1px solid var(--colorborder);
border-radius: var(--x2bradius);
overflow: hidden;
z-index: 1;
}
.group-card ._card > * {
margin: 0;
}
.group-card ._card {
position: relative;
padding: 30px;
display: flex;
background: var(--colorbg);
flex-direction: column;
gap: 15px;
overflow: hidden;
cursor: default;
transition: background .3s ease;
}
.group-card ._card:hover { background: var(--colorwhite); }
.group-card ._card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color1), var(--color2));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
.group-card ._card:hover::before { transform: scaleX(1); }
.group-card ._card ._icon {
width: 56px; 
height: 56px;
border-radius: var(--x10bradius);
border: 1px solid var(--color1);
display: flex;
align-items: center;
justify-content: center;
transition: background .3s, border-color .3s, transform .3s;
flex-shrink: 0;
}
.group-card ._card:hover ._icon {
border-color: var(--color3)!important;
transform: translateY(-3px);
}
.group-card ._card ._icon svg {
width: 26px;
height: 26px;
stroke: var(--color1);
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke .3s;
}
.group-card ._card:hover ._icon svg {
stroke: var(--color3)!important;
}
.group-card ._card:nth-child(even) ._icon {
border-color: var(--color2);
}
.group-card ._card:nth-child(even) ._icon svg {
stroke: var(--color2);
}
.group-card ._card h3 {
padding-top: 10px;
}
.group-card ._card ._badge {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid var(--color1);
color: var(--color1);
border-radius: var(--x10bradius);
padding: 5px 10px;
line-height: 1.2em;
font-size: .75em;
width: fit-content;
letter-spacing: .2px;
}
.group-card ._card ._badge ._dot {
width: 6px;
height: 6px;
background: var(--color1);
display: inline-block;
border-radius: 50%;
}
.group-card ._card:nth-child(even) ._badge {
border-color: var(--color2);
color: var(--color2);
}
.group-card ._card:nth-child(even) ._badge ._dot {
background: var(--color2);
}  .marquee3k ._item {
display: inline-flex;
align-items: center;
gap: 60px;
padding-right: 60px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: .9em;
color: var(--colorwhite);
}
.marquee3k ._item:after {
content: "✦";
display: block;
opacity: .5;
}  .trust {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
justify-content: space-between;
align-items: center;
padding: 20px 0;
z-index: 1;
animation: fadeUp .8s ease .6s both;
}
.trust._full {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(255, 255, 255, .018);
border-top: 1px solid rgba(255, 255, 255, .07);
grid-template-columns: repeat(4, 1fr);
padding: 20px var(--autopad);
}
.trust ._item {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
.trust svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.trust ._item ._label {
font-size: .9em;
line-height: normal;
}
.trust ._item ._label b {
font-size: 1.1em;
color: var(--colorwhite);
}  .browser {
border-bottom: 1px solid var(--colorborder);
background: var(--colorwhite);
padding: 10px 15px;
display: flex;
gap: 5px;
align-items: center;
}
.browser ._dot {
width: 10px;
height: 10px;
border-radius: 50%;
opacity: .55;
}
.browser ._dot:nth-child(1) {
background: #FF5F57;
}
.browser ._dot:nth-child(2) {
background: #FEBC2E;
}
.browser ._dot:nth-child(3) {
background: #28C840;
}
.browser ._bar {
flex: 1;
height: 10px;
background: rgba(0, 0, 0, .03);
border-radius: 3px;
margin-left: 7px;
}  section.container {
position: relative;
overflow: hidden;
}
section.container.bg-soft {
background: var(--colorbg);
border-top: 1px solid var(--colorborder);
border-bottom: 1px solid var(--colorborder);
}
section.container.bg-linear {
border-top: 1px solid var(--colorborder);
background: linear-gradient(to bottom, var(--colorbg), var(--colorwhite));
}
section.container.bg-dark {
color: var(--colorgrey);
background: var(--colordark);
}
section.container.bg-dark h1,
section.container.bg-dark h2{
color: var(--colorwhite);
}
section.container.bg-grid:after {
position: absolute;
content: "";
inset: 0;
background-image: linear-gradient(var(--colordark) 1px, transparent 1px), linear-gradient(90deg, var(--colordark) 1px, transparent 1px);
background-size: 70px 70px;
mask-image: radial-gradient(ellipse 55% 55% at 50% 50%, black, transparent);
opacity: .05;
}
section.container.bg-dark.bg-grid:after {
background-image: linear-gradient(var(--colorwhite) 1px, transparent 1px), linear-gradient(90deg, var(--colorwhite) 1px, transparent 1px);
}
section.container > ._header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 900px;
margin: 0 auto 40px;
position: relative;
z-index: 1;
}
section.container > ._header ._pretitle {
font-size: 0.9em;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color3);
display: inline-flex;
align-items: center;
gap: 10px;
}
section.container > ._header ._pretitle::before {
content: '';
width: 20px;
height: 2px;
background: var(--color3);
border-radius: 2px;
}
section.container > ._header ._pretitle::after {
content: '';
width: 20px;
height: 2px;
background: var(--color3);
border-radius: 2px;
}
section.container > ._header ._title {
font-size: 3.6em;
font-weight: 700;
line-height: 1.2em;
margin-top: 0.5rem;
}
section.container > ._header > p {
font-size: 1.2em;
max-width: 800px;
margin: 10px 0;
}
section.container > ._header._left {
align-items: flex-start;
text-align: left;
margin-left: 0;
}
section.container > ._header._left ._pretitle::after {
display: none;
}
section.container > ._header._left:has(._more) {
max-width: 100%;
padding-right: 200px;
}
section.container > ._header._left ._more {
position: absolute;
bottom: 20px;
right: 0;
}
section.container > ._content {
position: relative;
z-index: 1;
}
section.container ._circle-1 {
position: absolute;
width: 600px; height: 600px;
border: 1px solid var(--color1);
border-radius: 50%;
top: -150px; left: 500px;
animation: pulse-glow 28s ease-in-out infinite reverse;
}
section.container ._circle-2 {
position: absolute;
width: 700px;
height: 700px;
border: 1px solid var(--color2);
border-radius: 50%;
bottom: -50px;
right: -400px;
animation: pulse-glow 24s ease-in-out infinite;
}
section.container ._circle-3 {
position: absolute;
width: 500px; height: 500px;
border: 1px solid var(--color3);
border-radius: 50%;
bottom: -100px; left: -200px;
animation: pulse-glow 20s ease-in-out infinite;
}
section.container ._orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
width: 700px;
height: 420px;
background: radial-gradient(circle, var(--color1) 0%, transparent 70%);
top: -160px;
left: 50%;
transform: translateX(-50%);
animation: orbFloat 7s ease-in-out infinite;
}  .container {
width: 100%;
padding: 80px var(--autopad);
margin: 0;
}
.container .medium-width {
max-width: 800px;
margin: 0 auto;
}
.single.container {
display: flex;
gap: 30px;
}
.single.container .column-left {
position: sticky;
top: 20px;
height: fit-content;
}
.single.container .column-right {
position: sticky;
flex-shrink: 0;
width: 400px;
top: 20px;
height: fit-content;
}  .hero {
padding: 120px var(--autopad);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.hero._single {
min-height: 400px;
padding: 140px var(--autopad) 90px;
}
.hero._single ._header {
margin-bottom: 0;
animation: fadeUp .65s ease .25s both;
} .hero ._content {
max-width: 1100px;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
gap: 30px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero ._content > p {
font-size: 1.2em;
animation: fadeUp .65s ease .25s both;
max-width: 600px;
margin: 0 auto;
} .hero ._badge {
border: 1px solid var(--color2);
color: var(--color2);
padding: 5px 15px;
border-radius: var(--x10bradius);
display: inline-flex;
align-items: center;
align-self: center;
gap: 10px;
position: relative;
overflow: hidden;
margin-bottom: -10px;
font-size: .9em;
animation: fadeUp .55s ease .05s both;
}
.hero ._badge:before {
position: absolute;
left: 0;
content: "";
width: 100%;
height: 100%;
background: var(--color2);
opacity: .1;
}
.hero ._badge ._dot {
width: 10px;
height: 10px;
background: var(--color2);
display: inline-block;
border-radius: 50%;
} .hero ._cat {
font-size: .9em;
color: var(--color2);
text-transform: uppercase;
margin-bottom: -15px !important;
}
.hero ._cat a {
color: var(--color2);
}
.hero ._cat a:after {
content: ' / ';
font-size: .8em;
color: var(--color2);
}
.hero ._cat a:last-child:after {
content: '';
} .hero ._action {
display: flex;
justify-content: center;
align-items: center;
padding-top: 15px;
gap: 20px; }
.hero .bttn {
font-size: 1.1em;
padding: 15px 30px;
font-weight: 500;
background: var(--color3);
}
.hero ._ghost {
border-color: rgba(255, 255, 255, .2);
background: none;
color: var(--colorgrey);
}
.hero ._ghost:hover {
color: var(--colorwhite);
border-color: rgba(255, 255, 255, .2);
}
.hero ._ghost:hover:before {
display: none;
}   #header {
padding: 20px var(--autopad);
position: absolute;
width: 100%;
top: 0;
z-index: 2;
grid-template-columns: 270px auto 30px;
gap: 20px;
display: grid;
color: #DDD;
animation: fadeDown .5s ease both;
}
#header > div {
display: flex;
align-items: center;
}
.headlogo a {
font-size: 250%;
color: #DDD;
text-shadow: 3px 3px 0 #000, 6px 6px 0 rgba(0, 0, 0, .05)
}
.headlogo p {
margin: 0;
font-size: 110%
}
.headmenu {
font-size: 90%;
text-transform: uppercase;
justify-self: end;
display: flex;
align-items: center;
} .toggleMenu {
display: none;
color: #FFF;
cursor: pointer;
padding: 5px 10px;
width: 80px;
}
.toggleMenu:hover,
.naviku a:hover {
color: #FFF9;
}
.naviku>li {
list-style: none;
text-align: left;
float: left;
padding: 15px 10px;
}
.naviku a {
padding: 5px 10px;
color: #FFF;
}
.naviku:after {
display: table;
clear: both;
}
.naviku>li>a {
display: block
}
.naviku ul {
list-style: none;
width: 200px
}
.naviku li {
position: relative
}
.naviku>li>.parent {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme/images/downArrow.png);
padding-right: 25px;
background-repeat: no-repeat;
background-position: right
}
.naviku>li.hover>.parent {
background-image: url(//www.oketheme.com/wp-content/themes/oketheme/images/upArrow.png);
}
.naviku li ul {
position: absolute;
text-transform: none;
padding: 10px;
background: rgba(0, 0, 0, .7);
border-radius: 8px;
left: calc(100% /2 - 105px);
top: 100%;
display: none;
}
.naviku li ul::before {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 100%;
left: calc(100% /2 - 5px);
border-width: 0 10px 10px;
border-color: transparent transparent rgba(0, 0, 0, .7) transparent;
border-style: solid;
}
.naviku>li.hover>ul {
display: block
}
.naviku li li a {
display: block;
padding: 5px 10px
} .headsearch {
position: relative;
justify-content: center;
padding-left: 20px;
}
.headsearch i {
cursor: pointer;
}
.headsearch form {
display: none;
position: absolute;
right: 5px;
top: 100%;
background: rgba(0, 0, 0, .7);
padding: 15px;
border-radius: var(--bradius);
border-top-right-radius: 0;
width: 260px;
}
.headsearch form::before {
position: absolute;
content: "";
width: 0;
height: 0;
bottom: 100%;
right: 0;
border-width: 0 0 10px 12px;
border-color: transparent transparent rgba(0, 0, 0, .7) transparent;
border-style: solid;
}
.headsearch input {
width: 100%;
box-sizing: border-box;
border: none;
border-bottom: 1px solid #FFFFFF30;
color: #FFF;
background: none;
border-radius: 0;
padding: 0 0 10px;
font-size: .9em;
}  #hero._home {
padding: 140px var(--autopad) 90px;
min-height: 100vh;
}
#hero h1 {
font-size: 5.2em;
line-height: 1.1em;
font-weight: 700;
color: var(--colorwhite);
animation: fadeUp .65s ease .15s both;
}  #headline > ._header {
margin-bottom: 30px;
}
#headline .group-card {
grid-template-columns: repeat(3, 1fr);
margin-top: 10px!important;
}
#headline .group-card ._card {
padding: 20px;
background: var(--colorwhite);
text-align: center;
gap: 0;
}
#headline .group-card ._card h3 {
font-size: 2.6em;
font-weight: 700;
line-height: 1.1em;
padding-top: 0;
}
#headline .group-card ._card h3 span {
color: var(--color1);
}
#headline .group-card ._card p {
font-size: .9em;
}
#headline ._rating {
position: absolute;
bottom: calc(100% + 50px);
right: 20px;
z-index: 1;
display: flex;
flex-direction: column;
width: 110px;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
border-radius: var(--bradius);
padding: 7px 10px;
text-align: center;
animation: float 5s ease-in-out infinite 1s;
}
#headline ._rating b {
font-size: 1.5em;
font-weight: 700;
}
#headline ._rating span {
font-size: .8em;
line-height: normal;
}
#headline ._visual {
margin-top: -200px;
max-width: 600px;
animation: float 5s ease-in-out infinite 2s;
}  #features-marquee {
background: var(--color1);
padding: 10px 0;
overflow: hidden;
position: relative;
}  #persona > ._content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
#persona ._card {
position: relative;
border-radius: var(--x2bradius);
border: 1px solid var(--colorborder);
background: var(--colorwhite);
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
overflow: hidden;
cursor: default;
transition: .3s ease;
}
#persona ._card:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0; left: 0;
background: var(--color1);
opacity: .07;
}
#persona ._card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color1), var(--color2));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
#persona ._card:hover {
transform: translateY(-6px);
}
#persona ._card:hover::after { transform: scaleX(1); }
#persona ._card > img {
max-width: 280px;
padding: 20px;
}
#persona ._card ._content {
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
background: var(--colorwhite);
flex-grow: 1;
z-index: 1;
position: relative;
overflow: hidden;
}
#persona ._tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: .7em;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--color1);
margin-bottom: -20px!important;
}
#persona ._tag:before {
content: '';
width: 6px;
height: 6px;
background: var(--color1);
border-radius: 10px;
}
#persona h3 {
font-size: 1.8em;
line-height: 1.1em;
font-weight: 700;
}
#persona ul li {
list-style-type: none;
display: flex;
gap: 10px;
font-size: .9em;
}
#persona ._dot {
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: relative;
z-index: 1;
margin-top: 5px;
}
#persona ._dot:before {
position: absolute;
content: '';
top: 0; left: 0;
width: 100%;
height: 100%;
background: var(--color1);
opacity: .1;
}
#persona li svg {
width: 10px;
height: 10px;
stroke: var(--color1);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
#persona ._card:nth-child(2):before,
#persona ._card:nth-child(2) ._tag:before,
#persona ._card:nth-child(2) ._dot:before {
background: var(--color2);
}
#persona ._card:nth-child(2) ._tag {
color: var(--color2);
}
#persona ._card:nth-child(2) li svg {
stroke: var(--color2);
}
#persona ._card:nth-child(3):before,
#persona ._card:nth-child(3) ._tag:before,
#persona ._card:nth-child(3) ._dot:before {
background: var(--color3);
}
#persona ._card:nth-child(3) ._tag {
color: var(--color3);
}
#persona ._card:nth-child(3) li svg {
stroke: var(--color3);
}  #showcase {
background: radial-gradient(circle, var(--colorbg), var(--colorwhite));
border-bottom: 1px solid var(--colorborder);
}
#showcase > ._content {
gap: 20px;
}
#showcase .card ._footer {
display: none;
}
#showcase .card._other {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 10px;
background: none;
border-style: dashed;
}
#showcase .card._other:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
top: 0; left: 0;
background: var(--color1);
opacity: .03;
z-index: -1;
transition: .3s ease;
}
#showcase .card._other:hover:after {
opacity: .07;
}
#showcase .card._other ._circle {
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
border: 1px solid var(--colorborder);
}
#showcase .card._other ._circle svg {
width: 18px;
height: 18px;
stroke: var(--color1);
stroke-width: 2.2;
fill: none;
stroke-linecap: round;
}
#showcase .card._other:hover ._circle {
transform: scale(1.1);
}
#showcase .card._other ._ghost {
background: var(--colorwhite);
}  #client {
background: var(--colorwhite);
padding: 60px 0;
position: relative; 
z-index: 2;
display: flex;
flex-direction: column; 
gap: 40px;
overflow: hidden;
}
#client::before {
left: 0;
background: linear-gradient(to right, #fff 10%, transparent 90%);
}
#client::after {
right: 0;
background: linear-gradient(to left, #fff 10%, transparent 90%);
}
#client::before,
#client::after {
content: '';
position: absolute; top: 0; bottom: 0;
width: 200px; z-index: 3;
pointer-events: none;
}
#client img {
height: 60px;
width: auto;
max-width: 200px;
object-fit: contain;
flex-shrink: 0;
margin: 0 30px;
filter: saturate(0.8) opacity(0.7);
transition: filter .25s, transform .25s;
}
#client img:hover {
filter: saturate(1) opacity(1);
transform: scale(1.1);
}  #testimonial .owl-item {
padding: 10px;
}
#testimonial ._rating {
display: flex;
gap: 10px;
align-items: center;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
padding: 5px 15px;
border-radius: var(--x10bradius);
font-size: .9em;
margin-top: 20px;
}
#testimonial ._rating b {
font-size: 1.3em;
color: var(--colordark);
}
#testimonial ._rating ._google{
max-width: 80px;
}
#testimonial ._comment {
text-overflow: ellipsis;
display: -webkit-box;
line-clamp: 4;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
line-clamp: 4;
}
#testi-page .card {
width:calc(33.333% - 13px);
margin-bottom:20px;
float: left;
}
.testi-card ._rate {
display: flex;
gap: 20px;
justify-content: space-between;
align-items: center;
}
.testi-card ._comment {
position: relative;
overflow: hidden;
flex: 1;
}
.testi-card ._comment::before {
font-family: Georgia, Times, 'Times New Roman', serif;
content: "\201C";
color: #eee;
font-size: 6em;
height: 20px;
display: inline-block;
vertical-align: middle;
margin: 0 30px 5px 0;
position: relative;
top: 20px;
}
.testi-card ._detail {
display: flex;
gap: 20px;
align-items: center;
border-top: 1px solid var(--colorborder);
padding-top: 20px;
}
.testi-card ._detail h3 {
font-size: 1.1em;
margin: 0;
}
.testi-card ._initial {
width: 46px;
height: 46px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--color1);
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
font-size: 1.2em;
background: var(--color1);
}
.testi-card ._info {
font-size: .9em;
line-height: 1.2em;
color: var(--colorgrey);
}
.testi-card .ratestar {
max-width: 90px;
}
#testimonial .owl-item:nth-child(3n+2) ._initial {
background: var(--color2);
}
#testimonial .owl-item:nth-child(3n+3) ._initial {
background: var(--color3);
}  #support {
padding-bottom: 100px;
}
#support:before {
display: none;
content: '';
position: absolute;
left: 50%;
top: 30px;
transform: translateX(-50%);
background-image: url(//www.oketheme.com/wp-content/themes/oketheme/images/ca-hover.png);
background-repeat: no-repeat;
background-size: contain;
width: 500px;
height: 1000px;
opacity: .02;
}
#support ._content {
display: flex;
gap: 50px;
}
#support ._content h2 {
font-size: 2.8em;
margin-bottom: 30px
}
#support ._content ul li {
padding: 3px 0;
margin-left: 20px
}
#support ._visual {
width: 420px;
margin-top: -180px;
position: relative;
flex-shrink: 0;
}
#support ._visual .ca {
animation: float 5s ease-in-out infinite 1s;
}
#support ._visual .shine {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 700px;
z-index: -1;
opacity: .3;
}
#support ._badge {
position: absolute;
z-index: 1;
display: flex;
gap: 10px;
align-items: center;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
border-radius: var(--x10bradius);
padding: 2px 10px;
text-align: center;
font-weight: 500;
font-size: .9em;
}
#support ._badge._fast {
bottom: 160px;
right: 10px;
animation: float 5s ease-in-out infinite 3s;
}
#support ._badge._wa {
top: 90px;
left: 20px;
right: unset;
animation: float 6s ease-in-out infinite 2s;
}
#support ._badge._live {
top: 40px;
right: 30px;
animation: float 7s ease-in-out infinite 3s;
}
#support ._badge._ticket {
bottom: 110px;
left: 0;
animation: float 6s ease-in-out infinite 3s;
}
#support ._badge:before {
content: '';
width: 10px;
height: 10px;
background: var(--colortext);
border-radius: 10px;
animation: blinker 2s linear infinite;
}
#support ._badge._wa:before {
background: var(--color2);
}
#support ._badge._ticket:before {
background: var(--color3);
}
#support ._badge._live:before {
background: var(--color1);
}  #cta {
padding: 0 var(--autopad);
overflow: unset;
}
#cta ._content {
background: #121422;
border: 1px solid #1b2134;
padding: 60px;
border-radius: 30px;
max-width: 100%;
top: -40px;
}
#cta ._content > * {
position: relative;
}
#cta ._content:before {
position: absolute;
content: "";
inset: 0;
background-image: linear-gradient(var(--colorwhite) 1px, transparent 1px), linear-gradient(90deg, var(--colorwhite) 1px, transparent 1px);
background-size: 70px 70px;
mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent);
opacity: .07;
}
#cta ._content > ._header ._title {
font-size: 3.6em;
font-weight: 700;
line-height: 1.2em;
margin-top: 0.5rem;
}  #footer {
background: linear-gradient(to bottom, var(--colordark), #1E2134);
position: relative;
color: var(--colorgrey);
padding-bottom: 20px;
display: flex;
flex-direction: column;
gap: 200px;
overflow: hidden;
}
#footer a {
color: var(--colorgrey);
}
#footer a:hover {
color: var(--colorwhite);
}
#footer:before {
position: absolute;
content: '';
bottom: 0;
left: 0;
height: 100%;
width: 100%;
background: url(//www.oketheme.com/wp-content/themes/oketheme/images/footer-bg.png) center bottom repeat-x;
z-index: 1;
}
#footer h4 {
color: var(--colorwhite);
font-size: 1.5em;
}
#footer ._orb {
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
width: 100%;
height: 600px;
background: radial-gradient(circle, var(--color1) 0%, transparent 70%);
bottom: -200px;
left: 50%;
transform: translateX(-50%);
animation: orbFloat 7s ease-in-out infinite;
z-index: 0;
}
.footbar {
margin-bottom: 20px;
padding: 20px 0;
position: relative;
z-index: 1;
}
.footbar a:hover {
color: var(--color3);
}
.footbar ul li {
padding: 5px 0;
margin-left: 5px;
list-style: none;
}
.copyright {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
position: relative;
z-index: 1;
font-size: .9em;
line-height: 1.1em;
}
.copyright h5 {
color: var(--colorgrey);
font-weight: 500;
margin: 0;
}   #theme.container {
padding-top: 50px;
} .theme-filter {
position: sticky;
top: 0;
width: 100%;
gap: 0;
z-index: 99;
background: var(--colorbg);
padding: 0 var(--autopad);
border-bottom: 1px solid var(--colorborder);
}
.theme-filter > div {
height: 80px;
display: flex;
align-items: center;
}
.theme-filter ul {
display: flex;
gap: 15px;
align-items: center;
padding: 5px 0;
}
.theme-filter ul li {
list-style-type: none;
padding: 5px 15px;
border-radius: var(--x10bradius);
line-height: 1.2em;
border: 1px solid var(--colorborder);
background: var(--colorwhite);
color: #888;
transition: all .3s ease;
}
.theme-filter ul li:hover {
color: var(--colortext);
}
.theme-filter ul li:has(input[type="radio"]:checked)  {
background: var(--color1);
color: #FFF;
border-color: var(--color1);
}
.theme-filter input {
display: none;
}
.theme-filter label {
cursor: pointer;
} .theme-header {
padding-bottom: 10px;
border-bottom: 1px solid var(--colorborder);
margin-bottom: 20px;
display: flex;
gap: 25px;
align-items: center;
}
.theme-header #dev-select {
margin-left: auto;
}
.theme-header #dev-select select {
padding: 2px 5px;
margin-left: 5px;
}
.theme-header .tblue {
border: 1px solid var(--colorborder);
padding: 2px 10px;
border-radius: var(--x10bradius);
margin-left: 5px;
} .theme-grid {
margin: 0 -10px;
}
.theme-grid .card-cover {
float: left;
width: 33.33%;
padding: 10px;
}
.theme-grid .card ._pigura {
height: 280px;
}
.contain.type-taxo {
padding-top: 10px;
}
.theme-container.type-taxo {
padding: 35px;
}
.theme-container.type-taxo .flex-container {
justify-content: space-between;
align-items: center;
}
.theme-container.type-taxo .flex-container > *:last-child {
margin-left: auto;
}
.theme-type {
line-height: 2em;
}
.theme-type a {
display: inline-block;
border: 1px solid  var(--color1);
padding: 2px 10px;
border-radius: 20px;
margin: 2px 0;
}
.theme-type a:hover {
border-color: var(--color3)
}
.themehead .theme-type a {
border-color: #FFF;
color: #FFF;
padding: 2px 15px;
margin-top: 10px;
} .themeprice {
display: flex;
gap: 3px;
justify-content: center;
color: var(--color3);
}
.themeprice span {
font-size: 1.5em;
font-weight: 700;
line-height: 1.5em;
}  #hero._theme {
flex-direction: row;
gap: 40px;
padding-bottom: 140px;
min-height: 100vh;
}
#hero._theme ._content {
text-align: left;
align-items: flex-start;
gap: 20px;
}
#hero._theme h1 .latin {
display: block;
font-size: .6em;
line-height: 1.2em;
}
#hero._theme ._content p {
max-width: 100%;
}
#hero._theme ._pricing {
display: flex;
flex-direction: column;
}
#hero._theme ._start {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0 10px;
}
#hero._theme ._start ._text {
width: 100%;
}
#hero._theme ._start b {
text-decoration: line-through;
font-size: 1.1em;
color: var(--colorwhite);
opacity: .8;
}
#hero._theme ._start i {
font-style: normal;
border: 1px solid #ff5c2638;
background: #ff5c2614;
line-height: 1em;
padding: 4px 10px;
border-radius: var(--x10bradius);
color: var(--color3);
font-size: .9em;
font-weight: 600;
text-transform: uppercase;
}
#hero._theme ._price b {
font-size: 3.2em;
font-weight: 900;
letter-spacing: -2px;
line-height: 1.2em;
color: var(--colorwhite);
}
#hero._theme ._content ._action {
justify-content: flex-start;
} #hero._theme ._content.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background: var(--colordark);
max-width: 100%;
padding: 20px;
flex-direction: row;
justify-content: space-between;
align-items: center;
transform: translateY(0);
animation: fadeDown .35s ease;
}
#hero._theme ._content.fixed h2 a{
font-size: 2.2em;
color: var(--colorwhite);
}
#hero._theme ._content.fixed ._pricing {
flex-direction: row;
gap: 10px;
align-items: center;
}
#hero._theme ._content.fixed ._pricing ._text {
width: auto;
}
#hero._theme ._content.fixed ._pricing ._start {
flex-wrap: nowrap;
gap: 10px;
align-items: center;
}
#hero._theme ._content.fixed ._price b {
font-size: 1.6em;
}
#hero._theme ._content.fixed ._action {
padding: 0;
} #hero ._preview {
position: relative;
width: 730px;
height: 498px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme/images/laptop.png);
position: relative;
z-index: 1;
flex-shrink: 0;
}
#hero ._preview .browser {
display: none;
}
.vert {
left: 112px;
top: 34px;
width: 500px;
height: 318px;
}
.vert .simply-scroll-clip {
width: 100%;
height: 318px;
}
#hero ._preview ._rating {
position: absolute;
top: -20px;
right: 30px;
z-index: 1;
display: flex;
flex-direction: column;
width: 110px;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
border-radius: var(--bradius);
padding: 7px 10px;
text-align: center;
color: var(--colortext);
animation: float 5s ease-in-out infinite 1s;
}
#hero ._preview ._rating b {
font-size: 1.5em;
font-weight: 700;
}
#hero ._preview ._rating span {
font-size: .8em;
line-height: normal;
}
#hero ._hint {
position: absolute;
bottom: 120px;
left: -20px; 
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
pointer-events: none;
z-index: 5;
animation: float 7s ease-in-out infinite 1s;
}
#hero ._hint ._text {
font-style: italic;
font-size: .9em;
line-height: 1.4;
text-align: right;
}
#hero ._hint ._arrow {
height: 60px;
transform: rotate(-45deg);
opacity: .75;
stroke: #fff;
left: 60px;
top: -50px;
position: absolute;
}  #about.container {
overflow: unset;
}
#about ._content {
display: flex;
gap: 20px;
}
#about .group-card {
grid-template-columns: repeat(2, 1fr);
}
#about .group-card ._card:first-child {
grid-column: span 2;
gap: 0;
}
#about .group-card ._card:first-child b a {
padding: 3px 8px;
border-radius: var(--x10bradius);
border: 1px solid var(--colorborder);
font-size: .9em;
font-weight: 400;
line-height: 1em;
}
#about .group-card ._card:first-child b a:before {
content: '✓';
margin-right: 3px;
color: var(--color1);
}
#about .group-card ._card:last-child{
justify-content: center;
align-items: center;
text-align: center;
}
#about .group-card  ._circle {
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
transition: all .3s ease;
border: 1px solid var(--colorborder);
}
#about .group-card  ._circle svg {
width: 18px;
height: 18px;
stroke: var(--color1);
stroke-width: 2.2;
fill: none;
stroke-linecap: round;
}
#about ._sidebar {
width: 400px;
height: fit-content;
flex-shrink: 0;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
border-radius: var(--x2bradius);
display: flex;
flex-direction: column;
align-self: flex-start;
position: sticky;
top: 20px;
overflow: hidden;
}
#about ._sidebar h3 {
padding: 20px;
background: var(--colorbg);
border-bottom: 1px solid var(--colorborder);
}
#about .wyget li {
list-style: none;
display: grid;
grid-template-columns: auto 1fr;
padding: 20px;
border-bottom: 1px dashed var(--colorborder);
gap: 5px 20px;
line-height: 1.2em;
}
#about .wyget li:last-child {
border-bottom-style: solid;
}
#about .wyget svg {
width: 46px;
height: 46px;
padding: 12px;
border: 1px solid var(--colorborder);
background: var(--colorbg);
border-radius: 50%;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
stroke: var(--color1);
grid-row: span 2;
align-self: center;
}
#about .wyget li b {
font-weight: 600;
}
#about .wyget li i {
font-style: normal;
border: 1px solid var(--colorborder);
background: var(--colorbg);
padding: 3px 8px;
border-radius: var(--x10bradius);
font-size: .8em;
display: inline-block;
}
#about .wyget li:nth-child(2) svg {
stroke: var(--color2);
}
#about .wyget li:nth-child(3) svg {
stroke: var(--color3);
}
#about .wyget li:nth-child(4) svg {
stroke: #46B9C9;
padding: 11px;
}
#about .specs ._cat a:after {
content: ', ';
font-size: .8em;
color: var(--color2);
}
#about .specs ._cat a:last-child:after {
content: '';
}
#about .specs {
border-bottom: 1px solid var(--colorborder);
}
#about .specs li {
list-style: none;
padding: 10px 20px;
border-bottom: 1px dashed var(--colorborder);
display: flex;
justify-content: space-between;
gap: 20px;
line-height: 1.5em;
}
#about .specs li:last-child {
border-bottom: none;
}
#about .specs li span {
opacity: .7;
}
#about .specs li b {
font-weight: 400;
text-align: right;
max-width: 60%;
}
#about ._author {
padding: 20px;
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
}
#about ._author .avatar {
width: 70px;
height: 70px;
position: absolute;
top: -35px;
right: 35px;
padding: 5px;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
}  #screenshot ._content {
max-width: 1020px;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
border-radius: var(--x2bradius);
padding: 15px;
margin: 0 auto;
}
#screenshot ._content img {
border-radius: var(--bradius);
}
.lSSlideOuter .lSPager.lSGallery img {
border: none;
}
.lSSlideOuter .lSPager.lSGallery li.active, .lSSlideOuter .lSPager.lSGallery li:hover {
border-color: var(--colorborder);
border-radius: var(--bradius);
}  #features ._content ul {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--colorborder);
border: 1px solid var(--colorborder);
border-radius: var(--x2bradius);
overflow: hidden;
}
#features ._content ul li {
list-style: none;
display: flex;
flex-direction: column;
background: var(--colorbg);
gap: 20px;
padding: 20px;
transition: all .3s ease;
cursor: default;
position: relative;
}
#features ._content ul li:hover {
background: var(--colorwhite);
}
#features ._content ul li::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color1), var(--color2));
transform: scaleX(0);
transform-origin: left;
transition: transform .35s ease;
}
#features ._content ul li:hover::before { transform: scaleX(1); }
#features ._content ul li > * {
margin: 0;
}
#features ._content ul li h3 {
display: flex;
align-items: center;
gap: 10px;
position: relative;
flex-wrap: wrap;
}
#features ._content ul li h3::before {
content: '';
width: 10px;
height: 10px;
background: var(--color1);
border-radius: 50%;
}
#features ._content ul li:nth-child(even) h3::before {
background: var(--color2);
}
#features ._content ul li img {
width: 100%;
margin-bottom: 20px;
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
}  #video ._content {
max-width: 1020px;
height: 560px;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
border-radius: var(--x2bradius);
padding: 15px;
margin: 0 auto;
}
#video ._content iframe {
width: 100%;
height: 100%;
border-radius: var(--bradius);
}  #pricing > ._content {
display: flex;
gap: 20px;
justify-content: center;
align-items: flex-start;
position: relative;
padding-top: 30px;
}
#pricing ._card {
max-width: 440px;
background: var(--colorwhite);
border-top: 5px solid var(--color1);
border-radius: var(--x2bradius);
padding: 30px;
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
transition: .5s;
box-shadow: 0 10px 20px rgba(54, 162, 235, .05);
position: relative;
overflow: hidden;
}
#pricing ._card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(54, 162, 235, .1);
} #pricing ._card ._license {
display: flex;
flex-direction: column;
gap: 5px;
}
#pricing ._license ._label {
font-size: .8em;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color1);
}
#pricing ._card ._license h3 {
font-weight: 700;
font-size: 2em;
line-height: 1em;
} #pricing ._card ._price {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
#pricing ._price ._rp {
font-size: 1.2em;
font-weight: 500;
}
#pricing ._price ._idr {
font-size: 2.8em;
font-weight: 900;
letter-spacing: -2px;
color: var(--colordark);
}
#pricing ._price ._before {
width: 100%;
display: flex;
align-items: center;
gap: 5px;
}
#pricing ._price ._before b {
text-decoration: line-through;
color: #c2c9d1;
font-size: 1.2em;
}
#pricing ._price ._before ._discount{
border: 1px solid #ff5c2638;
background: #ff5c2614;
line-height: 1em;
padding: 4px 10px;
border-radius: var(--x10bradius);
color: var(--color3);
font-size: .8em;
font-weight: 600;
text-transform: uppercase;
}
#pricing ._price ._sekali {
width: 100%;
}
#pricing ._price ._oneprice {
border: 1px solid #F5D76E;
padding: 6px 15px;
border-radius: var(--x10bradius);
font-size: .9em;
color: #92620A;
background: #FFF9E6;
line-height: 1.2em;
display: inline-flex;
gap: 10px;
align-items: center;
}
#pricing ._price ._oneprice::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
background: #92620A;
border-radius: 50%;
animation: blinker 1s linear infinite;
} #pricing ._features {
list-style: none;
display: flex;
flex-direction: column;
gap: 5px;
}
#pricing ._features > li:first-child,
#pricing ._features > li:first-child:before {
color: var(--color2);
font-weight: 600;
}
#pricing ._features li ul {
list-style: none;
border-top: 1px dashed var(--colorborder);
margin-top: 5px;
padding-top: 5px;
}
#pricing ._features li:before {
content: "✓";
margin-right: 10px;
color: var(--color2);
font-weight: 600;
}
#pricing ._features li._no:before {
content: "✗";
color: #c2c9d1;
display: inline-block;
}
#pricing ._features li._extra li:before {
content: "+";
font-size: 1.3em;
font-weight: 400;
}
#pricing ._features li._extra li {
color: var(--colortext);
margin: 3px 0;
}
#pricing ._features li._extra > b {
margin-right: 10px;
}
#pricing ._features li._extra > ._toggle {
cursor: pointer;
transition: .3s;
font-size: 0.85em;
border: 1px solid var(--colorborder);
border-radius: var(--x10bradius);
padding: 3px 8px;
line-height: normal;
display: inline-block;
}
#pricing ._features li._extra > ._toggle:hover {
color: var(--color3);
}
#pricing ._features li._extra > ul {
display: none;
}
#pricing ._features li._no {
text-decoration: line-through;
color: #c2c9d1;
}
#pricing ._features li._yes {
color: var(--color2);
}
#pricing ._features li._divider {
border-top: 1px solid var(--colorborder);
padding-top: 10px;
margin-top: 5px;
} #pricing ._promo {
text-align: center;
font-size: .9em;
margin-top: 10px;
}
#pricing ._promo ._label b {
color: var(--colordark);
padding: 2px 10px;
border-radius: var(--bradius);
border: 1px dashed #ff5c2638;
background: #ff5c2614;
font-size: 1em;
font-weight: 600;
}
#pricing ._promo ._expired b {
color: var(--color3);
} #pricing ._action {
display: flex;
flex-direction: column;
gap: 10px;
text-align: center;
}
#pricing ._card .bttn {
padding: 15px 30px;
font-size: 1.1em;
font-weight: 600;
}
#pricing ._warranty {
display: flex;
gap: 5px;
align-items: center;
justify-content: center;
font-size: .9em;
}
#pricing ._warranty svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
#pricing ._warranty b {
color: var(--color2);
} #pricing:not(.hero) .trust {
max-width: 900px;
margin: 30px auto 20px;
}
#pricing:not(.hero) .trust ._item ._label b {
color: var(--colordark);
} #pricing ._payment img {
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
position: relative;
z-index: 1;
margin: 0 auto;
display: block;
} #pricing ._card._popular:before,
#pricing ._card._best:before {
content: '★ Paling Populer';
position: absolute;
top: 18px;
right: -1px;
background: var(--color3);
color: var(--colorwhite);
display: inline-flex;
align-items: center;
gap: 5px;
font-size: .75em;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
line-height: 1.5em;
padding: 8px 15px;
border-radius: 100px 0 0 100px;
box-shadow: 0 10px 20px rgba(54, 162, 235, .10);
}
#pricing ._card._best:before {
content: '✓ Best Value';
background: var(--color2);
} #pricing ._card._popular {
border-top-color: var(--color3);
transform: translateY(-20px);
box-shadow: 0 10px 50px #ff5c2638;
z-index: 2;
}
#pricing ._card._popular:hover {
transform: translateY(-25px) scale(1.05);
}
#pricing ._card._popular ._license ._label {
color: var(--color3);
}
#pricing ._card._popular ._features > li:first-child,
#pricing ._card._popular ._features > li:first-child:before {
color: var(--color3);
}
#pricing ._card._popular .bttn {
background: var(--color3);
} #pricing ._card._best {
border-top-color: var(--color2);
}
#pricing ._card._best ._license ._label {
color: var(--color2);
}
#pricing ._card._best ._license ._detail {
display: flex;
flex-direction: column;
}
#pricing ._card._best .bttn {
background: var(--color2);
} #pricing.soon {
min-height: 100vh;
}
#pricing.soon ._header {
margin-bottom: 0;
}
#pricing.soon h2 {
font-size: 5em;
line-height: 1.1em;
font-weight: 700;
}
#pricing.soon ._content {
align-items: normal;
}
#pricing.soon ._badge {
margin: 0;
}
#pricing .marquee3k {
position: absolute;
top: 0;
left: 0;
right: 0;
background: var(--color1);
padding: 10px 0px;
z-index: 1;
}
#countdown {
display: flex;
gap: 20px;
justify-content: center;
margin: 30px auto;
position: relative;
}
#countdown div {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
#countdown div span:first-child {
font-size: 3em;
font-weight: 700;
border: 1px solid #1b2134;
background: #121422;
border-radius: var(--x2bradius);
color: var(--colorwhite);
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
}  .hero._pw {
padding: 160px var(--autopad) 380px;
}
#intro._pw {
padding-top: 0;
overflow: unset;
}
#intro._pw img {
margin: -360px auto 20px;
}
#pw.card {
position: relative;
z-index: 1;
overflow: hidden;
background: #fff;
margin-top: 40px;
}
#pw.card .bttn {
align-self: flex-start;
}
#pw.card::after {
content: '';
position: absolute;
bottom: -5%;
right: 10px;
width: 350px;
height: 350px;
background-image: url(//www.oketheme.com/wp-content/themes/oketheme/images/svg/domain.svg);
background-size: contain;
background-position: center bottom;
background-repeat: no-repeat;
z-index: -1;
}  #faq.container {
display: flex;
gap: 40px;
overflow: unset;
}
#faq ._header {
width: 40%;
flex-shrink: 0;
position: sticky;
top: 40px;
height: fit-content;
margin: 0;
}
#faq ._contact {
background: var(--colorwhite);
border: 1px solid var(--colorborder);
border-radius: var(--x2bradius);
padding: 20px;
position: relative;
overflow: hidden;
margin-top: 20px;
}
#faq ._contact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color1), var(--color2));
}
#faq ._content {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
}
#faq ._item {
border: 1px solid var(--colorborder);
border-radius: var(--x2bradius);
background: var(--colorwhite);
}
#faq ._item p {
margin-bottom: 0;
}
#faq ._item h3 {
padding: 20px;
margin: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#faq ._item h3::after {
content: '+';
font-weight: normal;
font-size: 1.3em;
color: var(--colorborder);
}
#faq ._item ._desc {
display: none;
border-top: 1px solid var(--colorborder);
margin: 0 20px 20px;
overflow: hidden;
}
#faq ._item._open h3{
color: var(--color1);
}
#faq ._item._open h3::after {
content: '-';
color: var(--color1);
}  .wrap-post ul li {
border-bottom: 1px dotted var(--colorborder);
padding: 2px 0;
margin-left: 20px;
}
.wrap-post h2,
.wrap-post h3 {
margin: 20px 0;
}
.wrap-post img {
border-radius: var(--bradius);
box-shadow: 0 2px 4px 0 rgba(103, 151, 255, .08), 0 8px 20px 0 rgba(103, 151, 255, .1) !important;
}
.wrap-post table, .wrap-post td {
border: 1px solid var(--colorborder);
padding: 10px;
background: var(--colorbg);
vertical-align: top;
}
.wrap-post table ul li {
border-bottom: none;
}  .author-box {
display: grid;
grid-template-columns: 100px 1fr;
gap: 20px;
align-items: center;
border: 1px solid var(--colorborder);
padding: 20px;
border-radius: var(--bradius);
overflow: hidden;
}
.author-box h3 {
order: -1;
grid-column: span 2;
padding: 20px;
margin: -20px -20px 0!important;
background: var(--colorbg);
border-bottom: 1px solid var(--colorborder);
}  .sidebar {
padding: 20px;
background: var(--colorwhite);
border: 1px solid var(--colorborder);
border-radius: var(--bradius);
overflow: hidden;
}
.sidebar h4 {
border-bottom: 1px solid var(--colorborder);
background: var(--colorbg);
padding: 20px;
font-size: 1.2em;
margin: -20px -20px 20px;
}
.sidebar ul li {
padding: 5px 0;
list-style-type: none;
border-bottom: 1px dashed var(--colorborder);
}
.sidebar ul li a {
color: var(--colordark);
}
.sidebar ul li a:hover {
color: var(--color3);
}
.sidebar ul li:last-child {
border: none;
} #sidetheme .browser,
#sidetheme .card:before {
display: none;
}
#sidetheme .card {
border: none;
border-radius: 0;
}
#sidetheme .card ._content {
padding: 20px 0 0;
border: none;
}
#sidetheme .card:hover {
transform: none;
}
#sidetheme .card ._pigura {
height: 220px;
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
} .list-bank li {
overflow: hidden;
padding: 10px 0 !important;
display: block;
}
.list-bank img {
float: left;
margin-right: 10px;
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
} .history ul li {
padding: 3px 0;
margin: 5px 10px 5px 30px;
}
.history {
border-left: 1px dashed #DDD;
margin: 10px 0 0 10px;
}
.history li {
margin: 0 10px 10px 14px;
padding: 0 0 0 5px;
border-bottom: none;
list-style-image: url(//www.oketheme.com/wp-content/themes/oketheme/images/dot-grey.png);
}
.history li:first-child {
list-style-image: url(//www.oketheme.com/wp-content/themes/oketheme/images/dot-green.png);
}  .pagination {
width: 100%;
text-align: center;
}
.pagination a,
.pagination>.current {
border: 1px solid var(--colorborder);
padding: 5px 10px;
background: var(--colorbg);
margin: 0 2px;
display: inline-block;
min-width: 40px;
text-align: center;
border-radius: 50%;
}
.pagination a:hover,
.pagination>.current {
color: #FFF;
background: var(--color1);
}
.pagination .next.page-numbers,
.pagination .prev.page-numbers {
border-radius: var(--bradius);
}  .comments ._ghost {
height: 60px;
align-self: flex-start;
}
.comment_text,
.comment_text .children {
display: flex;
flex-direction: column;
gap: 20px;
}
.comments .komentar {
padding: 15px;
position: relative;
overflow: hidden;
}
.comments .avatar {
width: 70px;
height: 70px;
}
.comment_text li {
list-style-type: none;
overflow: hidden;
margin-left: 20px;
border-top-left-radius: var(--bradius);
border-bottom-left-radius: var(--bradius);
border: 1px solid var(--colorborder);
}
.comment_text li li {
border-right: none;
}
.comment_text li li:last-child {
border-bottom-left-radius: 0;
border-bottom: none;
border-right: none;
}
.comment_text .depth-1 {
margin: 0;
background: var(--colorbg);
border-radius: var(--bradius);
}
.comment_text li,
.comment_text li li li,
.comment_text li li li li li {
background: var(--colorbg);
}
.comment_text li li,
.comment_text li li li li,
.comment_text li li li li li li {
background: #FFF;
}
.comment_text li li .avatar {
width: 30px;
height: 30px;
} .comments input[type="text"],
.comments textarea {
width: 100%;
}
.comments label {
font-weight: bold;
}
.comments .comment-respond {
padding: 15px;
background: var(--colorbg);
border-radius: var(--bradius);
border: 1px solid var(--colorborder);
}
.comment .comment-respond {
margin: 0 20px 20px;
background: var(--colorwhite);
}
.comments .comment-reply-title small {
margin-left: 10px;
}
.comments .form-submit {
margin-bottom: 0;
} .ratecount:first-letter {
font-size: 2em;
font-weight: 700;
margin-right: -5px;
}
.rating input[type="radio"] {
margin: 5px;
width: 25px;
height: 25px;
cursor: pointer;
}
.rating label {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
}  .popup-wrap{
position:fixed;
inset:0;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition: .4s;
}
.popup-wrap.active{
opacity:1;
visibility:visible;
}
.popup-wrap.active::before{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.6);
}
.popup-wrap .popup-box{
position:relative;
z-index:2;
width:100%;
max-width: 800px;
min-width: 320px;
line-height: 1.6em;
background:#fff;
border-radius:12px;
padding:20px;
transform: translateY(24px) scale(.97);
transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}
.popup-wrap.active .popup-box{
transform: translateY(0) scale(1);
}
.popup-box ._header {
display: flex;
flex-direction: column;
}
.popup-box ul li {
margin-left: 20px;
}
.popup-box ._footer {
font-size: .8em;
border-top: 1px solid var(--colorborder);
padding-top: 20px;
line-height: 1.5em;
}
.popup-close{
position:absolute;
top:10px;
right:10px;
font-size:24px;
cursor:pointer;
border: 1px solid var(--colorborder);
background: var(--colorbg);
color: var(--colortext);
line-height: 1em;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
} #kontak .popup-box {
max-width: 450px;
}
#kontak ._item {
border: 1px solid var(--colorborder);
background: var(--colorbg);
padding: 15px;
border-radius: var(--bradius);
display: grid;
grid-template-columns: auto 1fr;
gap: 0 20px;
align-items: center;
color: var(--colortext);
transition: .3s ease;
}
#kontak ._item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
#kontak ._item ._icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--x10bradius);
background: var(--color1); 
grid-row: span 3;
}
#kontak ._item h4 {
text-transform: uppercase;
font-size: .8em;
color: var(--colorgrey);
margin: 0 0 5px;
}
#kontak ._item b {
font-size: 1.2em;
}
#kontak ._item svg {
width: 20px;
height: 20px;
stroke: white;
stroke-width: 1.8;
fill: none;
stroke-linecap: round;
}
#kontak ._item:first-child ._icon {
background: var(--color3);
}
#kontak ._item._wa ._icon {
background: var(--color2);
}
#kontak ._item._wa svg {
fill: white;
stroke: none;
width: 22px;
height: 22px;
}  .owl-controls .owl-buttons div {
background: #fffc;
border-radius: 50%;
}
.smallslider .owl-controls .owl-buttons .owl-prev,
.megaslider .owl-controls .owl-buttons .owl-prev {
left: 120px;
}
.smallslider .owl-controls .owl-buttons .owl-next,
.megaslider .owl-controls .owl-buttons .owl-next {
right: 120px;
}
.owl-carousel .owl-buttons .owl-prev {
transition: .5s;
opacity: 0;
}
.owl-carousel:hover .owl-buttons .owl-prev {
left: 40px;
opacity: .5;
}
.owl-carousel .owl-buttons .owl-next {
transition: .5s;
opacity: 0;
}
.owl-carousel:hover .owl-buttons .owl-next {
right: 40px;
opacity: .5;
}  .intro-services.container {
padding-bottom: 0;
}
#service-wrap.container{
grid-template-columns: 63% auto;
padding-top: 40px;
}
#no-service {
grid-column: span 2;
}
.card-service>div.active,.tema-pw>div.active {
border-color: var(--color1);
box-shadow: 0 3px 9px rgba(43, 135, 218, .15);
position: relative;
}
.card-service>div.active:before,.tema-pw>div.active:before {
content: 'Dipilih';
position: absolute;
top: 0;
right: 0;
background: var(--color1);
color: #FFF;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
padding: 2px 10px;
font-size: 80%;
}
.card-service .card {
cursor: pointer;
}
.services input[type='text'],
.services select,
.services textarea {
width: 100%;
margin: 8px 0;
}
.services {
position: relative;
}
.services .info.false {
border-color: red;
position: relative;
}
.services .info.false:before {
content: 'Error';
position: absolute;
top: 0;
right: 0;
background: rgba(255, 0, 0, 0.497);
color: #FFF;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
padding: 2px 10px;
font-size: 80%;
}
.services .check {
display: none;
} .services .jscolor {
background-color: #FFF;
color: var(--colortext);
border: 1px solid var(--colorborder);
margin: 8px 5px 8px 0;
border-radius: var(--bradius);
width: 150px;
} .services #domain-exist {
padding: 10px;
border: 1px solid var(--colorborder);
background: #FFF;
border-radius: var(--bradius);
display: grid;
gap: 20px;
grid-template-columns: auto 120px;
}
.services #domain-exist input {
margin: 0;
border: none;
padding: 5px;
font-size: 24px;
box-shadow: none;
}
.services #domain-exist input[type=text]:focus {
background: none;
}
.services #domain-exist button {
border-radius: 5px;
padding: 6px 10px;
}
.services #domain-exist #added {
padding: 5px;
color: #4CAF50;
} .services #wdc-style .input-group {
box-shadow: none;
border-radius: var(--bradius) !important;
margin: 0;
padding: 5px;
border: 1px solid var(--colorborder);
background: #FFF;
}
.services #wdc-style #Search,
.services #wdc-style .input-group .input-group-btn {
border-color: transparent !important;
background: none;
outline: none;
}
.services #wdc-style .large #Search {
height: auto;
}
.services #wdc-style .large button#Submit {
height: auto;
font-size: initial;
padding: .5em 1.1em;
line-height: initial;
text-transform: none;
border-radius: 5px !important;
letter-spacing: normal;
margin: 0;
}
.services #wdc-style .callout {
margin: 15px 0 0;
} .services .tema-pw {
border-radius: var(--bradius);
padding: 15px;
gap: 15px;
background: #FFF;
}
.services .tema-pw>div {
position: relative;
border-radius: var(--bradius);
transition: .5s;
cursor: pointer;
gap: 0;
background: var(--colorborder);
}
.services .tema-pw>div p {
padding: 5px;
position: absolute;
bottom: 0;
width: 100%;
background: #e7effbf0;
font-weight: 600;
margin: 0;
border-bottom-right-radius: var(--bradius);
border-bottom-left-radius: var(--bradius);
}
.services .tema-pw>div.active p{
background: #36a2ebb0;
color: #FFF;
}
.services .tema-pw>div:hover {
box-shadow: 0 3px 9px rgba(43, 135, 218, .15);
border-color: var(--color1);
}
.services .tema-pw img {
max-width: unset;
border-radius: var(--bradius);
}
.services #tema-detail {
margin-top: 20px;
}
.services .list-order li {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.services .kode-order {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 160px;
line-height: 140px;
opacity: 0.04;
color: var(--color1);
cursor: default;
user-select: none;
}
.services .top-invoice {
display: none;
grid-template-columns: 280px auto;
gap: 20px;
border-bottom: 1px solid var(--colorborder);
padding-bottom: 20px;
margin-bottom: 20px;
font-size: .9em;
line-height: 1.5em;
} .detail-service li {
display: flex;
justify-content: space-between;
}
.detail-service #form-button {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
#show-rincian {
display: none;
}
.topline {
border-top: 2px solid var(--colorborder);
padding-top: 5px;
margin-top: 5px;
}
.botline {
border-bottom: 2px solid var(--colorborder);
padding-bottom: 5px;
margin-bottom: 5px;
font-size: 1.2em;
}
.sidebar.promo {
border-style: dashed;
}
.sidebar.true {
border-color: var(--color2);
background: #ebffe9;
position: relative;
}
.sidebar.true:before {
content: 'Promo Aktif';
position: absolute;
top: 0;
right: 0;
background: rgba(14, 180, 111, 0.497);
color: #FFF;
border-top-right-radius: 5px;
border-bottom-left-radius: 8px;
padding: 2px 10px;
font-size: 80%;
}  #license ._free {
grid-column: span 2;
} .avatar {
border-radius: 50%;
float: left;
margin: 0 15px 10px 0;
width: 100px;
height: 100px;
} .crumbs {
padding-bottom: 10px;
font-size: .9em;
border-bottom: 1px solid var(--colorborder)
} .shareicon span {
font-size: 35px;
margin: 0;
}
.shareicon a {
border-radius: var(--bradius);
width: 35px;
height: 35px;
display: inline-block;
overflow: hidden;
margin-right: 5px;
} .seo {
font-size: 0;
margin: 0;
padding: 0
} .hscroll {
white-space: nowrap;
overflow: auto;
}
.hscroll::-webkit-scrollbar {
display: none;
}