/*==================================
  GOOGLE FONT
==================================*/

@import url('https://fonts.googleapis.com/css2?family=Helvetica:wght@400;700&display=swap');

/*==================================
RESET
==================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family: Helvetica, Arial, sans-serif;
    color: #060606;
    overflow-x: hidden;
}

.beranda{
    background: url("../assets/images/bg-beranda-kontak.png")
                no-repeat center top;
    background-size: cover;
}

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

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

ul{
    list-style:none;
}

/*==================================
COLOR
==================================*/

:root{

    --red:#DE0000;
    --red-dark:#700000;

    --blue:#01019E;
    --blue-dark:#000049;

    --black:#060606;
    --gray:#737373;
    --white:#FFFFFF;

}

/*==================================
CONTAINER
==================================*/

.container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

/*==================================
HEADER
==================================*/

header{

    width:100%;

    background:var(--black);

}

.top-header{

    padding:25px 0;

    border-bottom:5px solid var(--red);

}

.logo{

    display:flex;

    align-items:center;

    gap:20px;

}

.logo img{
    width: 400px;
    height: auto;

    margin-left: -100px;
}

.logo h1{

    color:white;

    font-size:42px;

    letter-spacing:2px;

    font-weight:700;

    font-style:italic;

}

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

nav{
    background: linear-gradient(180deg,#01019E,#000049);
    border-top:3px solid red;
}

nav ul{
    display:flex;
}

nav li{
    flex:1;
}

nav a{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    height:60px;

    color:#fff;
    font-size:18px;
    text-decoration:none;

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

    transition:.3s ease;

    overflow:hidden;

}

nav li:last-child a{
    border-right:none;
}

/* Garis putih animasi */
nav a::after{

    content:"";

    position:absolute;

    left:50%;
    bottom:0;

    width:0;
    height:3px;

    background:#fff;

    transition:.3s ease;

}

/* Hover */

nav a:hover{

    background:var(--red);

    transform:translateY(-3px);

}

nav a:hover::after{

    width:100%;
    left:0;

}

/* Active */

.active a{

    background:var(--red);

}

.active a::after{

    width:100%;
    left:0;

}

/* Icon */

nav a img{

    opacity:.7;

    transform:scale(.95);

    transition:.3s ease;

}

/* Hover Icon */

nav a:hover img,
.active a img{

    opacity:1;

    transform:scale(.88);

}

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

.hero{
    position: relative;
    overflow: hidden;
    min-height: 750px;
    padding: 50px 0;
}

.hero-content{
    position: relative;
    width: 100%;
    height: 700px;
    z-index: 2;
}

.hero-left{
    position: absolute;
    left: -30px;
    bottom: 0;
    width: 65%;
}

.motor{
    width: 100%;
    max-width: 900px;
    height: auto;
}

.hero-right{
    position: absolute;
    top: 30px;
    right: -20px;
    width: 45%;
    text-align: right;
}

.slogan{
    width: 100%;
    max-width: 800px;
    height: auto;
    margin-left: auto;
}

/*==================================
CONTACT
==================================*/

.contact{

    padding:80px 0;

}

.contact-wrapper{

    display:flex;

    justify-content:space-between;

    gap:60px;

}

.contact-left{

    flex:1;

}

.title{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:40px;

}

.title img{

    width:45px;

}

.title h2{

    font-size:40px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:20px;

    margin-bottom:30px;

}

.contact-item i{

    font-size:35px;

    color:var(--black);

    width:40px;

}

.contact-item p{

    font-size:18px;

    line-height:1.8;

}

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

.contact-right{

    display:flex;

    gap:30px;

    align-items:flex-end;

}

.card{
    width:250px;
    padding:20px;
    background:white;
    border-radius:15px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.3s;
}

.card img{
    width:150px;
    height:auto;
    margin:0 auto 15px;
    object-fit:contain;
}

.card h3{
    font-size:24px;
    margin-top:10px;
}

.card:hover{

    transform:translateY(-12px);

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

}

.card:hover h3{

    background:var(--red);

    color:white;

}

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

footer{

    background:linear-gradient(180deg,#700000,#DE0000);

    color:white;

    text-align:center;

    padding:18px;

    border-top:5px solid #000;

}

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

@media(max-width:1024px){

.hero-content{

flex-direction:column;

}

.hero-left,
.hero-right{

width:100%;

text-align:center;

}

.hero-right{

margin-top:50px;

}

.contact-wrapper{

flex-direction:column;

}

.contact-right{

justify-content:center;

}

}

@media(max-width:768px){

.logo{

flex-direction:column;

}

.logo h1{

font-size:28px;

text-align:center;

}

nav ul{

flex-direction:column;

}

.hero-right h2{

font-size:42px;

}

.contact-right{

flex-direction:column;

align-items:center;

}

.card{

width:100%;

max-width:320px;

}

.title h2{

font-size:30px;

}

}

.contact-item img{
    width: 30px;      
    height: 30px;
    object-fit: contain;
    margin-right: 15px;
    flex-shrink: 0;
}

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

.services{

    padding:80px 0;

}

.service-title{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:60px;
    gap:40px;

}

.service-title img{

    width:520px;

}

.service-title p{

    max-width:420px;
    color:#555;
    line-height:1.7;
    text-align:justify;

}

.service-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:45px;

}

.service-card{

    background:#060606;
    color:#fff;

    border-radius:4px;

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

    padding:22px;

    overflow:hidden;

    position:relative;

    min-height:210px;

}

.service-card img{

    width:100%;
    border-radius:5px;

}

.service-card:hover{

    transform:translateY(-8px);

}

.booking{

    margin:70px auto 0;
    width:100%;
    max-width:1100px;
    height:95px;

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

    background:linear-gradient(180deg,#01019E,#000049);

    color:#fff;
    font-size:34px;
    font-weight:bold;

    transition:.3s;

}

.booking:hover{

    background:#DE0000;

}

@media(max-width:900px){

.service-title{

    flex-direction:column;

}

.service-grid{

    grid-template-columns:1fr;

}

.booking{

    font-size:24px;
    height:70px;

}

}

.service-text{

    width:60%;
    z-index:2;

}

.service-text h3{

    font-size:30px;
    margin-bottom:10px;
    font-weight:700;

}

.service-text .desc{

    color:#ddd;
    font-size:18px;
    margin-bottom:65px;

}

.price{

    font-size:22px;

}

.price span{

    color:#001dff;
    font-size:44px;
    font-weight:bold;

}

.service-text small{

    display:block;
    margin-top:8px;
    color:#bdbdbd;

}

.service-image{
    width:35%;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:2;
}

.service-image img{
    width:180px;
    height:180px;
    object-fit:contain;
}

/* Gambar rem (di depan) */
.img-rem{
    position:absolute;
    width:180px;
    right:0;
    top:10px;
    z-index:2;
}

/* Gambar cakram (di belakang & bawah) */
.img-cakram{
    position:absolute;
    width:140px;
    right:40px;
    bottom:10px;
    z-index:1;
}

.service-card::before{

    content:"";

    position:absolute;

    right:80px;

    width:180px;
    height:300px;

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

    transform:skewX(-15deg);

}

.service-card{

    transition:.3s;

}

.service-card:hover{

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

}

/*==================================
PRODUK
==================================*/

.service-card .desc{

    margin-bottom:90px;

}

.service-card small{

    display:block;
    color:#d6d6d6;
    font-size:.8rem;
    line-height:1.5;

}

/*==================================
ABOUT
==================================*/

.about{

    padding:80px 0;

}

.section-title img{

    width:430px;
    margin-bottom:60px;

}

.about-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    margin-bottom:90px;

}

.about-text{

    text-align:justify;
    line-height:1.8;
    font-size:18px;

}

.about-text p{

    margin-bottom:25px;

}

.building{

    margin-top:30px;
    width:100%;

}

.about-right{

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

}

.about-right img{

    width:85%;

}

.vision h3,
.mission h3{

    font-size:54px;
    font-style:italic;
    margin-bottom:25px;

}

.vision p{

    font-size:20px;
    line-height:1.7;
    margin-bottom:35px;

}

/* Gambar judul */
.title-img{
    width:180px;
    height:auto;
    display:block;
    margin-bottom:20px;
}

/* Gambar ilustrasi */
.vision-img{
    width:100%;
    height:auto;
}

.mission ol{

    padding-left:25px;
    line-height:1.8;
    font-size:19px;
    margin-bottom:60px;

}

.filosofi-title{

    margin-top:40px;

}

.mission p{

    text-align:justify;
    line-height:1.8;
    font-size:18px;

}

@media(max-width:992px){

.about-row{

    grid-template-columns:1fr;

}

.about-right{

    order:-1;

}

.section-title img{

    width:280px;

}

.vision h3,
.mission h3{

    font-size:40px;

}

}

.title-img{
    width:220px;   /* sesuaikan */
    height:auto;
    margin-bottom:25px;
}

/*==================================
CONTACT PAGE
==================================*/

.contact-page{

    padding:80px 0 120px;

}

.page-title img{

    width:420px;
    margin-bottom:100px;

}

.contact-menu{

    display:flex;
    justify-content:center;
    align-items:flex-start;
    gap:120px;

}

.contact-box{

    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    transition:.3s;

}

.contact-box img{

    width:180px;
    height:180px;
    object-fit:contain;
    margin-bottom:25px;
    transition:.3s;

}

.contact-box h3{

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

}

.contact-box:hover{

    transform:translateY(-12px);

}

.contact-box:hover img{

    transform:scale(1.08);

}

.contact-box:hover h3{

    color:var(--red);

}

/*==========================
MODAL
==========================*/

.modal{

    display:none;

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.6);

    z-index:9999;

    justify-content:center;

    align-items:center;

}

