:root{

--primary:#2563eb;
--secondary:#1d4ed8;
--light:#f8fafc;
--dark:#233052;
--gray:#6b7280;
--border:#e5e7eb;
--radius:18px;
--shadow:0 12px 35px rgba(0,0,0,.08);
--mute: lightgrey;
}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;
background:#fff;
color:var(--dark);
line-height:1.7;

}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

.hole {
	background: var(--light);
}

.mute {
	color: var(--mute);;
}

.container{

width:min(1100px,92%);
margin:auto;

}

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

header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
/*background:rgba(255,255,255,.95);*/
/*background: none;*/
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition:.3s;
border-bottom:1px solid transparent;

}
/*
header.scrolled{

border-bottom:1px solid var(--border);
box-shadow:0 5px 20px rgba(0,0,0,.05);
background-color: white;
} 
*/
nav{

display:flex;
align-items:center;
justify-content:space-between;
padding:5px 0;

}

.logo{

font-size:1.4rem;
font-weight:700;
color:var(--primary);

}

.menu{

display:flex;
gap:30px;
align-items:center;

}

.menu a{
color: var(--primary);
font-weight:500;
transition:.3s;
}

.menu a:hover{

color: white;

}

.btn{

display:inline-flex;
align-items:center;
gap:10px;

padding:14px 24px;

border-radius:999px;

background:var(--primary);

color:#fff;

font-weight:600;

transition:.3s;

}

.btn:hover{

background:var(--secondary);
transform:translateY(-3px);

}

.mobile-btn{

display:none;
font-size:1.7rem;
cursor:pointer;

}

/* ===========================
HERO
=========================== */
/*
.hero {
	
	background:
	 radial-gradient(circle at 20% 20%, purple -20%, transparent 50%),
         radial-gradient(circle at 80% 30%, blue -20%, transparent 50%),
         radial-gradient(circle at 40% 80%, turquoise 25%, transparent 65%);    	
 	background-size:
        	150% 150%,
        	180% 180%,
        	160% 160%,
        	300% 300%;

    	animation: gradientMove 15s ease-in-out infinite alternate;
    	filter: blur(0px);
	
	}
@keyframes gradientMove {
    0% {
        background-position:
            0% 0%,
            100% 0%,
            50% 100%,
            0% 50%;
    }

    50% {
        background-position:
            100% 30%,
            20% 100%,
            80% 20%,
            100% 50%;
    }

    100% {
        background-position:
            30% 100%,
            0% 20%,
            100% 80%,
            0% 50%;
    }
}
*/
.hero {
	/*background: radial-gradient(circle at top center, #fcfbfe 10%, white 50%);*/
	position: relative;
	margin: 0px;
	padding: 0px;
	height: 100vh;
	display: flex;
	align-items: center;
}

.hero-wrap {
	width: 100%;
	height: 100%;
	z-index: 1;
	background: rgba(0, 0, 0, 0.5);
}

