/* ===================================================
   FACILITY SERVICE DESK
   Author : CodingKoe
   =================================================== */

:root{

    --primary:#003B8E;
    --primary2:#0058D4;
    --primary3:#1976FF;

    --bg:#F4F8FD;

    --white:#FFFFFF;

    --text:#2F3A4A;

    --success:#00B894;
    --warning:#F6B93B;
    --danger:#E74C3C;

    --radius:18px;

    --shadow:
    0 10px 30px rgba(0,0,0,.08);

    --shadow-hover:
    0 20px 40px rgba(0,0,0,.15);

    --transition:.35s;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--bg);
    font-family: 'Poppins', sans-serif;
    color:var(--text);

}


/* ===================================================
    NAVBAR
=================================================== */

.navbar{

    background:rgba(0,59,142,.96);

    backdrop-filter:blur(20px);

    transition:.3s;

    padding:18px 0;

}

.navbar-brand{

    font-size:24px;

    font-weight:700;

}

.navbar-brand i{

    margin-right:8px;

}

.nav-link{

    color:#fff!important;

    margin-left:18px;

    font-weight:500;

    transition:.3s;

}

.nav-link:hover{

    opacity:.8;

}

.navbar .btn{

    font-weight:600;

}


/* ===================================================
    HERO
=================================================== */

.hero-section{

    position:relative;

    background:

    linear-gradient(
    135deg,
    #002F6C,
    #004FB7,
    #1976FF);

    overflow:hidden;

    padding-top:170px;

    padding-bottom:130px;

    color:#fff;

}

.hero-section::before{

    content:"";

    width:550px;

    height:550px;

    position:absolute;

    right:-150px;

    top:-170px;

    border-radius:50%;

    background:rgba(255,255,255,.06);

}

.hero-section::after{

    content:"";

    width:350px;

    height:350px;

    position:absolute;

    left:-100px;

    bottom:-120px;

    border-radius:50%;

    background:rgba(255,255,255,.04);

}

.hero-title{

    font-size:56px;

    font-weight:800;

    line-height:1.2;

}

.hero-desc{

    margin-top:25px;

    font-size:19px;

    opacity:.92;

    line-height:32px;

}

.hero-img{

    max-width:470px;

    animation:float 5s ease infinite;

}


@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}


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

.btn{

    border-radius:50px;

    padding:13px 30px;

    font-weight:600;

}

.btn-light{

    color:var(--primary);

}

.btn-light:hover{

    transform:translateY(-3px);

}

.btn-outline-light:hover{

    transform:translateY(-3px);

}


/* ===================================================
    WAVE
=================================================== */

.wave{

    position:absolute;

    bottom:-1px;

    width:100%;

}

.wave svg{

    display:block;

}


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

.section{

    padding:90px 0;

}

.section h2{

    font-size:38px;

    font-weight:700;

}

.section p{

    color:#777;

}


/* ===================================================
    FEATURE CARD
=================================================== */

.feature-card{

    background:

    linear-gradient(
    180deg,
    #FFFFFF,
    #F7FAFF);

    border-radius:22px;

    padding:35px;

    height:100%;

    transition:var(--transition);

    box-shadow:var(--shadow);

}

.feature-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-hover);

}

