*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   text-decoration: none;
}
html{
   scroll-behavior: smooth;
}
html.no-scroll{
   width: 100%;
   overflow: hidden;
}
#preloader {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #ffffff;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
   transition: opacity 0.8s ease-out, visibility 0.8s;
}
.loader-content {
   text-align: center;
   font-family: sans-serif;
}
.spinner {
   width: 40px;
   height: 40px;
   margin: 0 auto 15px;
   border: 4px solid #f3f3f3;
   border-top: 4px solid #ee4e00; /* Warna biru modern */
   border-radius: 50%;
   animation: spin 1s linear infinite;
}
@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}
   /* Kelas untuk menyembunyikan loader */
.fade-out {
   opacity: 0;
   visibility: hidden;
}
body{
   width: 100%;
   font-size: clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem);
   font-family: "Nunito", sans-serif;
   font-weight: 600;
   color: #555555;
   background: #fff;
}
.container{
   width: 100%;
   padding: 0 20px;
}
.space-header{
   height: 60px;
}

/*header style*/
.main-header{
   width: 100%;
   height: 60px;
   position: absolute;
   top: 0; left: 0;
   z-index: 999;
   background: rgba(239,239,239,0.816);
   backdrop-filter: blur(5px);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   transition: transform 0.4s ease-in-out;
}
.main-header .container{
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.is-sticky{
   position: fixed;
   top: 0;
   animation: slideDown 0.3s ease forwards;
}
.logo-web h3{
   display: none;
}
.logo-web h2, .logo-web h3{
   color: #444444;
}
.logo-web span{
   display: inline-block;
   color: #fff;
   background: linear-gradient(to left top, #ee4e00, #eec400);
   border-radius: 0 10px 0 10px;
   padding: 0 8px;
   line-height: 1.2;
   text-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.navigasi{
   display: none;
   gap: 30px;
}
.navigasi a{
   color: #666666;
}
.hamburger-menu{
   width: 40px;
   height: 35px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-evenly;
   border-radius: 3px;
   cursor: pointer;
}
.hamburger-menu span{
   display: inline-block;
   width: 30px;
   height: 4px;
   background: #444444;
   border-radius: 5px;
   scale: 1;
   transition: all .3s ease;
}
.hamburger-menu.active span:nth-child(1){
   background: #ee4e00;
   transform-origin: center;
   transform: translateY(9px) rotate(225deg);
}
.hamburger-menu.active span:nth-child(2){
   scale: 0;
}
.hamburger-menu.active span:nth-child(3){
   background: #ee4e00;
   transform-origin: center;
   transform: translateY(-8.8px) rotate(-225deg);
}
.hamburger-menu.active{
   border: 2px solid #ccc;
   border-radius: 5px;
   /*box-shadow: 0 0 10px rgba(0,0,0,.3);*/
}
.icon-sosialmedia{
   display: none;
   gap: 15px;
}
.icon-sosialmedia a{
   display: flex;
   width: 30px;
   height: 30px;
   background: linear-gradient(to left top, #ee4e00, #eec400);
   border-radius: 50px;
}
.icon-sosialmedia i{
   color: #fff;
   margin: auto;
}
.sidebar-menu{
   width: 200px;
   height: 100vh;
   display: flex;
   flex-direction: column;
   gap: 30px;
   position: fixed;
   top: 60px; left: 0;
   background: rgba(255,255,255,0.8);
   backdrop-filter: blur(5px);
   padding: 20px;
   transform: translateX(-100%);
   transition: transform 0.3s ease;
   box-shadow: 0 2px 8px rgba(0,0,0,.1);
   z-index: 998;
   /*transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); */
}
.sidebar-menu.active{
   transform: translateX(0);
}
.sidebar-menu a, .sidebar-menu h3{
   opacity: 0;
   transition: all 0.3s ease;
}
.sidebar-menu a{
   color: #666666;
}
.sidebar-menu i{
   font-size: 1.3rem;
   margin-right: 15px;
}
.sidebar-menu a:hover i{
   color: #ee4e00;
}
.sidebar-menu h3{
   color: ##666666;
}
.sidebar-menu.active a, .sidebar-menu.active h3{
   animation: slideMenuIn 0.4s ease forwards;
}
.wrapper-sosmed{
   width: 100%;
   display: flex;
   gap: 20px;
}
.wrapper-sosmed a{
   display: flex;
   width: 30px;
   height: 30px;
   background: linear-gradient(to left top, #ee4e00, #eec400);
   border-radius: 50px;
   margin-top: 10px;
}
.wrapper-sosmed i{
   margin: auto;
   color: #fff;
}
.sidebar-overlay{
   position: fixed;
   width: 100%;
   height: 100%;
   top: 60px;
   left: 0;
   opacity: 0;
   transition: opacity 0.9s ease-in-out;
   background: rgba(0,0,0,0.28);
   backdrop-filter: blur(5px);
   -webkit-webkit-backdrop-filter: blur(5px);
   -moz-webkit-backdrop-filter: blur(5px);
   -ms-webkit-backdrop-filter: blur(5px);
   -o-webkit-backdrop-filter: blur(5px);
   webkit-backdrop-filter: blur(5px);
   z-index: 997;
   transform: translateX(-100%);
}
.sidebar-overlay.active{
   opacity: 1;
   transform: translateX(0);
}
@keyframes slideDown{
   0%{transform: translateY(-100%);}
   100%{transform: translateY(0);}
}
/*animasi sidebar menu in*/
@keyframes slideMenuIn {
   from {
      opacity: 0;
      transform: translateX(-30px); /* Muncul dari arah kiri sedikit */
   }
   to {
      opacity: 1;
      transform: translateX(0);
   }
}
/*header style end*/

/* style hero section */
#hero-section h1, #hero-section h2{
   line-height: 1.3;
}
#hero-section p{
   line-height: 1.7;
}
#hero-section{
   width: 100%;
   padding: 20px 0;
   position: relative;
}
#hero-section::before{
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: linear-gradient(to top, rgba(255,255,255,1),rgba(255,255,255,.1)),url(jumbotron.jpg);
   background-size: cover;
   background-position: center;
   opacity: 0.5;
}
#hero-section .container{
   display: flex;
   flex-direction: column;
   align-items: center;
}
#hero-section .hero-description{
   /*text-align: center;*/
}
#hero-section .hero-description h1{
   font-size: 2.1rem;
   font-weight: 800;
}
#hero-section h1 span{
   color: #ee6c00;
   text-shadow: 0 1px 0px rgba(255,255,255,.7);
}
#hero-section .hero-jumbotron{
   display: flex;
   gap: 15px;
   flex: 1;
   /* Lebar penuh di HP */
   width: 100%; 
   box-sizing: border-box;
   margin-top: 30px;
}
#hero-section .hero-jumbotron .photo{
   overflow: hidden;
}
#hero-section .hero-jumbotron .photo img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   position: center;
}
#hero-section .photo-large{
   background-color: #ddd;
   flex: 0 0 51%; /* Proporsi 280px dari 560px */
   aspect-ratio: 280 / 450;
   border-radius: 15px;
   position: relative;
}
#hero-section .photo-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 15px;
  }