.hero-media {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-text {
	position: relative;
	color: #233052;
	text-align: center;
	/*z-index: 1;*/
	padding: 15%;
	text-shadow: 0 0px 6px black;
}

.hero-text h1 span {
  background: linear-gradient(80deg ,purple, turquoise);
    background-clip: border-box;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: none;
}

.hero-text h1{
font-size:3rem;
line-height:1.5;
margin-bottom:25px;
color: white;
}

.hero-text p{

font-size:1.05rem;
margin-bottom:35px;
color: cornflowerblue;
}

.hero-buttons{

display:flex;
gap:18px;
flex-wrap:wrap;
justify-content: center;
}

.btn-outline{

display:inline-flex;
align-items:center;
gap:10px;

padding:14px 24px;

border-radius:999px;

border:2px solid var(--primary);

color:var(--primary);

font-weight:600;

transition:.3s;

}

.btn-outline:hover{

background:var(--primary);
color:#fff;

}

.hero-card{
background:#fff;
padding:35px;
border-radius:var(--radius);
box-shadow:var(--shadow);
margin-left: 10%;
margin-right: 10%;
opacity: 0.9;
} 

.hero-card img {
	width: 80%;
	height:auto;
	display: block;
	margin: auto;
}

.hero-card h3{
margin-bottom:25px;
text-align: center;
font-size: xx-large;
}

.hero-list{

display:grid;
gap:18px;

}

.hero-item{

display:flex;
gap:15px;
align-items:flex-start;

}

.hero-item i{

font-size:1.3rem;
color:var(--primary);

}

/*=========================
ILLUSTRATION
=========================== */
.illustration img {
	width: 100%;
	height: auto;
}

/* ===========================
SECTION
=========================== */
section{
	padding:90px 0;
        padding-bottom: 8rem;
}

section:not(#hero, #contact) {
  padding-top:8rem;
  padding-bottom:8rem;
}

.section-title{

text-align:center;
margin-bottom: 6rem
}

.section-title h2{

font-size:2rem;
margin-bottom:2rem;

}

.section-title p{

max-width:650px;
margin:auto;
color:var(--gray);

}

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

.grid{

display:grid;
gap:10px;

}

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

.grid-3{
	grid-template-columns: repeat(3, 1fr);
}

.grid-4{
	grid-template-columns: repeat(4,1fr);
}

.card{

background:#fff;

padding:30px;

border-radius:var(--radius);

box-shadow:var(--shadow);

transition:.35s;

}

.card:hover{

transform:translateY(-8px);

}

.card i{

font-size:2rem;

color:var(--primary);

margin-bottom:20px;

}

.card h3{

margin-bottom:12px;

}

.card p{

color:var(--gray);

}

/*=========================
 * WHY
 * =========================*/
.why .card{
  padding:0px;
  overflow:hidden;
}

.why .card h3 {
	line-height: 3rem;
}

.why .card .card-header{
  width:100%;
  text-align: center;
  color: white;
  font-size: 240%;
}

.why .bi{
  font-size: 4rem;
  color: white;
}

.why .card p{
  display:block;
  padding:1rem;
  background-color:#fefefe;
  color:white;
  line-height:1.2rem;
  text-align:center;
  font-weight:800;
  background: transparent;
}


.why .card:nth-child(1) {
  background: linear-gradient(45deg, turquoise, #41b7e0);
}

.why .card:nth-child(2) {
  background: linear-gradient(135deg, pink, #e38a9a);
}

.why .card:nth-child(3) {
  background: linear-gradient(45deg, violet, #ee3ab5);
}

.why .card:nth-child(4) {
  background: linear-gradient(135deg, lightblue, #5aa6bd);
}

.why .card .card-header {
  height:13rem;
  overflow:hidden;
}

.why .card {
  box-shadow: 0 0px 16px lightgrey;
}

/*========================
 * WHAT
 * =====================*/
.what {
  background:url(./images/bot2.webp);
  background-position: right;
  background-size: cover;
  background-attachment: fixed;
  color: white;
}

.what .card {
  background:transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

/* ===========================
LAYANAN
=========================== */

.services{

background:var(--light);

}

.service-card ul{

margin-top:18px;

padding-left:18px;

color:var(--gray);

}

.service-card li{

margin:10px 0;

}

.fade{

opacity:0;
transform:translateY(40px);
transition:all .8s ease;

}

.fade.show{

opacity:1;
transform:none;

}

/*============================
 	PRICING
==============================*/
.price-highlight {
	color: white;
	background: radial-gradient(circle at top right, black 56%, darkblue 91%);
}

.price {
	position: relative;
	text-align: center;
	padding-top: 4rem;
	z-index: 0;
	border: 1px solid grey;
}

.price .badge {
	position: absolute;
	right: 10px;
	top: 15px;
	background-color: yellow;
	color: green;
	box-shadow: 0 0 20px 0 yellow;
	border-radius: 20px;
	padding-right: 2rem;
	padding-left: 2rem;
}

.price ul {
	margin-top: 2rem;
	margin-bottom: 6rem;
}

.price .btn {
	display: block;	
	color: black;
	width: 80%;
	bottom: 3rem;
	left: 50%;
	transform: translatex(-50%);
	text-align: center;
	position: absolute;
	background: cyan;
}

.price .btn:hover {
	background: turquoise;
}

.price i {
	font-size: 3.5rem;
	color: lightgreen;
}

.price p {
	color: white;
}

.price li {
	list-style: none;
	text-align: left;
}

.price i {
	font-size: 1.2rem;
	margin-right: 1rem;
}

/* ===========================
PORTFOLIO
=========================== */

.portfolio{

display:grid;

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

gap:20px;

}

.portfolio .item{
	position: relative;
	overflow:hidden;
	box-shadow:var(--shadow);
	background:#fff;
	transition:.3s;
	border-radius: 7px;
}

.portfolio .item:hover{
transform:translateY(-6px);
}

.portfolio img{
width:100%;
height:220px;
object-fit:cover;
transition:.4s;
}

.portfolio .item:hover img{

transform:scale(1.05);

}

.portfolio .item:hover .caption {
    opacity: 1;
}

.portfolio .caption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
    /* display: flex; */
    overflow: hidden;
    transition-duration: 0.4s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    background: rgba(0,0,0,0.5);
}

.portfolio .caption{

padding:18px;

}

.portfolio h4{
	margin-bottom:8px;
	color: white;
}

.portfolio p{
	color:white;
	font-size:.95rem;
}

.portfolio a {
    background-color: #3fad87;
    width: 100%;
    display: block;
    text-align: center;
    padding: 5px;
    bottom: 0px;
    position: absolute;
    color: #ffffff;
    font-weight: bold;
}

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

.process{
background:var(--light);
}

.process a {
	color: blue;
	text-decoration: underline;
	font-size: 0.5 rem;
}

.timeline{

	max-width:800px;
	margin:auto;

	display:grid;
	gap:25px;

	}

	.step{

	display:flex;
	gap:20px;
	align-items:flex-start;

	background:#fff;

	padding:25px;

	border-radius:var(--radius);

	box-shadow:var(--shadow);

	transition:.3s;

	}

	.step:hover{

	transform:translateY(-5px);

	}

	.step .icon{

	width:60px;
	height:60px;

	border-radius:50%;

	display:flex;
	align-items:center;
	justify-content:center;

	background:#eff6ff;

	flex-shrink:0;

	}

	.step .icon i{

	font-size:1.5rem;
	color:var(--primary);

	}

	.step h3{

	margin-bottom:8px;

	}

	.step p{

	color:var(--gray);

	}

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

	.faq{

	max-width:850px;
	margin:auto;

	}

	.faq-item{

	margin-bottom:18px;

	background:#fff;

	border-radius:var(--radius);

	box-shadow:var(--shadow);

	overflow:hidden;

	}

	.faq-question{

	padding:22px;

	display:flex;

	justify-content:space-between;

	align-items:center;

	cursor:pointer;

	font-weight:600;

	}

	.faq-question i{

	font-size:1.2rem;

	transition:.3s;

	}

	.faq-answer{

	max-height:0;

	overflow:hidden;

	transition:.35s;

	padding:0 22px;

	color:var(--gray);

	}

	.faq-item.active .faq-answer{

	max-height:220px;

	padding:0 22px 22px;

	}

	.faq-item.active .faq-question i{

	transform:rotate(180deg);

	}

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

	.cta{
	background:
	linear-gradient(
	135deg,
	var(--primary),
	var(--secondary)
	);
	color:#fff;
	text-align:center;
	border-radius:30px;
	padding:70px 30px;
	margin: 10px;
	}

	.cta h2{

	font-size:2rem;

	margin-bottom:20px;

	}

	.cta p{

	max-width:650px;

	margin:auto auto 35px;

	opacity:.95;

	}

	.cta .btn{

	background:#fff;

	color:var(--primary);

	}

	.cta .btn:hover{

	background:#f5f5f5;

	}

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

	footer{

	background:#111827;

	color:#d1d5db;

	padding:60px 0 30px;

	}

	.footer-grid{

	display:grid;

	grid-template-columns:
	2fr
	1fr
	1fr;

	gap:40px;

	}

	footer h3{

	color:#fff;

	margin-bottom:18px;

	}

	footer ul{

	list-style:none;

	}

	footer li{

	margin:12px 0;

	}

	footer i{

	margin-right:10px;

	color:#60a5fa;

	}

	.copy{

	margin-top:40px;

	padding-top:20px;

	border-top:1px solid rgba(255,255,255,.1);

	text-align:center;

	font-size:.9rem;

	}

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

	@media(max-width:900px){

	.hero-wrap,
	.grid-2,
	.grid-3,
	.grid-4,
	.portfolio,
	.footer-grid{

	grid-template-columns:1fr;

	}

	.menu{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	width:100%;
	background:#fff;
	padding:20px;
	flex-direction:column;
	border-top:1px solid var(--border);
	}

	.menu a {
		color: black;
	}

	.menu.show{

	display:flex;

	}

	nav .btn {
		display: none;
	}

	.mobile-btn{
	display:block;
	color: black;
	}

	.hero-card {
		margin: 0px;
	}

	.hero-text h1{

	font-size:2rem;

	}

	.hero-text p {
		font-size: 0.8;
	}
	
	.hero-buttons{

	flex-direction:column;

	}

	.hero-card{
		margin: 0px;
	}

	.btn,
	.btn-outline{

	justify-content:center;

	}

	.pricing-card{
		display: block;
	}
	}