/* =========================================================
   JokiByMiliris.id
   Professional Landing Page
   Part 2A
========================================================= */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* ===============================
   Root
================================= */

:root{

--primary:#0B3E91;
--primary-dark:#082D6B;
--secondary:#FDB813;
--white:#ffffff;
--light:#f6f8fc;
--text:#2d3436;
--muted:#6c757d;
--shadow:0 15px 40px rgba(0,0,0,.08);
--radius:18px;
--transition:.35s ease;

}

/* ===============================
   Reset
================================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

scroll-behavior:smooth;

}

body{

font-family:'Poppins',sans-serif;
background:var(--light);
color:var(--text);
overflow-x:hidden;
line-height:1.7;

}

img{

max-width:100%;
display:block;

}

a{

text-decoration:none;
transition:var(--transition);

}

ul{

list-style:none;

}

section{

padding:90px 0;

}

/* ===============================
Scrollbar
================================= */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:var(--primary);
border-radius:20px;

}

::-webkit-scrollbar-track{

background:#eee;

}

/* ===============================
Loader
================================= */

#loader{

position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
z-index:99999;

}

#loader.hide{

opacity:0;
visibility:hidden;
transition:.5s;

}

/* ===============================
Navbar
================================= */

.navbar{

padding:18px 0;
transition:.35s;
background:rgba(11,62,145,.15);
backdrop-filter:blur(15px);

}

.navbar.scrolled{

background:#0B3E91;
padding:12px 0;
box-shadow:0 10px 30px rgba(0,0,0,.18);

}

.navbar-brand{

font-size:28px;
font-weight:700;

}

.navbar-brand i{

color:var(--secondary);

}

.nav-link{

color:#fff!important;
font-weight:500;
margin-left:15px;
position:relative;

}

.nav-link::after{

content:'';
position:absolute;
left:0;
bottom:-8px;
width:0;
height:3px;
background:var(--secondary);
transition:.3s;

}

.nav-link:hover::after{

width:100%;

}

.navbar .btn{

border-radius:50px;
padding:10px 24px;
font-weight:600;

}

/* ===============================
Hero
================================= */