.modal.show{

    display:flex;

}

.modal-content{

    width:90%;

    max-width:900px;

    background:#fff url("../assets/images/bg-beranda-kontak.png") center/cover;

    padding:60px;

    position:relative;

    border-radius:8px;

}

.close{

    position:absolute;

    top:20px;

    right:25px;

    font-size:40px;

    cursor:pointer;

    font-weight:bold;

}

.modal-content h2{

    text-align:center;

    margin-bottom:50px;

    font-size:40px;

}

.form-group{

    margin-bottom:45px;

}

.form-group label{

    display:block;

    font-size:30px;

    font-weight:bold;

    margin-bottom:15px;

    text-transform:uppercase;

}

.form-group input{

    width:100%;

    background:#000;

    color:#fff;

    border:none;

    padding:18px 20px;

    font-size:22px;

}

.date-group{

    display:flex;

    gap:25px;

    align-items:flex-start;

}

.date-group div{

    flex:1;

}

.date-group small{

    display:block;

    margin-top:8px;

    font-size:18px;

}

.note{

    margin-top:20px;

    font-size:18px;

}

.confirm-btn{

    display:block;

    margin:70px auto 0;

    width:300px;

    height:70px;

    background:#01019E;

    color:#fff;

    border:none;

    font-size:32px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.confirm-btn:hover{

    background:#DE0000;

}