#hero-section .photo-small {
   background-color: #ddd;
   width: 100%;
   border-radius: 10px;
   overflow: hidden;
   position: relative;
}
#hero-section .photo-small.top {
   aspect-ratio: 260 / 250;
}
#hero-section .photo-small.bottom {
   aspect-ratio: 260 / 200;
}
#hero-section .cta-deks{
   display: none;
   background: linear-gradient(to left top, #ee4e00, #eec400);
   width: fit-content;
   padding: 8px 15px;
   color: #fff;
   /*margin: auto;*/
   margin-top: 40px;
   border-radius: 6px;
   font-size: 15px;
   box-shadow: 0 3px 8px rgba(0,0,0,.2);
   align-self: flex-start;
}
#hero-section .cta-phone{
   display: inline-block;
   background: linear-gradient(to left top, #ee4e00, #eec400);
   width: fit-content;
   padding: 8px 15px;
   color: #fff;
   /*margin: auto;*/
   margin-top: 40px;
   border-radius: 6px;
   font-size: 15px;
   box-shadow: 0 3px 8px rgba(0,0,0,.2);
   align-self: flex-start;
}
#hero-section .cta-phone:hover{
   box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
#hero-section .cta-deks:hover{
   box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.cta-phone i,.cta-deks i{
   transform: translateY(2px);
}
/* style hero section end */

