:root {

            --brand-teal: #108d77;

            --brand-orange: #ef4a24;

        }



        body {

            font-family: 'Jost', sans-serif;

            overflow-x: hidden;

           

        }

        body.home, body.contact-us{

 background-image: url('/image/left-stripe.png');

            background-repeat: repeat-y;

            background-position: left;

        }



        body.service-category, body.service-content{

            

        }





        /* --- Custom Utilities --- */

        .bg-brand-teal { background-color: var(--brand-teal); }

        .text-brand-teal { color: var(--brand-teal); }

        .text-brand-orange { color: var(--brand-orange); }



        /* --- Navbar Customization --- */

        .navbar {

            padding: 0;

            box-shadow: 0 2px 4px rgba(0,0,0,0.05);

        }

        

        /* Memastikan logo text memiliki background full di desktop */

        .brand-box {

            background-color: var(--brand-teal);

            color: white;

            padding: 0.5rem 3rem;

            font-size: 1.5rem;

            font-weight: 700;

            letter-spacing: 1px;

            text-decoration: none;

            display: inline-block;

        }

        

        .brand-box:hover {

            color: #f8f9fa;

        }



        .nav-link {

            color: var(--brand-teal) !important;

            font-weight: 600;

            padding: 0.5rem 1rem !important;

            transition: color 0.3s ease;

        }



        .nav-link:hover {

            color: var(--brand-orange) !important;

        }



        /* --- Hero Section --- */

        .hero-image {

            width: 100%;

            height: 45vh;

            object-fit: cover; /* Menjaga proporsi gambar */

            display: block;

        }



        .tagline-bar {

            background-color: var(--brand-teal);

            color: white;

            padding: 8px 2rem;

            font-weight: 600;

            font-size: 0.95rem;

            letter-spacing: 0.5px;

            border-bottom: 18px solid var(--brand-orange);

        }



        /* --- Typography Art Section --- */

        /* Kita menggunakan CSS kustom di sini untuk mendapatkan efek 'tumpukan' teks yang rapat */

        .typo-art {

            font-weight: 800;

            text-transform: uppercase;

            line-height: 0.85; /* Mendekatkan jarak antar baris */

            user-select: none;

        }

        

        /* Responsive font sizing menggunakan clamp untuk transisi halus antar device */

        .typo-1 { font-size: clamp(2.5rem, 5vw, 4rem); margin-left: 10%; }

        .typo-2 { font-size: clamp(2.5rem, 5vw, 4rem); }

        .typo-3 { font-size: clamp(2rem, 4vw, 3rem); margin-left: 15px; }

        .typo-4 { font-size: clamp(3rem, 6vw, 5rem); margin-left: 5%; }

        .typo-5 { font-size: clamp(2rem, 4vw, 3rem); margin-left: 15px; }

        .typo-6 { font-size: clamp(2.5rem, 5vw, 4rem); margin-left: 15%; margin-top: 10px;}



        /* --- Logo Section --- */

        .logo-text {

            color: var(--brand-teal);

            font-weight: 700;

            letter-spacing: 2px;

            font-size: 1.1rem;

            margin-top: 1rem;

        }



        section.content{

            margin-top: 100px;

        }

        h1.page-title{

            background-color: var(--brand-teal);

            color:#fff;

            font-size: 58px;

        }

        .container.description{

            margin-top: 100px;

        }

        

        .list-category.cat-odd{

            padding-right: 50px;

        }

        .list-category.cat-odd li{

            text-align: right;

        }

        .list-category.cat-even{

            padding-left: 50px;

        }

        .list-category ul{

            padding-left: 0;

            margin-bottom: 0;

        }

        .list-category ul li{

            list-style: none;

            margin-bottom: 10px;

        }

        .list-category ul li a{

            text-decoration: none;

            color:#fff;

            text-transform: uppercase;

            font-size: 24px;

            display: block;

            

        }

         .main-category{

            display: table;

        }

        .category-title{

            color: var(--brand-teal);

            /* display: table-cell;

            vertical-align: middle; */

            letter-spacing: 2px;

        }

        .service-category h1.page-title, .service-content h1.page-title{

            background: none;

            color: var(--brand-orange);

            text-transform: uppercase;

        }

        .parent-category{

            color:#f0efef;

            font-size: 56px;

            text-transform: uppercase;

            position:absolute;

            width: 100%;

            top:-27px

        }

        .service-category section.content,.service-content section.content{

            /* margin-top: 40px; */

        }

        .service-slogan{

            color: #686867;

            font-style: italic;

            font-size:1.5rem;

        }

        .category-nav a{

            text-decoration: none;

            color:#fff;

        }

        .category-nav a.active{

            background-color:var(--brand-orange)

        }

        .dropdown-search .btn{

            color: var(--brand-teal);

            font-weight: 600;

        }

        .dropstart .dropdown-toggle::before{

            display: none;

        }



        .select-box {

  position: relative;

  display: flex;

  width: 400px;

  flex-direction: column;

}



.select-box .options-container {

  background: #2f3640;

  color: #f5f6fa;

  max-height: 0;

  width: 100%;

  opacity: 0;

  transition: all 0.4s;

  border-radius: 8px;

  overflow: hidden;



  order: 1;

}



.selected {

  background: #2f3640;

  border-radius: 8px;

  margin-bottom: 8px;

  color: #f5f6fa;

  position: relative;



  order: 0;

}



