
/* #layanan::after {
    background: linear-gradient(0deg, rgba(202, 223, 245) 3%, rgb(136, 175, 218) 25%);
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
} */

* {
    font-family: 'Poppins', sans-serif;
}


body {
    background-color: rgb(233, 253, 255);

}

:root {
    --text-color:  rgb(13, 106, 137);
    --color:  rgb(101, 139, 192);
    --bg-color:  rgb(211, 235, 250);
    --baru:  rgb(190, 229, 244);
}


   
      /* background-position: center; */

/*      navbar    */
nav {
    z-index: 9999;
}

nav .button-search {
    /* border: 2px solid rgb(237, 237, 237); */
}

.nav-color {
     background: linear-gradient(170deg, rgb(213, 221, 229), rgb(165, 225, 251), rgb(154, 231, 255));
    transition: all ease-in-out .6s;
    /* background-color: white; */
}

.bg-transparent {
    transition: all ease-in-out .6s;
}


/*    halaman1     */
.banner {
    height: 100vh;
    background-image: url('../img/istanadlmloka.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    /* background-position: center; */
}

.banner-content {
    height: 100%;
    color: beige;
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-center button {
    background: linear-gradient(170deg, rgb(213, 221, 229), rgb(73, 152, 186), rgb(154, 231, 255));
}






/*    halaman 2    */
#layanan {
    padding: 100px 0;
    background-color: rgb(233, 253, 255);
    border-radius: 70px;
    position: relative;
    bottom: 60px;
    
}

/* #layanan .container {
    border-radius: 30px;
} */

#layanan h2 {
    /* font-family: mv boli; */
    color: var(--text-color);
    font-size: 40px;
    font-weight: 900;
    
}

.card-layanan {
    width: 100%;
    height: 310px;
    border-radius: 5px;
    background: white;
    padding: 40px;
    transition: .3s;
    
}

.card-layanan h3 {
    color: var(--text-color);
    font-size: 25px;
    font-weight: 900;
}

.card-layanan p {
    font-size: 17px;
    /* font-weight: 200; */
}

.circle-icon {
    width: 60px;
    height: 60px;
    /* background-color: var(--baru); */
    border-radius: 20%;
    padding: 10px;
}

.card-layanan:hover {
    /* background: linear-gradient(160deg, rgb(202, 223, 245), var(--text-color)); */
    background: linear-gradient(170deg, rgb(213, 221, 229), rgb(118, 180, 207), rgb(154, 231, 255));
}

.card-layanan:hover h3 {
    color: white;
    transition: all ease-in-out .3s;
}

.card-layanan:hover p {
    color: white;
    transition: all ease-in-out .3s;
}

.card-layanan:hover .circle-icon {
    background-color: white;
    transition: all ease-in-out .3s;
}

/*     halaman 3    */
#produk h2 {
    color: var(--text-color);
    font-size: 40px;
    font-weight: 900;    
}

#produk {
    background-color: rgb(233, 253, 255);
    
}

#produk .card .produkimg {
    width: 300px;
    height: 300px;
    border-radius: 10px;

}

#produk .card {
    height: 500px;
    border: none;
    width: 335px;
    background-color: rgb(255, 255, 255);
    /* width: 400px; */
    border-radius: 5px;
    /* box-shadow: 0px 2px 15px rgb(10, 22, 32); */
}

#produk .card-body h4 {
     font-weight: bold;
     font-size: 25px;
     line-height: .8rem;
     color: rgb(220, 113, 0);
      padding-bottom: 7px;

}

#produk .card-body p {
    font-size: 14px;
    font-weight: bold;
    line-height: 16px;
    /* margin: 10px 0; */
    
}

#produk .card-body span {
    font-weight: 400;
}

.card:hover {
    background: linear-gradient(170deg, rgb(213, 221, 229), rgb(118, 180, 207), rgb(154, 231, 255));
    box-shadow: 0px 5px 10px rgb(16, 16, 16);
    transition: all ease-in-out .2s;
}

.card:hover .card-body h4 {
    color: white;
    transition: all ease-in-out .3s;
}

.card:hover .card-body p {
    color: white;
    transition: all ease-in-out .3s;
    
}

.card-jenis {
    background-color: rgb(255, 255, 255);
    position: absolute;
    left: 0px;
    right: 0px;
    top: 26rem;
    height: 60px;
    
}

.card:hover .card-jenis {
    background-color: rgb(255, 255, 255);
    /* background: linear-gradient(160deg, rgb(244, 248, 251), rgb(169, 204, 234), rgb(10, 80, 102)); */
    transition: all ease-in-out .3s;
}


/*   Halaman 4    */
#galeri {
    /* background-color: rgb(222, 237, 246); */
    background-color: rgb(233, 253, 255);
    padding: 20px 0 80px 0;
}

#galeri .button-fitur {
    width: 200px;
    height: 50px;
    border: none;
    border-radius: 10px;
    /* background-color: rgb(128, 223, 249); */
    background: linear-gradient(170deg, rgb(213, 221, 229), rgb(146, 204, 228), rgb(154, 231, 255));;
    font-weight: 500;
}

#galeri h2 {
    color: var(--text-color);
    font-size: 40px;
    font-weight: 900; 
}

.card-fitur button {
    border: none;
    border-radius: 2px;
    background: linear-gradient(170deg, rgb(213, 221, 229), rgb(118, 180, 207), rgb(154, 231, 255));
    color: white;
    height: 50px;
    width: 140px;
    font-weight: 500;
}

.card-fitur .ang {
    border-radius: 5px;
}

.card-fitur .overlay {
    /* background-color: rgba(0, 0, 0, 0.5); */
    opacity: 0;
    /* transition: all ease-in-out .3s; */
}

.card-fitur .overlay:hover {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
    transition: all ease-in-out .3s;
}

.button-arrow-left {
    border: none;
    border-radius: 30%;
    width: 50px;
    height: 50px;
    background: linear-gradient(170deg, rgb(213, 221, 229), rgb(118, 180, 207), rgb(154, 231, 255));
    
}


.button-arrow-right {
    border: none;
    border-radius: 30%;
    width: 50px;
    height: 50px;
    background: linear-gradient(170deg, rgb(213, 221, 229), rgb(118, 180, 207), rgb(154, 231, 255));
}


/*   halaman  5 */

#contact {
    background-image: url(../img/volha-flaxeco-omgRZCmTvUM-unsplash.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* margin-top: 70px; */
}

#contact .overlay {
    background-color: rgba(0, 0, 0, 0.5);   
}

#contact .container {
    padding: 150px 0;
}

#contact h3 {
    font-size: 35px;
    color: white;
    line-height: 40px;
    width: 500px;
    font-weight: 500;
}

.kontak h6 {
    color: white;
    line-height: 25px;
    margin: 10px 0;
}

.kontak a {
    color: white;
    text-decoration: none;
    line-height: 20px;
    margin-left: 15px;
}

.card-contact{
    width: 100%;  
    height: 380px;
    background-color: aliceblue;
    border-radius: 20px;
    padding: 50px;

}

.card-contact h2 {
     color: rgb(76, 123, 170);
     line-height: 60px;
     margin-bottom: 20px;
     font-weight: bold;

}

.form-floating {
    border-radius: 10px;
}


.button-kontak {
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: none;
    background: linear-gradient(170deg, rgb(213, 221, 229), rgb(118, 180, 207), rgb(154, 231, 255));
}

















