body{
margin:0;
font-family:'Poppins',sans-serif;
background:#f8fafc;
color:#333;
}

.arifin-section,
.arifin-navbar,
.arifin-header-bar,
.arifin-hero{
max-width:1250px;
margin:auto;
padding:10px 20px;
}



.arifin-header{
background:white;
border-bottom:1px solid #eee;
position:relative;
z-index:1000;
}

.arifin-header-bar{
display:flex;
justify-content:space-between;
align-items:center;
background:#2DD4BF;
color:white;
padding:12px 20px;
font-size:14px;
}



.arifin-navbar{
position:relative;
z-index:1000;
}

#arifin-menu{
list-style:none;
display:flex;
justify-content:center;
padding:0;
margin:0;
}

#arifin-menu li{
padding:16px 22px;
}

#arifin-menu a{
text-decoration:none;
font-size:18px;
color:#333;
font-weight:500;
}

#arifin-menu a:hover{
color:#2DD4BF;
}

.arifin-menu-toggle{
display:none;
font-size:30px;
cursor:pointer;
}



.arifin-hero{
position:relative;
}

.arifin-slider img{
width:100%;
height:520px;
object-fit:cover;
}

.arifin-slide{
display:none;
}

.fade{
animation:fadeEffect 1.5s;
}

@keyframes fadeEffect{

from{opacity:.4}
to{opacity:1}

}



.arifin-hero-text{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:rgba(0,0,0,0.35);
color:white;
padding:40px;
border-radius:8px;
text-align:center;
max-width:700px;
width:80%;
}



h1{
font-size:38px;
font-weight:600;
}

h2{
font-size:28px;
font-weight:600;
}

p{
font-size:18px;
line-height:1.7;
}



.arifin-btn{
background:#2DD4BF;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
display:inline-block;
margin-top:15px;
font-size:18px;
}



.arifin-services-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

@media(max-width:768px){
.arifin-services-grid{
grid-template-columns:1fr;
}
}

.arifin-service{
background:white;
padding:12px;
border-radius:8px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.arifin-service img{
width:100%;
height:190px;
object-fit:cover;
border-radius:6px;
}



.arifin-form input,
.arifin-form select,
.arifin-form textarea{
width:100%;
padding:14px;
margin-bottom:12px;
font-size:18px;
border-radius:6px;
border:1px solid #ddd;
}

.arifin-form button{
background:#2DD4BF;
color:white;
padding:14px;
font-size:18px;
border:none;
border-radius:6px;
cursor:pointer;
}



iframe{
width:100%;
height:320px;
border:0;
}



.arifin-footer{
background:#2DD4BF;
color:white;
text-align:center;
padding:25px;
font-size:14px;
}



@media(max-width:768px){

.arifin-menu-toggle{
display:block;
font-size:30px;
cursor:pointer;
position:relative;
z-index:1100;
}

/* menu dropdown */

#arifin-menu{
display:none;
flex-direction:column;
background:white;
position:absolute;
top:55px;
left:0;
width:100%;
z-index:1050;
box-shadow:0 6px 20px rgba(0,0,0,0.1);
}

#arifin-menu.show{
display:flex;
}

#arifin-menu li{
text-align:center;
padding:14px;
border-bottom:1px solid #eee;
}

.arifin-services-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

.arifin-slider img{
height:420px;
}

h1{
font-size:30px;
}

}

.arifin-slide{
display:none;
}

.arifin-slide:first-child{
display:block;
}

/* FAQ Question Style */

details summary{
background:#2DD4BF;
padding:14px;
border-radius:6px;
font-size:18px;
font-weight:500;
cursor:pointer;
margin-top:10px;
}

details p{
padding:12px 14px;
background:#ffffff;
border:1px solid #eee;
border-top:none;
border-radius:0 0 6px 6px;
margin:0;
}

/* Sticky Call Button */

.sticky-call{
position:fixed;
right:20px;
bottom:20px;
background:#2DD4BF;
color:white;
padding:14px 18px;
border-radius:30px;
text-decoration:none;
font-size:16px;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
z-index:2000;
}

/* Sticky Back to Home */

.sticky-home{
position:fixed;
left:20px;
bottom:20px;
background:#82feff;
color:#333;
padding:14px 18px;
border-radius:30px;
text-decoration:none;
font-size:16px;
box-shadow:0 4px 10px rgba(0,0,0,0.2);
z-index:2000;
}

.sticky-call:hover,
.sticky-home:hover{
transform:scale(1.05);
transition:0.2s;
}

.arifin-slider img{
width:100%;
height:520px;
object-fit:cover;
display:block;
}

img{
max-width:100%;
height:auto;
display:block;
}