.selected::after {

  content: "";

  background-size: contain;

  background-repeat: no-repeat;



  position: absolute;

  height: 100%;

  width: 32px;

  right: 10px;

  top: 5px;



  transition: all 0.4s;

}



.select-box .options-container.active {

  max-height: 240px;

  opacity: 1;

  overflow-y: scroll;

  margin-top: 54px;

}



.select-box .options-container.active + .selected::after {

  transform: rotateX(180deg);

  top: -6px;

}



.select-box .options-container::-webkit-scrollbar {

  width: 8px;

  background-color: var(--brand-teal);

  border-radius: 0 8px 8px 0;

}

.dropdown-menu{

  background-color: var(--brand-teal);



}

.select-box .options-container::-webkit-scrollbar-thumb {

  background: var(--brand-teal)

  border-radius: 0 8px 8px 0;

}



.select-box .option,

.selected {

  padding: 12px 24px;

  cursor: pointer;

  background-color: var(--brand-teal);



}



.select-box .option:hover {

  background: var(--brand-orange);

}



.select-box label {

  cursor: pointer;

}



.select-box .option .radio {

  display: none;

}



/* Searchbox */



.search-box input {

  width: 100%;

  padding: 12px 16px;

  font-family: "Roboto", sans-serif;

  font-size: 16px;

  position: absolute;

  border-radius: 8px 8px 0 0;

  z-index: 100;

  border: 8px solid var(--brand-teal);



  opacity: 0;

  pointer-events: none;

  transition: all 0.4s;

}



.search-box input:focus {

  outline: none;

}



.select-box .options-container.active ~ .search-box input {

  opacity: 1;

  pointer-events: auto;

}

#contact-form{

  background-color: var(--brand-orange);

  padding: 40px 80px 40px 40px;



}

#contact-form .form-control{

    margin-bottom: 20px;

}

.btn-send, .btn-send:hover{

  background-color: var(--brand-teal);

border-color: var(--brand-teal);

color:#fff;

width: 25%;

}
.btn-send span{

    background-color: #fff;

    color:#000;

    padding: 3px;

    margin-left: 20px;

}

.contact-us h1.page-title{

    position: absolute;

    top: 150px;

    width: 100%;

}

.contact-us section.content{

    margin-top: 200px;

}

.contact-list{

    padding-left: 120px;

}

.contact-list li{

    list-style: none;

    font-size: 28px;

    list-style-position: inside; 

    text-indent: -1.2em;

    margin-bottom: 14px;

}

.contact-list li::before{

    content: "";

  display: inline-block;

  width: 2rem;

  height: 2.2rem;

  mask-repeat: no-repeat;

  margin-right: 0.5rem;

  background-color:  var(--brand-teal); /* Matches text color */

  mask-position: 0 12px;

}

.contact-list li.phone::before{

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-phone-icon lucide-phone'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E"); /* Base64 Lucide SVG */

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-phone-icon lucide-phone'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");

}



.contact-list li.web::before{

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-globe-icon lucide-globe'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E"); /* Base64 Lucide SVG */

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-globe-icon lucide-globe'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");

}

.contact-list li.mail::before{

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-mail-icon lucide-mail'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E"); /* Base64 Lucide SVG */

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-mail-icon lucide-mail'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");

}

.contact-list li.map::before{

  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-map-pin-icon lucide-map-pin'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); /* Base64 Lucide SVG */

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-map-pin-icon lucide-map-pin'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");

}

.contact-list li svg{

    color: var(--brand-teal);

    margin-right: 30px;

}

.logo-bottom{

    margin-left: 150px;

    margin-bottom: 40px;

}

.container-service{

    margin-top: -70px;
position:relative;

}

.carousel-control-prev-icon{

    background-image: url(../image/icon-prev.png);

    background-repeat: no-repeat;

    background-size: cover;

}

.carousel-control-next-icon{

    background-image: url(../image/icon-prev.png);

    background-repeat: no-repeat;

    background-size: cover;

    rotate: 180deg;

}

.carousel-control-next-icon, .carousel-control-prev-icon{

    width: 3rem;

    height: 3rem;

}

.main-container{

    margin-top: -70px;
position:relative;

}

.shortcut-wa{

    position: absolute;

    left: 4%;

    top: 90px;

    z-index: 2;

}

#float-nav-service{

    position: fixed;

    top:30%;

    right: 0;

}

#float-nav-service a{

    display: block;

    color:#fff;

    text-decoration: none;

    background-color: #0a8c7e;

    padding: 10px;

    text-align: center;

    text-transform: uppercase;

    border-top-left-radius: 20px;

    border-bottom-left-radius: 20px;

}

#float-nav-service a span{

    display: block;

    width: 32px;

    font-size: 26px;

}



body.home .footer{

    display: none;

}

body.aboutus .description p{

    font-size: 24px;

}





section.footer{

     position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    border-bottom: 15px solid var(--brand-orange);

}

.footer-logo{

    margin-left: 70px;

    width:150px;

    margin-bottom: 10px;

}

.strip-footer{

    /* height: 40px;

    background-color: var(--brand-orange); */



}

body.service-category section.footer, body.service-content section.footer{

   position:relative;

    border-bottom:none;

    background-image: url('/image/bottom-stripe.png');

            background-repeat: repeat-x;

            background-position: bottom;

}

body.contact-us section.footer{

    border-bottom:none;



}

body.contact-us{

    padding-bottom: 100px;

}



#contact-form input,

#contact-form textarea{

    font-size: 24px;

}

.nav-item-search{

    margin-left: 100px;

}