/* style gallery section */
#gallery{
   width: 100%;
   padding: 20px 0;
   /*background: linear-gradient(to bottom, rgba(238,196,0,.1), #fff);*/
   background: rgba(238,155,0,0.1);
}
#gallery h2 span{
   color: #ee6c00;
}
#gallery .wrapper-kategori{
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   width: 100%;
   margin-top: 30px;
}
#gallery .wrapper-kategori a {
   display: inline-block;
   border-radius: 10px;
   width: 100%;
   box-shadow: 0 4px 12px rgba(0,0,0,.2);
   overflow: hidden;
   transform: scale(1);
}
.wrapper-kategori a:hover .img-kategori img{
   transform: scale(1.1);
   transition: transform 0.5s ease-in-out;
}
#gallery .wrapper-kategori .img-kategori{
   width: 100%;
   aspect-ratio: 1 / 1;
   background: #ddd;
   overflow: hidden;
}
#gallery .wrapper-kategori .img-kategori img{
   width: 100%;
   height: 100%;
}
#gallery .wrapper-kategori .title-kategori{
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
   background: #fff;
   padding: 10px;
   box-sizing: border-box;
   font-size: 12px;
   line-height: 1.1;
   overflow: scroll;
}
#gallery .wrapper-kategori .title-kategori h3{
   color: #444444;
   margin-bottom: 5px;
}
#gallery .wrapper-kategori .title-kategori span{
   color: #aaa;
   margin-bottom: 8px;
}
#gallery .wrapper-kategori .title-kategori p{
   color: #666666;
}
/* style gallery section end */

/* style blog & about section */
#blog-about{
   width: 100%;
   padding: 40px 0;
   /*background: linear-gradient(to bottom, rgba(238,196,0,.1), #fff);*/
}
#blog-about .container{
   display: flex;
   width: 100%;
   flex-direction: column;
   gap: 20px;
}
#blog-about .aboutme{
   display: flex;
   flex-direction: column;
}
#blog-about .aboutme p{
   line-height: 1.7;
   text-align: justify;
}
.aboutme h2 span{
   color: #ee6c00;
   text-shadow: 0 1px 0 rgba(0,0,0,.1);
}
.img-about{
   width: 100%;
   background: #f7f4ec;
   margin-right: 10px;
   border-radius: 10px;
   aspect-ratio: 4 / 2;
   overflow: hidden;
}
.img-about img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.cta-about{
   text-align: center;
   display: inline-block;
   width: fit-content;
   margin-top: 30px;
   background: linear-gradient(to left top, #ee4e00, #eec400);
   padding: 8px 10px;
   color: #fff;
   border-radius: 6px;
   box-shadow: 0 3px 8px rgba(0,0,0,.2);
}
.cta-about:hover{
   box-shadow: 0 3px 8px rgba(0,0,0,.5);
}
.blogme{
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 30px;
}
.blog-headline{
   display: flex;
   flex-direction: column;
}
.blog-headline i{
   margin-right: 10px;
   color: #999999;
   -webkit-text-stroke: 1px white;
}
.blog-headline p{
   margin-left: 30px;
   color: #999999;
   font-size: 14px;
}
.wrapper-blog{
   width: 100%;
   padding: 10px;
   display: flex;
   align-items: center;
   gap: 20px;
   border: 1px solid #aaa;
   border-radius: 8px;
}
.img-blog{
   width: 25%;
   aspect-ratio: 2/3;
   background: #aaa;
   overflow: hidden;
   border-radius: 8px;
}
.img-blog img{
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.desc-blog{
   width: 75%;
   display: flex;
   flex-direction: column;
}
.desc-blog span{
   font-size: 11px;
   color: #999999;
   margin-bottom: 10px;
}
.desc-blog p, .desc-blog a{
   font-size: 14px;
   color: #999;
   text-align: justify;
   font-weight: 600;
}
.desc-blog a{
   color: #ee4e00;
}
.cta-blog i{
   transform: translateY(2px);
   margin-left: 5px;
   margin-top: 10px;
}

.aboutme{
   flex: 1.2;
}
.blogme{
   flex: 1;
}
/* style blog & about section end */

/* footer*/
.main-footer{
   width: 100%;
   min-height: 400px;
   /*background: linear-gradient(to top, #ee4e00, #6b4000);*/
   background: #555555;
   color: #ccc;
   padding: 30px 0;
}
.main-footer h2 span{
   color: #ffad32;
}
.main-footer h2{
   color: #eee;
}
.mainform{
   width: 100%;
   display: flex;
   margin: 20px 0;
   justify-content: space-between;
   align-items: center;
   overflow: hidden;
}
.whatsapp{
   display: flex;
   width: fit-content;
   height: 40px;
   justify-content: center;
   align-items: center;
   padding: 4px 10px;
   background: linear-gradient(to left top, #ee4e00, #eec400);
   border: 1px solid #fff;
   color: #fff;
   border-radius: 8px;
   font-weight: bold;
}
.whatsapp i{
   margin-right: 5px;
}
.news-letter{
   display: none;
}
.email{
   width: 300px;
   height: 40px;
   border: 1px solid #fff;
   background: rgba(255,255,255,.3);
   border-radius: 8px 0 0 8px;
   padding: 15px;
}
.email::placeholder{
   color: #fff;
}
.send{
   background: linear-gradient(to left top, #ee4e00, #eec400);
   color: #fff;
   padding: 0 20px;
   height: 40px;
   border-radius: 0 8px 8px 0;
   border-color: #fff;
}
.send::focus{
   outline: none;
}
.boxlangganan{
   color: salmon;
}
.box-mainfooter{
   display: flex;
   gap: 20px;
   width: 100%;
   justify-content: space-between;
   margin: 20px 0;
}
.sub-deskripsi{
   flex: 1.3;
}
.sub-kategori{
   flex: 1;
}
.sub-contact{
   display: none;
}
.sub-deskripsi h4,.sub-kategori h4,.sub-contact h4{
   color: #ffad32;
}
.box-mainfooter p{
   font-weight: 400;
   font-size: 16px;
   line-height: 1.4;
   color: #ccc;
   /*text-align: justify;*/
}
.box-mainfooter i{
   margin-right: 8px;
}
.sub-kontak{
   margin-top: 10px;
}
.sub-kontak p{
   font-size: 13px;
   line-height: 1.7;
}
.sub-sosmed{
   margin-top: 5px;
   display: flex;
   gap: 15px;
}
.sub-sosmed i{
   color: #ccc;
   font-size: 1.2rem;
}
.copyright{
   width: 100%;
   height: 40px;
   background: #fff;
   display: flex;
   text-align: center;
   align-items: center;
   justify-content: center;
   color: #000;
   font-size: 13px;
}
/*footer end*/

@media(min-width: 768px){
   .container{
      width: 100%;
      padding: 0 30px;
      margin: auto;
   }
/*header style*/
   .main-header{
      height: 70px;
   }
   .navigasi{
      display: flex;
   }
   .logo-web h2, .hamburger-menu, .navigasi i{
      display: none;
   }
   .logo-web h3{
      display: inline-block;
   }
   .icon-sosialmedia{
      display: flex;
   }
/*header style end*/
   .space-header{
      height: 70px;
   }
/* style hero section */
   #hero-section{
      padding: 30px 0;
   }
   #hero-section .container{
      flex-direction: row;
   }
   #hero-section .hero-description, #hero-section .hero-jumbotron{
      flex: 1;
   }
   #hero-section .hero-description{
      display: flex;
      flex-direction: column;
      justify-content: center;
   }
   #hero-section .hero-description h1{
      font-size: 2.6rem;
      line-height: 1.2;
   }
   #hero-section .hero-jumbotron{
      gap: 20px;
      margin-top: 0;
   }
   #hero-section .photo-right{
      gap: 20px;
   }
   #hero-section .cta-deks{
      display: inline-block;
   }
   #hero-section .cta-phone{
      display: none;
   }