.hero{

min-height:100vh;
display:flex;
align-items:center;
background:
linear-gradient(135deg,#0B3E91 0%,#114fb5 45%,#0B3E91 100%);
color:#fff;
position:relative;
overflow:hidden;

}

/* Background Circle */

.hero::before{

content:'';
position:absolute;
width:700px;
height:700px;
background:rgba(255,255,255,.05);
border-radius:50%;
right:-220px;
top:-220px;

}

.hero::after{

content:'';
position:absolute;
width:350px;
height:350px;
background:rgba(253,184,19,.12);
border-radius:50%;
left:-100px;
bottom:-100px;

}

.hero .container{

position:relative;
z-index:5;

}

.hero h1{

font-size:58px;
font-weight:800;
line-height:1.2;

}

.hero p{

font-size:18px;
opacity:.92;

}

.hero .badge{

padding:12px 22px;
border-radius:30px;
font-size:14px;

}

.hero-image{

max-width:520px;
margin:auto;
filter:drop-shadow(0 25px 40px rgba(0,0,0,.30));
animation:floating 5s infinite ease-in-out;

}

/* ===============================
Hero Counter
================================= */

.hero .col-4{

text-align:center;

}

.hero h2{

font-size:38px;
font-weight:700;

}

.hero .col-4 p{

margin-top:5px;
font-size:15px;
opacity:.8;

}

/* ===============================
Buttons
================================= */

.btn{

border-radius:50px;
padding:14px 32px;
font-weight:600;
transition:.35s;

}

.btn-warning{

background:var(--secondary);
border:none;
color:#111;

}

.btn-warning:hover{

transform:translateY(-4px);
box-shadow:0 12px 30px rgba(253,184,19,.45);

}

.btn-outline-light{

border:2px solid #fff;

}

.btn-outline-light:hover{

background:#fff;
color:#0B3E91;

}

/* ===============================
Title
================================= */

.section-title{

text-align:center;
margin-bottom:60px;

}

.section-title h2{

font-size:42px;
font-weight:700;
color:var(--primary);

}

.section-title p{

color:var(--muted);

}

/* ===============================
Cards Default
================================= */

.card{

border:none;
border-radius:var(--radius);
box-shadow:var(--shadow);

}

/* ===============================
Utilities
================================= */

.text-primary{

color:var(--primary)!important;

}

.text-warning{

color:var(--secondary)!important;

}

.bg-primary{

background:var(--primary)!important;

}

.rounded-xl{

border-radius:24px;

}

.shadow-xl{

box-shadow:0 20px 50px rgba(0,0,0,.12);

}

/* ===============================
Animation
================================= */

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

.fade-up{

animation:fadeUp .8s ease;

}

/* ===============================
Responsive
================================= */

@media(max-width:992px){

.hero{

padding-top:130px;
text-align:center;

}

.hero h1{

font-size:42px;

}

.hero-image{

margin-top:50px;
max-width:400px;

}

.nav-link{

margin-left:0;
margin-top:10px;

}

}

@media(max-width:768px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.section-title h2{

font-size:30px;

}

.btn{

width:100%;
margin-bottom:12px;

}

}

/* =========================================================
   Part 2B
   Services • CTA • Footer • Floating WA • FAQ • Testimoni
=========================================================*/

/* ==========================
   SERVICE CARD
==========================*/

.service-card{

background:#fff;
border-radius:20px;
padding:35px 28px;
text-align:center;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.35s;
height:100%;
position:relative;
overflow:hidden;
border:1px solid rgba(11,62,145,.08);

}

.service-card::before{

content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:5px;
background:linear-gradient(90deg,#0B3E91,#FDB813);

}

.service-card:hover{

transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,.15);

}

.service-card .icon{

width:80px;
height:80px;
margin:auto;
margin-bottom:20px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#0B3E91,#1459cb);
color:#fff;
font-size:32px;

}

.service-card h5{

font-weight:600;
margin-bottom:12px;
font-size:20px;

}

.service-card h4{

font-weight:700;
margin:0;
color:#FDB813;

}

/* ==========================
   SECTION BACKGROUND
==========================*/

#layanan{

background:#f8fbff;

}

/* ==========================
   CTA
==========================*/

.cta{

background:linear-gradient(135deg,#0B3E91,#114fb5);
color:#fff;
border-radius:30px;
margin:70px auto;
padding:70px 40px;
position:relative;
overflow:hidden;

}

.cta::before{

content:'';
position:absolute;
width:250px;
height:250px;
background:rgba(255,255,255,.08);
border-radius:50%;
right:-80px;
top:-80px;

}

.cta h2{

font-size:40px;
font-weight:700;

}

.cta p{

opacity:.9;
font-size:18px;

}

.cta .btn{

padding:16px 36px;

}

/* ==========================
   FOOTER
==========================*/

footer{

background:#071f4d;
color:#fff;
padding:70px 0 25px;

}

footer h3{

font-weight:700;
margin-bottom:15px;

}

footer p{

opacity:.8;

}

footer a{

color:#fff;
margin:0 8px;
transition:.3s;

}

footer a:hover{

color:#FDB813;

}

footer hr{

border-color:rgba(255,255,255,.15);
margin:30px 0;

}

/* ==========================
   SOCIAL ICON
==========================*/

.social{

display:flex;
gap:15px;
margin-top:20px;

}

.social a{

width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.08);
font-size:20px;

}

.social a:hover{

background:#FDB813;
color:#111;

}

/* ==========================
   FLOATING WA
==========================*/

.floating-wa{

position:fixed;
right:25px;
bottom:25px;
width:65px;
height:65px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#25D366;
color:#fff;
font-size:34px;
box-shadow:0 15px 40px rgba(0,0,0,.25);
z-index:999;
transition:.35s;

}

.floating-wa:hover{

transform:scale(1.12);

}

/* ==========================
   BACK TO TOP
==========================*/

.back-top{

position:fixed;
right:25px;
bottom:105px;
width:55px;
height:55px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#0B3E91;
color:#fff;
opacity:0;
visibility:hidden;
transition:.35s;
z-index:999;

}

