html,
 body {
     font-family: "Poppins", sans-serif;
 }

 .fs-big {
     font-size: 3.5rem;
 }

 .fs-small {
     font-size: 0.8rem;
 }

 .text-b-cee {
     color: #08205c;
 }

 .border-cee {
     border-color: #08205c !important;
 }

 .rounded-cee {
     border-radius: 1rem;
 }

 .cee-header {
     position: relative;
     z-index: 5;
     padding-top: 25px;
 }

 .cee-header-all {
     z-index: 5;
     padding-top: 25px;
     padding-bottom: 25px;
 }

 .cee-footer {
     background-color: #294294;
     padding: 5rem 0;
     color: white;
 }

 .cee-footer-icon {
     border-bottom: solid white 1px;
     padding-bottom: 2rem;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 }

 .cee-footer-icon img {
     object-fit: contain;

 }

 .cee-footer-value {
     padding: 5rem 0;
     display: flex;
     justify-content: space-between;
 }

 .nav-logo-cee {
     height: 3.5rem;
     width: auto;
 }

 .cee-home-banner {
     background-attachment: scroll;
     background-position: 50%;
     background-repeat: no-repeat;
     background-size: cover;
     background-blend-mode: lighten;
     margin-top: -7rem;
     padding: 12rem 0 17.5rem;
     height: 100vh;
     position: relative;
 }

 .cee-banner {
     background-attachment: scroll;
     background-position: 50%;
     background-repeat: no-repeat;
     background-size: cover;
     background-blend-mode: lighten;
     padding: 6rem 0 5rem;
     position: relative;
 }

 .cee-hero-mockup {
     aspect-ratio: 3 / 2;
     height: auto;
 }

 .cee-home-about,
 .cee-home-service,
 .cee-home-service-box,
 .cee-home-manfaat,
 .cee-jangkauan-proyek,
 .cee-home-blog,
 .cee-footer {
     content-visibility: auto;
     contain-intrinsic-size: 1px 900px;
 }

 .cee-home-about {
     background-color: #cfe2f3;
     padding: 5rem 0;
 }

 .cee-home-contact {
     background-color: #cfe2f3;
     padding: 6.5rem 0;
 }

 .cee-home-service {
     background-color: #294294;
     padding: 5rem 0;
     color: white;
     height: 40rem;
 }

 .cee-home-manfaat {
     padding: 5rem 15rem;

 }

 .cee-home-service-box {
     margin-top: -28rem;
     margin-right: 12rem;
     margin-left: 12rem;
 }

 .cee-value-bg {
     background-color: rgba(255,
             255,
             255,
             0.7);
     /* Red background with 50% opacity */
 }

 .cee-icon-contact {
     width: 30px;
     height: fit-content;
 }

 .filter-icon-contact {
     filter: invert(65%) sepia(97%) saturate(1774%) hue-rotate(11deg) brightness(110%) contrast(103%);
 }

 .cee-img-service {
     width: 100%;
     height: 18rem;
     object-fit: cover;
     border-bottom-left-radius: 1rem;
     border-bottom-right-radius: 1rem;
 }

 .cee-img-service-panah {
     width: 100px;
     position: absolute;
     right: 8%;
     top: -50px;
     filter: drop-shadow(2px 4px 5px rgb(114, 114, 114));
 }

 .cee-home-blog {
     padding: 10rem 10rem;
 }

 .plts-header {
     padding: 15px 20px;
 }

 .bg-copyright {
     background: #001139;
 }

 .bg-yellow-cee {
     background-color: rgb(244, 196, 0, 1);
 }

 .text-justify {
     text-align: justify !important;
 }

 .icon-plts-ongrid {
     height: 3.5rem;
 }

 .bg-text-light-cee {
     padding: 3rem 4rem;
     background-color: #6c93cc;
     color: white;
 }

 .bg-light-cee {
     background-color: #6c93cc;
 }

 .bg-background-cee {
     background-color: #e8e8e8;
 }

 .text-subtitle {
     font-size: 10pt;
 }

 .cee-industri {
     background-color: #e8e8e8;
     padding: 2rem 2rem;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     gap: 1rem;
 }

 .cee-industri img {
     width: 50% !important;
 }

 .dropdown-menu li {
     position: relative;
 }

 .dropdown-menu .dropdown-submenu {
     display: none;
     position: absolute;
     left: 100%;
     top: -7px;
 }

 .dropdown-menu .dropdown-submenu-left {
     right: 100%;
     left: auto;
 }

 .dropdown-menu>li:hover>.dropdown-submenu {
     display: block;
 }

 /* Container untuk pencarian */
 .search-container {
     position: relative;
     display: flex;
     align-items: center;
 }

 /* Tombol pencarian */
 .search-button {
     background: none;
     border: none;
     color: white;
     font-size: 20px;
     cursor: pointer;
     padding: 5px;
 }

 /* Form wrapper yang akan dianimasikan */
 .search-form-wrapper {
     position: absolute;
     right: 0;
     top: 100%;
     transform-origin: top right;
     /* Atur agar form tersembunyi secara default */
     transform: scaleY(0);
     opacity: 0;
     transition: transform 0.3s ease-out, opacity 0.3s ease-out;
     z-index: 10;
 }

 /* Kelas untuk menampilkan form */
 .search-form-wrapper.active {
     transform: scaleY(1);
     opacity: 1;
 }

 /* Gaya form pencarian */
 .search-form {
     display: flex;
     background-color: white;
     border-radius: 5px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
     overflow: hidden;
     /* Penting untuk menghilangkan tepi yang tidak rapi */
 }

 .search-input {
     border: none;
     padding: 10px;
     font-size: 16px;
     outline: none;
 }

 .search-submit {
     background-color: #555;
     color: white;
     border: none;
     padding: 10px;
     cursor: pointer;
 }

 .cee-banner-energiq {
     background-color: #CFE2F3;
     padding: 7rem 0;
     position: relative;
 }

 .energiq-gedung {
     width: 45vw;
     position: absolute;
     right: 5%;
     bottom: 0;
     filter: brightness(1.1);
 }

 .text-navy {
     color: #294294;
 }

 .cee-energiq-aspek {
     padding: 5rem 0;
     background-color: transparent;
     background-image: linear-gradient(180deg, #fff 0%, #cfe2f3 100%);
 }

 .cee-energiq-manfaat {
     padding: 5rem 0;
 }

 .cee-energiq-audit-energi {
     padding: 5rem 0;
     background-color: #cfe2f3;
 }

 .energiq-efisiensi {
     position: relative;
 }

 .icon-efisiensi {
     position: absolute;
     top: 0;
     left: -70px;
 }

 .bg-energiq-manfaat {
     padding-top: 176px;
     margin-top: -176px;
     padding-bottom: 100px;
     margin-bottom: -80px;
     padding-right: 5%;
     padding-left: 5%;

 }

 .img-audit {
     margin-top: -176px;
     margin-bottom: -80px;
     z-index: 1;
 }

 .z-10 {
     z-index: 10;
 }

 .btn-secondary {
     background-color: transparent;
     border: 2px solid rgb(41, 66, 148);
     color: rgb(41, 66, 148);
 }

 .btn-primary {
     background-color: rgb(41, 66, 148) !important;
     border: 2px solid rgb(41, 66, 148) !important;
     color: white !important;
 }


 .brand-icon {
     padding: 50px;
 }

 .img-blog {
     width: 100%;
     height: auto;
     aspect-ratio: 16 / 9;
     object-fit: cover;
 }

 .limit-lines {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
 }

 .limit-lines-2 {
     overflow: hidden;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }

 .blog-title {
     color: #001139;
 }

 .blog-title:hover {
     color: coral;
 }

@media only screen and (max-width: 600px) {

     .cee-header,
     .cee-header-all {
         padding: 12px 0;
     }

     .navbar>.container-md {
         align-items: center;
     }

     .nav-logo-cee {
         height: 2.5rem;
     }

     .navbar-toggler {
         padding: 0.35rem 0.55rem;
     }

     .navbar-collapse {
         background: rgba(255, 255, 255, 0.96);
         border-radius: 0.75rem;
         margin-top: 0.75rem;
         padding: 0.75rem 1rem;
         box-shadow: 0 8px 20px rgba(0, 17, 57, 0.12);
     }

     .navbar-nav {
         margin-left: 0 !important;
         font-size: 1rem !important;
     }

     .navbar-text {
         display: flex;
         align-items: center;
         gap: 0.75rem;
         margin-top: 0.5rem;
     }

     .navbar-text .btn {
         padding: 0.45rem 1rem !important;
     }

     .search-button {
         color: #294294;
     }

     .search-form-wrapper {
         left: 0;
         right: auto;
         width: min(100%, 280px);
     }

     .search-input {
         min-width: 0;
         width: 100%;
     }

     .dropdown-menu .dropdown-submenu {
         position: static;
         display: block;
         margin-left: 1rem;
         border: 0;
         box-shadow: none;
     }

     .cee-home-banner,
     .cee-banner {
         background-attachment: scroll;
     }

     .cee-home-banner {
         height: auto;
         min-height: 0;
         margin-top: 0;
         padding: 3rem 0 4rem;
     }

     .cee-home-banner .row {
         gap: 1.5rem;
     }

     .cee-hero-mockup {
         max-width: 92%;
         margin-right: auto;
         margin-left: auto;
         display: block;
     }

     .cee-home-blog {
         padding: 5rem 1rem;
     }

     .fs-big {
         font-size: 1.8rem;
         text-align: center;
     }

     .cee-home-service-box {
         margin-top: -23rem;
         margin-left: 0;
         margin-right: 0;
         padding: 0 1rem;
     }

     .cee-home-manfaat {
         padding: 50px 20px;
     }

     .cee-home-about,
     .cee-home-service,
     .cee-home-service-box,
     .cee-home-manfaat,
     .cee-jangkauan-proyek,
     .cee-home-blog,
     .cee-footer {
         content-visibility: visible;
         contain-intrinsic-size: auto;
     }

     .cee-jangkauan-proyek {
         padding: 50px 20px;

     }

     .cee-footer-icon {
         flex-direction: column;
     }

     .cee-footer-icon img {
         width: 50%;
         margin: 0 auto;
         margin-bottom: 30px;
     }

     .cee-footer-icon div h5 {
         text-align: center;
     }

     .brand-icon {
         padding: 0 20px;
         margin-top: 50px;
     }
 }


 #whatsapp-chat a {
     text-decoration: none;
 }

 #whatsapp-chat {
     position: fixed;
     background: #fff;
     width: 350px;
     border-radius: 10px;
     box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
     bottom: 90px;
     right: 30px;
     overflow: hidden;
     z-index: 99;
     animation-name: showchat;
     animation-duration: 1s;
     transform: scale(1);
 }

 .blantershow-chat {
     background: linear-gradient(to right top, #57a5c2, #44618d);
     color: white;
     position: fixed;
     z-index: 98;
     bottom: 25px;
     right: 30px;
     font-size: 15px;
     padding: 10px 20px;
     border-radius: 30px;
     box-shadow: 0 1px 15px rgba(32, 33, 36, 0.28);
     text-decoration: none;
 }

 .blantershow-chat:hover {
     color: white;
 }

 .blantershow-chat i {
     transform: scale(1.2);
     margin: 0 10px 0 0;
 }

 .header-chat {
     background: linear-gradient(to right top, #57a5c2, #44618d);
     color: white;
     padding: 20px;
 }

 .header-chat h3 {
     margin: 0 0 10px;
     font-size: 3rem;
     color: white;
 }

 .header-chat p {
     font-size: 14px;
     line-height: 1.7;
     margin: 0;
 }

 .info-avatar {
     position: relative;
 }

 .info-avatar img {
     border-radius: 100%;
     width: 50px;
     float: left;
     margin: 0 10px 0 0;
 }

 .informasi {
     padding: 20px;
     display: block;
     overflow: hidden;
     animation-name: showhide;
     animation-duration: 2.5s;
 }

 .informasi:hover {
     background: #f1f1f1;
 }

 .info-chat span {
     display: block;
     color: #44618d;
 }

 #get-label,
 span .chat-label {
     font-size: 12px;
     color: #888;
 }

 #get-nama,
 span .chat-nama {
     margin: 5px 0 0;
     font-size: 15px;
     font-weight: 700;
     color: #222;
 }

 #get-label,
 #get-nama {
     color: white;
 }

 span .my-number {
     display: none;
 }

 .blanter-msg {
     color: #444;
     padding: 20px;
     font-size: 12.5px;
     border-top: 1px solid #ddd;
 }

 .before-msg {
     color: #444;
     padding: 20px;
     /*font-size: 12.5px;*/
     /*text-align: center;*/
     border-top: 1px solid #ddd;
 }

 .before-msg-input {
     padding: 5px;
     width: 100%;
     margin-bottom: 10px;
     box-sizing: border-box;
 }

 #chat-input {
     border: none;
     font-family: "Arial", sans-serif;
     width: 100%;
     height: 20px;
     outline: none;
     resize: none;
 }

 #send-it {
     color: white;
     background: linear-gradient(to right top, #57a5c2, #6c93cc);
     width: 90px;
     margin: 90px 0 0 5px;
     padding: 5px 20px;
     border-radius: 10px;
 }

 #back-it {
     color: #3f3f3f;
     background: #e0e0e0;
     width: 90px;
     margin: 90px 0 0 5px;
     padding: 5px 20px;
     border-radius: 10px;
 }

 .first-msg {
     background: #f5f5f5;
     padding: 30px;
     text-align: center;
 }

 .first-msg span {
     background: #e2e2e2;
     color: #333;
     font-size: 14.2px;
     line-height: 1.7;
     border-radius: 10px;
     padding: 15px 20px;
     display: inline-block;
 }

 .start-chat .blanter-msg {
     display: flex;
 }

 #get-number {
     display: none;
 }

 .close-chat {
     position: absolute;
     top: 5px;
     right: 15px;
     color: #232221;
     font-size: 30px;
 }

 @keyframes showhide {
     from {
         transform: scale(0.5);
         opacity: 0;
     }
 }

 @keyframes showchat {
     from {
         transform: scale(0);
         opacity: 0;
     }
 }

 @media screen and (max-width: 480px) {
     #whatsapp-chat {
         width: auto;
         left: 5%;
         right: 5%;
         font-size: 80%;
     }
 }

 .hide {
     display: none;
     animation-name: showhide;
     animation-duration: 1.5s;
     transform: scale(1);
     opacity: 1;
 }

 .show {
     display: block;
     animation-name: showhide;
     transform: scale(1);
     opacity: 1;
 }