/* style hero section end */

/* style gallery section */
   #gallery .wrapper-kategori {
      grid-template-columns: repeat(4, 1fr);
   }
   #gallery .wrapper-kategori .title-kategori{
      font-size: 13px;
   }
/* style gallery section end */

/* style blog & about section */
   #blog-about .container{
      gap: 15px;
      flex-direction: row;
   }
/* style blog & about section end */
/* style footer*/

/*style footer end*/
   .news-letter{
      display: flex;
   }
   .boxlangganan{
      display: none;
   }
}

@media(min-width: 1024px){
   .container{
      max-width: 1200px;
      padding: 0 40px;
      margin: auto;
   }
/*header style*/
   .main-header{
      height: 80px;
   }
   .navigasi{
      gap: 40px;
   }
/*header style end*/
   .space-header{
      height: 80px;
   }
/* style hero section */
   #hero-section .hero-description h1{
      font-size: 3.1rem;
      line-height: 1.2;
   }
/* style hero section end */

/* style gallery section */
   #gallery .wrapper-kategori .title-kategori{
      gap: 10px;
      padding: 10px;
      font-size: 15px;
   }
/* style gallery end */
}
/* animasi load content*/
.animate-on-load {
   opacity: 0;
}
.fade-in-up {
   animation: fadeInUp 0.4s ease forwards;
}
@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}