.back-top.active{

opacity:1;
visibility:visible;

}

.back-top:hover{

background:#FDB813;
color:#111;

}

/* ==========================
   TESTIMONI
==========================*/

.testimonial{

background:#fff;
border-radius:20px;
padding:30px;
box-shadow:0 12px 35px rgba(0,0,0,.08);
height:100%;
transition:.35s;

}

.testimonial:hover{

transform:translateY(-8px);

}

.testimonial img{

width:70px;
height:70px;
border-radius:50%;
object-fit:cover;
margin-bottom:18px;

}

.testimonial h5{

margin:0;
font-weight:600;

}

.testimonial small{

color:#888;

}

.testimonial p{

margin-top:15px;
margin-bottom:0;

}

/* ==========================
   FAQ
==========================*/

.accordion-item{

border:none;
margin-bottom:18px;
border-radius:15px!important;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.accordion-button{

padding:22px;
font-weight:600;
font-size:17px;

}

.accordion-button:not(.collapsed){

background:#0B3E91;
color:#fff;

}

.accordion-button:focus{

box-shadow:none;

}

.accordion-body{

padding:22px;
line-height:1.8;

}

/* ==========================
   BADGE
==========================*/

.badge-custom{

display:inline-block;
padding:8px 18px;
border-radius:50px;
background:#FDB813;
font-size:14px;
font-weight:600;
color:#111;

}

/* ==========================
   HOVER IMAGE
==========================*/

.img-hover{

overflow:hidden;
border-radius:20px;

}

.img-hover img{

transition:.5s;

}

.img-hover:hover img{

transform:scale(1.08);

}

/* ==========================
   RESPONSIVE
==========================*/

@media(max-width:992px){

.cta{

text-align:center;
padding:50px 25px;

}

.cta h2{

font-size:32px;

}

footer{

text-align:center;

}

.social{

justify-content:center;

}

}

@media(max-width:768px){

.service-card{

padding:28px 22px;

}

.service-card h5{

font-size:18px;

}

.cta h2{

font-size:28px;

}

.floating-wa{

width:60px;
height:60px;
font-size:30px;

}

.back-top{

width:50px;
height:50px;

}

}

/* ==========================================================
   Part 2C
   Premium Effect • Glass • Pricing • Timeline • Dark Mode
==========================================================*/

/* ==========================
   GLASS EFFECT
==========================*/

.glass{

background:rgba(255,255,255,.12);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.15);
border-radius:24px;

}

/* ==========================
   GRADIENT TEXT
==========================*/