.feature-card i{

    width:75px;

    height:75px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

    linear-gradient(
    135deg,
    #0058D4,
    #1976FF);

    color:#fff;

    font-size:34px;

    margin-bottom:20px;

}

.feature-card h4{

    font-weight:700;

    margin-bottom:15px;

}

.feature-card p{

    margin:0;

    line-height:28px;

}


/* ===================================================
    FLOW
=================================================== */
/*==================================
WORKFLOW
===================================*/

.workflow-section{

padding:100px 0;

background:#f7fbff;

position:relative;

overflow:hidden;

}

.workflow-section::before{

content:"";

position:absolute;

width:500px;

height:500px;

background:rgba(0,86,214,.05);

border-radius:50%;

left:-200px;

top:-200px;

}

.workflow-section::after{

content:"";

position:absolute;

width:400px;

height:400px;

background:rgba(25,118,255,.05);

border-radius:50%;

right:-150px;

bottom:-150px;

}

.workflow-title{

font-size:42px;

font-weight:800;

color:#0d2d62;

}

.workflow-subtitle{

max-width:700px;

margin:auto;

color:#6b7280;

}

.workflow-badge{

display:inline-flex;

align-items:center;

gap:8px;

background:linear-gradient(135deg,#0056D6,#1976ff);

color:#fff;

padding:10px 25px;

border-radius:50px;

font-weight:600;

}

.workflow-wrapper{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:70px;

gap:10px;

position:relative;

}

.workflow-item{

background:#fff;

border-radius:25px;

padding:35px 25px;

width:260px;

text-align:center;

position:relative;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.08);

border:1px solid #eef4fb;

}

.workflow-item:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.workflow-step{

position:absolute;

left:20px;

top:20px;

background:#0056D6;

color:#fff;

width:42px;

height:42px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-weight:700;

}

.workflow-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:linear-gradient(135deg,#0056D6,#1976ff);

display:flex;

justify-content:center;

align-items:center;

font-size:38px;

color:#fff;

box-shadow:0 10px 25px rgba(0,86,214,.3);

transition:.3s;

}

.workflow-item:hover .workflow-icon{

transform:rotate(10deg) scale(1.05);

}

.workflow-item h5{

font-weight:700;

margin-bottom:15px;

}

.workflow-item p{

font-size:15px;

line-height:26px;

margin:0;

}

.workflow-item.success .workflow-icon{

background:linear-gradient(135deg,#00b894,#32d296);

}

.workflow-item.success .workflow-step{

background:#00b894;

}

/*======================
ARROW
=======================*/

.workflow-arrow{

display:flex;

align-items:center;

justify-content:center;

position:relative;

width:70px;

}

.workflow-arrow span{

height:3px;

width:100%;

background:#3b82f6;

display:block;

border-radius:20px;

}

.workflow-arrow i{

position:absolute;

right:-2px;

background:#fff;

border:3px solid #3b82f6;

width:42px;

height:42px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#3b82f6;

font-size:22px;

box-shadow:0 5px 15px rgba(0,0,0,.1);

}

/*=========================
TABLET
=========================*/

@media(max-width:991px){

.workflow-wrapper{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

}

.workflow-arrow{

display:none;

}

.workflow-item{

width:100%;

}

}

/*=========================
MOBILE
=========================*/

@media(max-width:767px){

.workflow-wrapper{

display:block;

position:relative;

}

.workflow-wrapper::before{

content:"";

position:absolute;

left:44px;

top:0;

bottom:0;

width:4px;

background:#1976ff;

border-radius:30px;

}

.workflow-item{

margin-left:70px;

margin-bottom:35px;

text-align:left;

padding:25px;

width:auto;

}

.workflow-step{

left:-58px;

top:28px;

}

.workflow-icon{

margin:0;

margin-bottom:15px;

width:70px;

height:70px;

font-size:28px;

}

.workflow-arrow{

display:none;

}

.workflow-title{

font-size:32px;

}

}
/* ===================================================
    STATISTIC
=================================================== */

.stat-card{

    border-radius:22px;

    padding:35px;

    color:#fff;

    text-align:center;

    box-shadow:var(--shadow);

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-6px);

}

.stat-card h2{

    font-size:46px;

    margin-bottom:10px;

    font-weight:700;

}

.stat-card p{

    color:#fff;

    font-size:17px;

}

.bg1{

    background:

    linear-gradient(
    135deg,
    #0058D4,
    #1976FF);

}

.bg2{

    background:

    linear-gradient(
    135deg,
    #00B894,
    #4CD3A9);

}

.bg3{

    background:

    linear-gradient(
    135deg,
    #F6B93B,
    #FFD86F);

}

.bg4{

    background:

    linear-gradient(
    135deg,
    #6C63FF,
    #8D84FF);

}


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

footer{

    background:#002F6C;

    color:#fff;

    padding:60px 0;

}

footer h4{

    font-weight:700;

}

footer p{

    color:#d9d9d9;

}


/* ===================================================
    MOBILE
=================================================== */

@media(max-width:991px){

.hero-section{

padding-top:120px;

text-align:center;

}

.hero-title{

font-size:42px;

}

.hero-desc{

font-size:17px;

line-height:30px;

}

.hero-img{

margin-top:40px;

max-width:320px;

}

.flow-arrow{

display:none;

}

.section{

padding:70px 0;

}

.navbar{

padding:15px;

}

}


@media(max-width:768px){

.hero-title{

font-size:34px;

}

.section h2{

font-size:30px;

}

.feature-card{

padding:25px;

}

.stat-card{

padding:25px;

}

.stat-card h2{

font-size:34px;

}

}
/**/

/* Navbar saat scroll */

.navbar-scroll{

background:#003B8E!important;

box-shadow:0 10px 30px rgba(0,0,0,.15);

}


/* Scroll Animation */

.feature-card,
.workflow-card,
.stat-card{

opacity:0;

transform:translateY(40px);

transition:.8s;

}

.show{

opacity:1;

transform:translateY(0);

}


/* Active Menu */

.nav-link.active{

color:#FFD54F!important;

font-weight:700;

}


/* Back To Top */

#backToTop{

position:fixed;

right:25px;

bottom:25px;

width:50px;

height:50px;

border-radius:50%;

background:#0056D6;

color:#fff;

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

opacity:0;

visibility:hidden;

transition:.3s;

box-shadow:0 10px 20px rgba(0,0,0,.2);

z-index:999;

}

#backToTop.show{

opacity:1;

visibility:visible;



}