.gradient-text{

background:linear-gradient(90deg,#0B3E91,#FDB813);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
font-weight:700;

}

/* ==========================
   SECTION TITLE PREMIUM
==========================*/

.section-title{

margin-bottom:70px;

}

.section-title span{

display:inline-block;
padding:8px 20px;
background:#eef4ff;
color:#0B3E91;
border-radius:50px;
font-size:14px;
font-weight:600;
margin-bottom:18px;

}

.section-title h2{

font-size:46px;
font-weight:800;

}

.section-title p{

max-width:650px;
margin:auto;
color:#777;

}

/* ==========================
   SHINE EFFECT
==========================*/

.shine{

position:relative;
overflow:hidden;

}

.shine::before{

content:'';
position:absolute;
left:-120%;
top:0;
width:80px;
height:100%;
background:rgba(255,255,255,.45);
transform:skewX(-25deg);

}

.shine:hover::before{

left:130%;
transition:1s;

}

/* ==========================
   PRICING CARD
==========================*/

.price-card{

background:#fff;
border-radius:22px;
padding:35px;
text-align:center;
box-shadow:0 18px 40px rgba(0,0,0,.08);
transition:.35s;
border:2px solid transparent;

}

.price-card:hover{

border-color:#FDB813;
transform:translateY(-10px);

}

.price-card h3{

font-size:24px;
font-weight:700;

}

.price-card .price{

font-size:42px;
font-weight:800;
color:#0B3E91;
margin:20px 0;

}

.price-card ul{

padding:0;
margin:25px 0;

}

.price-card li{

padding:10px 0;
border-bottom:1px dashed #eee;

}

/* ==========================
   PROCESS TIMELINE
==========================*/

.timeline{

position:relative;
padding-left:35px;

}

.timeline::before{

content:'';
position:absolute;
left:10px;
top:0;
width:4px;
height:100%;
background:#0B3E91;

}

.timeline-item{

position:relative;
margin-bottom:40px;

}

.timeline-item::before{

content:'';
position:absolute;
left:-31px;
top:6px;
width:18px;
height:18px;
background:#FDB813;
border-radius:50%;
border:4px solid #0B3E91;

}

.timeline-item h5{

font-weight:700;

}

/* ==========================
   FEATURE BOX
==========================*/

.feature{

display:flex;
gap:20px;
margin-bottom:30px;

}

.feature i{

width:65px;
height:65px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
background:#0B3E91;
color:#fff;
font-size:28px;
flex-shrink:0;

}

.feature h5{

margin-bottom:6px;
font-weight:700;

}

/* ==========================
   TRUST BADGE
==========================*/

.trust{

display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;

}

.trust div{

background:#fff;
padding:20px 35px;
border-radius:18px;
box-shadow:0 12px 30px rgba(0,0,0,.06);
font-weight:600;

}

/* ==========================
   RIPPLE BUTTON
==========================*/

.btn{

position:relative;
overflow:hidden;

}

.btn::after{

content:'';
position:absolute;
width:0;
height:0;
background:rgba(255,255,255,.3);
border-radius:50%;
transform:translate(-50%,-50%);
left:50%;
top:50%;

}

.btn:active::after{

width:300px;
height:300px;
transition:.45s;

}

/* ==========================
   IMAGE FLOAT
==========================*/

.float-image{

animation:floatImage 6s ease-in-out infinite;

}

@keyframes floatImage{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/* ==========================
   ICON BOX
==========================*/

.icon-box{

width:70px;
height:70px;
border-radius:20px;
background:#eef5ff;
display:flex;
align-items:center;
justify-content:center;
font-size:30px;
color:#0B3E91;
margin:auto;

}

/* ==========================
   NUMBER COUNTER
==========================*/

.counter{

font-size:52px;
font-weight:800;
color:#0B3E91;

}

.counter-title{

color:#777;
margin-top:10px;

}

/* ==========================
   HOVER SHADOW
==========================*/

.hover-shadow{

transition:.35s;

}

.hover-shadow:hover{

transform:translateY(-8px);
box-shadow:0 25px 50px rgba(0,0,0,.15);

}

/* ==========================
   SOFT BACKGROUND
==========================*/

.bg-soft{

background:#f7faff;

}

/* ==========================
   DARK MODE
==========================*/

body.dark{

background:#10131b;
color:#f5f5f5;

}

body.dark section{

background:#10131b;

}

body.dark .service-card,
body.dark .price-card,
body.dark .testimonial{

background:#1c2330;
color:#fff;
border-color:#283347;

}

body.dark footer{

background:#080b12;

}

body.dark .navbar{

background:rgba(15,20,30,.85);

}

body.dark .accordion-button{

background:#1c2330;
color:#fff;

}

body.dark .accordion-body{

background:#1c2330;
color:#ddd;

}

/* ==========================
   DARK MODE SWITCH
==========================*/

.theme-switch{

cursor:pointer;
font-size:22px;
color:#FDB813;

}

/* ==========================
   FADE ANIMATION
==========================*/

.fade{

opacity:0;
transform:translateY(40px);
transition:.7s;

}

.fade.show{

opacity:1;
transform:none;

}

/* ==========================
   RESPONSIVE
==========================*/

@media(max-width:992px){

.feature{

flex-direction:column;
text-align:center;

}

.timeline{

padding-left:25px;

}

}

@media(max-width:768px){

.section-title h2{

font-size:34px;

}

.counter{

font-size:38px;

}

.price-card{

padding:28px;

}

.trust{

gap:15px;

}

.trust div{

width:100%;

}

}