*{margin:0;padding:0;box-sizing:border-box}body{font-family:poppins;color:#333;display:flex;flex-direction:column;min-height:1080px}html,body{height:100%}main{flex-grow:1}.header{display:flex;align-items:center;padding:10px 20px;color:#fff;border-bottom:1px solid #ddd;position:relative;justify-content:space-between}.header img{height:60px;padding:5px}.navbar{display:flex;align-items:center;margin-left:auto;transition:all .3s ease}.navbar a{color:#333;text-decoration:none;padding:15px;margin:0 5px;font-weight:400;position:relative;transition:color .3s ease}.navbar a:hover{color:#4f8a92;text-decoration:none}.navbar a.active{color:#4f8a92;font-weight:400}.navbar a.active:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:3px;background-color:#4f8a92;transition:width .3s ease-in-out,left .3s ease-in-out}.navbar a:hover:after{width:100%;left:0}.dropdown{position:relative;display:inline-block;z-index:10}.dropdown-link{color:#333;text-decoration:none;padding:15px;margin:0 5px;font-weight:400;transition:color .3s ease}.dropdown-link:hover{color:#4f8a92;text-decoration:none}.dropdown-content{display:none;position:absolute;background-color:#fff;min-width:200px;box-shadow:0 4px 8px #0000001a;border-radius:5px;overflow:hidden;z-index:15;opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .3s ease}.dropdown-content a{color:#333;padding:10px 15px;text-decoration:none;display:block;font-size:16px;transition:color .3s ease}.dropdown-content a:hover{color:#4f8a92;text-decoration:none}.dropdown:hover .dropdown-content{display:block;opacity:1;transform:translateY(0)}.search-container{display:flex;align-items:center}.search-button{background-color:transparent;border:none;color:#000;cursor:pointer;padding:10px;font-size:16px}.search-input{display:none;padding:8px;font-size:16px;border:1px solid #ccc;border-radius:4px;width:300px}.hamburger{display:none;flex-direction:column;cursor:pointer;margin-left:auto}.hamburger span{height:3px;width:25px;background-color:#333;margin:4px 0;transition:.4s}.navbar.active{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:60px;right:0;background-color:#f1f1f1;width:100%;padding:20px 0;box-shadow:0 4px 8px #0000001a;z-index:999}.navbar.active a{text-align:left;padding:15px;margin:10px 0;width:100%;display:block}@media (max-width: 1024px){.header{align-items:center;padding:20px}.navbar{display:none;width:100%}.hamburger{display:flex}.navbar.active{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:60px;right:0;background-color:#f1f1f1;width:100%;padding:20px 0;box-shadow:0 4px 8px #0000001a;z-index:999}.navbar.active a{text-align:left;padding:15px;margin:10px 0;width:100%;display:block}}@media (max-width: 768px){.navbar{display:none}.hamburger{display:flex}.navbar.active{display:flex;flex-direction:column;align-items:flex-start;position:absolute;top:60px;right:0;background-color:#f1f1f1;width:100%;padding:20px 0;box-shadow:0 4px 8px #0000001a;z-index:999}.navbar.active a{text-align:left;padding:15px;margin:10px 0;width:100%;display:block}.header img{height:50px}.search-container{width:100%;justify-content:space-between;margin-top:15px}.search-input{width:100%;display:block}}.hero{background-image:url(/Images/hero-pageutama.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;height:89vh;display:flex;align-items:center;justify-content:flex-start;padding:0 50px;color:#4f98b2;text-align:left}.hero-content{max-width:800px}.hero h1{font-size:72px;font-weight:700;margin-bottom:10px}.hero p{font-size:1.5em;margin:0}.tujuan{padding:80px 20px;text-align:center;background:#fff}.tujuan p{max-width:800px;margin:auto;font-size:1.2em;line-height:1.6;color:#131d4c;font-weight:500}.services{display:flex;align-items:center;justify-content:center;padding:50px 20px;position:relative;background-color:#f5f5f5}.service-carousel{display:flex;gap:20px;overflow:hidden;width:70%;scroll-snap-type:x mandatory;scroll-behavior:smooth}.service-card{perspective:1000px;cursor:pointer}.card-inner{width:180px;height:250px;position:relative;transition:transform .4s;transform-style:preserve-3d}.service-card:hover .card-inner{transform:rotateY(180deg)}.card-front,.card-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#4f98b2;border-radius:15px;color:#fff;text-align:center}.card-front img{width:60px;margin-bottom:10px}.card-front h3,.card-back h3{font-size:1.2em;margin:10px 0}.card-back{transform:rotateY(180deg);padding:20px;gap:30px}.explore-button{padding:8px 16px;background-color:#fff;color:#131d4c;border:none;border-radius:8px;font-size:.9em;cursor:pointer}.fade-out{opacity:0;transition:opacity .5s ease}.carousel-button{border:none;border-radius:50%;width:50px;height:50px;font-size:1em;cursor:pointer;color:#fff;background-color:#4f98b2;position:absolute;top:50%;transform:translateY(-50%);display:flex;justify-content:center;align-items:center;transition:background-color .3s,color .3s}.carousel-button:hover{color:#4f8a92;background-color:#fff}.carousel-button.prev{left:8%}.carousel-button.next{right:8%}.app-section{padding:65px 20px;display:flex;justify-content:center;text-align:center}.content-container{display:flex;align-items:center;flex-wrap:wrap;gap:20px;max-width:800px;width:100%}.image-container img{width:300px;flex-shrink:0}.text-container{text-align:right}.text-container h2{font-size:1.8em;margin-bottom:10px;color:#333}.text-container p{font-size:1.1em;line-height:1.6;color:#666;max-width:500px}.quote-section{background-color:#87ceea;padding:100px 20px;text-align:center}.quote{color:#000;font-size:1.1em;font-weight:600;line-height:1.6;max-width:800px;margin:0 auto}.video-container{width:100%;max-width:100%;overflow:hidden;box-sizing:border-box}.time{width:100%;padding-left:100px;height:50px;display:flex;align-items:center;position:relative;z-index:1000}.carousel{width:100vw;height:100vh;margin-top:-50px;overflow:hidden;position:relative}.carousel .list .item{width:180px;height:250px;position:absolute;top:80%;transform:translateY(-70%);left:70%;border-radius:20px;box-shadow:0 25px 50px #0000004d;background-position:50% 50%;background-size:cover;z-index:100;transition:1s}.carousel .list .item:nth-child(1),.carousel .list .item:nth-child(2){top:0;left:0;transform:translate(0);border-radius:0;width:100%;height:100%}.carousel .list .item:nth-child(3){left:67%}.carousel .list .item:nth-child(4){left:calc(67% + 200px)}.carousel .list .item:nth-child(5){left:calc(67% + 400px)}.carousel .list .item:nth-child(6){left:calc(67% + 600px)}.carousel .list .item:nth-child(n+7){left:calc(67% + 800px);opacity:0}.list .item .content{position:absolute;top:50%;left:100px;transform:translateY(-50%);width:400px;text-align:left;color:#fff;display:none}.list .item:nth-child(2) .content{display:block}.content .title{font-size:62px;text-transform:uppercase;color:#fff;font-weight:700;line-height:1;opacity:0;animation:animate 1s ease-in-out .3s 1 forwards;text-shadow:2px 2px 4px #333;margin-bottom:15px}.content .btn{margin-left:5px;opacity:0;animation:animate 1s ease-in-out 1.2s 1 forwards}.content .btn button{padding:10px 20px;border:1px solid #fff;background:transparent;color:#fff;cursor:pointer;font-size:14px}.content .btn button:hover{background-color:#fff;color:#333}.content .btn button:nth-child(1){margin-right:15px}.content .btn button:nth-child(2){background:transparent;color:#4f8a92;border:2px solid #fff;transition:.3s}.content .btn button:nth-child(2):hover{background-color:#4f8a92;color:#fff;border-color:#4f8a92}.arrows-vb{position:absolute;bottom:100px;left:100px;z-index:100;width:300px;max-width:30%;display:flex;gap:10px;align-items:center}.arrows-vb button{width:40px;height:40px;border-radius:50%;background-color:transparent;color:#fff;border:1px solid white;font-size:16px;font-family:monospace;font-weight:700;transition:.5s;cursor:pointer}.arrows-vb button:hover{background-color:#fff;color:#333}.carousel .timeRunning{position:absolute;z-index:1000;width:0%;height:4px;background-color:#4f8a92;left:0;top:0;animation:runningTime 7s linear 1 forwards}@media screen and (max-width: 768px){.hero{height:60vh;flex-direction:column;justify-content:center;text-align:center;padding:20px}.hero h1{font-size:48px}.hero p{font-size:1.2em}.hero-content{max-width:100%}.carousel{width:100%;height:50vh}.carousel .list .item{width:20%;height:100px;left:0}.timeRunning{height:2px}.carousel .arrows-vb{width:50%;justify-content:space-between}.carousel .arrows-vb button{display:none}}@keyframes runningTime{0%{width:0%}to{width:100%}}@keyframes animate{0%{opacity:0;transform:translateY(100px);filter:blur(33px)}to{opacity:1;transform:translate(0);filter:blur(0)}}.tentang-kami{color:#fff;padding:50px 0 50px 50px;position:relative;background-image:url(/Images/background-smart-city.jpg);background-size:cover;background-position:center;z-index:-2}.tentang-kami:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000c;z-index:-2}.smart-city{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2;flex-wrap:wrap}.smartCityText{flex:1;max-width:600px}.smartCityText h1{font-size:3rem;font-weight:700;margin-bottom:20px}.smartCityText p{font-size:1rem;line-height:1.8;margin-bottom:20px;text-align:justify}.divider{width:150px;height:2px;background-color:#fff;margin:20px 0}.smartCityText h2{font-size:1.5rem;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tags span{padding:10px 20px;background-color:transparent;border:1px solid #fff;border-radius:5px;font-size:.9rem;cursor:pointer;transition:background-color .3s ease,color .3s ease}.tags span:hover{background-color:#fff;color:#222}.smartcity{flex:1;display:flex;justify-content:flex-end;align-items:center;max-width:100%}.smartcity img{max-width:100%;height:auto;border-radius:10px;object-fit:cover}.serang-smart-city{padding:50px 80px;background-color:#fff}.con-scs{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.about-content{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}.about-image{max-width:40%;height:auto;border-radius:10px;object-fit:cover}.about-text{max-width:55%;color:#333}.about-text h2{font-size:24px;margin-bottom:20px;color:#222;text-align:center}.about-text p{font-size:16px;line-height:1.5;color:#555;text-align:justify}section.vision{position:relative;text-align:center;padding:50px 20px;background-color:#fdfdfd}.vision h2{font-size:1.8rem;margin-bottom:20px;color:#333}.vision p{font-size:1.2rem;line-height:1.6;max-width:800px;margin:0 auto}.half-circle-top{position:absolute;top:0;left:0;width:190px;height:90px;background-color:#fdb56b;border-bottom-left-radius:150px;border-bottom-right-radius:150px}.half-circle-bottom{position:absolute;bottom:0;right:0;width:190px;height:90px;background-color:#bc4b2d;border-top-left-radius:150px;border-top-right-radius:150px}.mission{text-align:center;padding:50px;background-color:#fff}.mission h2{font-size:1.8rem;margin-bottom:15px;color:#333}p.subtext{font-size:1rem;color:#777;margin-bottom:20px}.mission-container{max-width:800px;margin:0 auto 10px;border:1px solid #ddd;border-radius:8px;overflow:hidden}.mission-header{display:flex;align-items:center;background-color:#fff;padding:15px;cursor:pointer;transition:background-color .3s ease;justify-content:space-between;font-weight:700;font-size:18px}.mission-header:hover,.mission-header.open{background-color:#e9f6f7}.number{background-color:#4f8a92;color:#fff;width:30px;height:30px;display:flex;justify-content:center;align-items:center;border-radius:50%;font-size:14px;font-weight:700}.arrow{font-size:20px;color:#4f8a92;transition:transform .3s ease}.arrow.open{transform:rotate(90deg)}.mission-description{max-height:0;overflow:hidden;padding:0 15px;background-color:#fff;font-size:16px;text-align:justify;color:#555;transition:max-height .5s ease,padding .5s ease}.mission-description.open{max-height:300px;padding:15px}.timeline-section{padding:40px 30px}.timeline{display:flex;justify-content:space-between;align-items:flex-start;margin:0 50px 50px;gap:10px}.timeline-container{display:flex;flex-direction:column}.title-timeline{font-size:2.5rem;font-weight:700;color:#000;margin-bottom:20px}.subtitle{font-size:1rem;color:#666;margin:0}.nav-buttons{display:flex;gap:15px}.nav-btn{background-color:transparent;border:2px solid #4BA4A9;color:#4ba4a9;border-radius:50%;width:40px;height:40px;font-size:1.5rem;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:all .3s ease}.nav-btn.hidden{display:none}.nav-btn:hover{background-color:#4ba4a9;color:#fff;transform:scale(1.1)}.timeline-item{text-align:left;max-width:250px;position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:300px;padding-bottom:20px}.timeline-item.hidden{display:none}.year-container{display:flex;align-items:center;gap:10px}.icon-tentangkami{font-size:2rem;margin-bottom:10px}.vertical-line{width:5px;height:50px;background-color:#ddd}.teal{background-color:#4ba4a9}.orange{background-color:#e17c3b}.yellow{background-color:#e9ac32}.green{background-color:#4caf50}.year{font-size:1.2rem;color:#000}.round{width:30px;height:30px;background-color:#fff;border:4px solid #4BA4A9;border-radius:50%;display:flex;justify-content:center;align-items:center}.year-number{font-size:1rem;color:#4ba4a9;font-weight:700}.event-description{font-size:1rem;color:#333;margin-top:10px}.textual{margin-top:20px}.subtitle-event{font-size:1.1rem;margin-bottom:10px}.textual .event-description{font-size:1rem;text-align:justify}@media (max-width: 768px){.smartcity,.about-image{display:none}.about-text{max-width:100%;text-align:left}.serang-smart-city{padding:30px 20px}.con-scs{flex-direction:column;align-items:flex-start}.about-text h2{font-size:20px}.about-text p{font-size:14px}.tentang-kami{padding:50px}h2{font-size:2rem}p{font-size:1.1rem}.half-circle-top,.half-circle-bottom{width:100px;height:50px}.smartCityText h1{font-size:2rem}.smartCityText p{font-size:.9rem}.timeline{flex-direction:column;margin:0 50px 30px}.timeline-item{max-width:500px;text-align:justify;min-height:auto}}.person-section{background-image:url(/Images/background-person.png);background-size:cover;background-position:center;background-repeat:no-repeat;height:87vh;min-height:87vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:80px 40px;color:#fff;text-align:left;position:relative}.person-banner{max-width:800px}.person-banner h2{font-size:62px;font-weight:700}.struktur{text-align:center;margin:50px}.struktur-tag{display:flex;align-items:baseline;margin-bottom:3rem}.struktur .organisasi-title{color:#4f8a92;font-size:1.5rem;font-weight:700;margin-right:1rem;display:flex;align-items:center}.organisasi-line{flex-grow:1;height:1px;background-color:#9d9b9b}.struktur img{max-width:100%;height:auto;border-radius:8px}.sipil-tag{display:flex;align-items:baseline}.sipil-line{margin-right:3rem;flex-grow:1;height:1px;background-color:#9d9b9b}.sipil .sipil-title{margin:3rem 1rem 0rem 3rem;color:#4f8a92;position:relative;display:flex;align-items:center;font-size:1.5rem;font-weight:700}.background{position:absolute;top:-40px;left:-40px;height:120%;width:100%;background-size:cover;background-position:center;background-repeat:no-repeat;-webkit-filter:blur(30px);filter:blur(30px)}.profile-container{display:grid;grid-template-columns:repeat(4,1fr);padding:20px}.card{position:relative;border-radius:8px;height:250px;width:200px;margin:30px;background-size:cover;background-position:center;box-shadow:0 0 20px -10px #000;overflow:hidden}.card-blur{position:absolute;height:100%;width:calc(100% + 1px);background-color:#000;opacity:0;transition:opacity .15s ease-in}.card:hover .card-blur{opacity:.6}.footer-sipil{z-index:1;position:absolute;height:90px;width:100%;bottom:0}svg#curve1,svg#curve2,svg#curve3,svg#curve4,svg#curve5,svg#curve6,svg#curve7,svg#curve8{position:absolute;fill:#fff;left:0;bottom:0;width:400px;height:450px}.connections{height:50px;width:400px;position:absolute;bottom:100px;margin:20px}.connection{height:35px;width:35px;border-radius:100%;background-color:#fff;display:inline-block;padding:5px;margin-right:25px;transform:translateY(200px);transition:transform 1s cubic-bezier(.46,1.48,.18,.81)}.connection .icon{height:90%;width:90%;margin:1px;background-position:center;background-size:cover}.connection.whatsapp .icon{background-image:url(/Images/icon/whatsapp.svg)}.connection.email .icon{background-image:url(/Images/icon/envelope-edit.svg)}.connection.linkedin .icon{background-image:url(/Images/icon/linkedin-alt.svg)}.info{font-family:Poppins,"sans-serif";padding-left:15px;transform:translateY(250px);transition:transform 1s cubic-bezier(.31,1.21,.64,1.02)}.name{font-weight:700;font-size:14px;padding-top:5px}.job{margin-top:5px;font-size:12px}.card:hover .info,.card:hover .connection{transform:translateY(0)}.card1{background-image:url(/Images/profile/anonim\ pria.png)}.card2{background-image:url(/Images/profile/anonim\ pria.png)}.card3{background-image:url(/Images/profile/anonim\ wanita.png)}.card4{background-image:url(/Images/profile/anonim\ pria.png)}.card5{background-image:url(/Images/profile/anonim\ pria.png)}.card6{background-image:url(/Images/profile/anonim\ pria.png)}.card7{background-image:url(/Images/profile/anonim\ pria.png)}.card8{background-image:url(/Images/profile/anonim\ pria.png)}@media (max-width: 992px){.profile-container{grid-template-columns:repeat(3,1fr)}.person-section{height:60vh;min-height:60vh;padding:60px 30px}}@media (max-width: 768px){.profile-container{grid-template-columns:repeat(2,1fr)}.person-section{height:50vh;min-height:50vh;padding:60px 30px}}@media (max-width: 480px){.profile-container{grid-template-columns:1fr}.person-section{height:50vh;min-height:50vh;padding:40px 20px}.card{height:200px}}.herodimensi{background-image:url(/Images/background-dimensi.png);background-size:cover;background-position:center;background-repeat:no-repeat;height:70vh;min-height:70vh;display:flex;align-items:center;justify-content:center;color:#fff;text-align:left;position:relative;z-index:5}.herodimensi h1{font-size:48px;font-weight:700;margin:0}.icon-section{background-color:#edf2f5;padding:30px 0}.icon-row{display:flex;justify-content:space-around;align-items:center;max-width:1000px;margin:0 auto}.icon-item{width:50px;height:50px;transition:transform .3s ease,box-shadow .3s ease,filter .3s ease}.icon-item img{width:100%;height:auto;filter:grayscale(100%)}.icon-item:hover{transform:scale(1.1)}.icon-item:hover img{filter:grayscale(0%)}.smart-dimension{padding:20px;background-color:#f7f9fc;text-align:center}.dimension-content{max-width:900px;margin:0 auto;padding:10px}.dimension-content h2{font-size:2em;color:#4f8a92;margin-bottom:30px;font-weight:700;letter-spacing:1px}.dimension-description{display:flex;align-items:center;gap:20px;background-color:#e9f6f7;padding:30px;border-radius:12px;box-shadow:0 4px 12px #0000001a;margin-bottom:30px}.dimension-icon{width:70px;height:auto}.dimension-description p{font-size:1em;color:#333;line-height:1.5;text-align:justify}.dimension-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:25px}.feature-item{text-align:center;padding:30px;border-radius:12px;background-color:#fff;box-shadow:0 6px 15px #0000001a;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer}.feature-item:hover{transform:translateY(-10px);box-shadow:0 8px 20px #00000026}.feature-item img{width:50px;height:auto;margin-bottom:20px}.feature-item h3{font-size:1.2em;color:#65c8d0;font-weight:600;margin-bottom:15px}.feature-item p{font-size:1em;color:#666;line-height:1.5}.dimension-footer{background-color:#4f98b2;padding:20px;color:#f5f5f5;border-radius:10px;margin-top:40px;text-align:center}.dimension-footer p{font-size:1em;text-align:justify;line-height:1.5}@media (max-width: 768px){.dimension-description{flex-direction:column;text-align:center}.dimension-content h2{font-size:1.8em}.feature-item{padding:20px}.dimension-footer p{font-size:.9em}}.scroll-to-top-btn{position:fixed;bottom:30px;right:30px;background-color:#4f8a92;color:#fff;border:none;border-radius:50%;padding:15px;font-size:16px;height:45px;width:45px;opacity:0;visibility:hidden;transform:translateY(20px);cursor:pointer;box-shadow:0 4px 10px #0000001a;z-index:100;transition:opacity .3s ease-in-out,transform .3s ease-in-out,background-color .3s ease-in-out}.scroll-to-top-btn.show{opacity:1;visibility:visible;transform:translateY(0)}.scroll-to-top-btn:hover{background-color:#65c8d0;transform:scale(1.1);box-shadow:0 6px 12px #00000026}.gover{background-color:#f5f5f5;display:flex;justify-content:center;border-radius:15px;margin:70px 50px;padding:30px 0}.gover-content{display:flex;align-items:center;gap:100px;text-align:end}.mockup-gover{width:400px;height:auto}.gover-text h1{font-size:40px;color:#87ceea;margin-bottom:20px}.buttons{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.buttons button{padding:10px 15px;border:2px solid transparent;background-color:transparent;border-radius:5px;cursor:pointer;font-size:16px;font-weight:700;display:flex;align-items:center;gap:10px;color:#333;transition:background-color .3s,border-color .3s,color .3s}.buttons button:hover{background-color:#4f98b2;color:#fff;border-color:#4f98b2}.buttons a{text-decoration:none}.about-gover{text-align:center}.about-gover h2{font-size:35px;color:#87ceea;margin-bottom:10px}.about-gover p{margin:20px auto 70px;max-width:1000px;color:#555;background-color:#fff;padding:36px 20px;border:2px dashed #87CEEA;border-radius:10px;text-align:center}.title h1{background-color:#87ceea;color:#fff;display:inline-block;padding:10px 30px;border-radius:10px;font-size:24px;margin-bottom:30px}.steps-container{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.step{flex:1 1 calc(33.33% - 40px);max-width:300px;background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 6px #0000001a;text-align:center}.step .number{background-color:#87ceea;color:#fff;width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;border-radius:50%;font-size:20px;font-weight:700}.step h2{color:#87ceea;font-size:18px;margin:10px 0}.step p{font-size:14px;color:#666;line-height:1.5}@media (max-width: 992px){.gover-content{flex-direction:column;align-items:center;gap:10px}.mockup-gover{width:300px}.gover-text h1{font-size:30px}.about-gover p{max-width:90%}}@media (max-width: 768px){.gover{flex-direction:column;text-align:center}.gover-content{flex-direction:column;align-items:center}.mockup-gover{width:250px}.gover-text h1{font-size:36px}.buttons{align-items:center}.buttons button{width:100%;text-align:center}.about-gover p{max-width:90%}.steps-container{flex-direction:column}.step{max-width:100%}}.branding{background-color:#b5dae0;padding:40px 20px;display:flex;justify-content:center;align-items:center;border-radius:15px;margin:70px 50px}.branding-content{display:flex;align-items:center;gap:30px}.mockup-branding{width:400px;height:auto}.branding-text h1{font-size:35px;color:#333;font-weight:600;text-align:left}.branding-text .buttons{display:flex;flex-direction:column;gap:10px;align-items:flex-start}.branding-text .buttons button{padding:10px 15px;border:2px solid transparent;background-color:transparent;border-radius:5px;cursor:pointer;font-size:16px;font-weight:700;color:#333;display:flex;align-items:center;gap:10px;transition:all .3s ease}.branding-text .buttons button:hover{background-color:#4f8a92;color:#fff;border-color:#4f8a92}.about-branding{text-align:center}.about-branding h2{font-size:35px;color:#4f8a92;margin-bottom:10px}.about-branding p{max-width:1000px;margin:20px auto 70px;color:#555;background-color:#fff;padding:36px 20px;border-radius:10px;border:2px dashed #4F8A92}.work-process{max-width:1200px;margin:0 auto;padding:40px 20px;text-align:center}.title-branding h1{background-color:#4f8a92;color:#fff;display:inline-block;padding:10px 30px;border-radius:10px;font-size:24px;margin-bottom:30px}.steps-container-branding{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.step-branding{flex:1 1 calc(33.33% - 40px);max-width:300px;background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 6px #0000001a;text-align:center}.step-branding .number{background-color:#4f8a92;color:#fff;width:50px;height:50px;display:flex;align-items:center;justify-content:center;margin:0 auto 15px;border-radius:50%;font-size:20px;font-weight:700}.step-branding h2{color:#4f8a92;font-size:18px;margin:10px 0}.step-branding p{font-size:14px;color:#666;line-height:1.5}@media (max-width: 992px){.branding-content{flex-direction:column;gap:20px;text-align:center}.mockup-branding{width:300px}.branding-text h1{font-size:28px;text-align:center}.branding-text .buttons button,.about-branding p{width:80%}}@media (width >= 80rem){.content-container{flex-wrap:nowrap}}@media (max-width: 768px){.branding{padding:50px;text-align:justify;margin:auto;border-radius:0}.mockup-branding{display:none}.about-branding{margin-top:50px}.branding-text h1{font-size:24px;margin:10px 0}.about-branding p{width:80%}.branding-text .buttons{align-items:end;width:100%}.branding-text .buttons button{width:90%;text-align:center}.steps-container-branding{flex-direction:column}.step-branding{max-width:100%}}.eco{background-color:#87ceea;padding:40px 20px;display:flex;align-items:center;border-radius:15px;margin:70px 50px}.eco-content{display:flex;align-items:center}.mockup-eco{width:100%;max-width:400px;height:auto;margin:0}.eco-text h1{font-size:2.5rem;color:#333;margin:20px 0 0;font-weight:600}.about-eco{text-align:center}.about-eco h2{font-size:35px;color:#87ceea;margin-bottom:10px}.about-eco p{max-width:1000px;margin:20px auto 50px;color:#555;background-color:#fff;padding:36px 20px;border-radius:10px;border:2px dashed #4F8A92}.gallery{margin-bottom:50px}.header-gallery{border-radius:0 100px 100px 0;background-color:#87ceea;display:flex;align-items:center;margin:50px 400px 50px 0}.header-gallery h1{margin:20px 0 20px 60px;color:#fff;font-size:35px}.gallery-society{display:flex;justify-content:center;align-items:center;margin:50px 0}.gallery-container{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}.gallery-item{position:relative;overflow:hidden;aspect-ratio:1}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.gallery-item:hover img{transform:scale(1.1)}.videos{margin-bottom:20px}.video-gallery{max-width:1000px;margin:20px auto;text-align:center}.main-video{margin-bottom:20px;border:2px solid #222;padding:10px;background-color:#222}.main-video iframe{width:100%;height:450px}#videoTitle{margin-top:10px;font-size:18px;font-weight:700;color:#fff}.video-thumbnails{display:flex;justify-content:space-between;gap:10px}.thumbnail{width:150px;transition:transform .3s ease-in-out}.thumbnail:hover{transform:scale(1.1)}.thumbnail img{width:100%;border:2px solid #222;border-radius:5px}.thumbnail p{margin-top:5px;font-size:14px;color:#222}@media (max-width: 768px){.eco{margin:50px 20px;padding:30px 15px}.eco-content{flex-direction:column;text-align:center}.mockup-eco{max-width:300px;margin:0 auto}.eco-text h1{font-size:1.5rem;margin:15px 0}.about-eco h2{font-size:26px}.about-eco p{max-width:500px;text-align:justify}.header-gallery{padding-left:30px;margin:50px 300px 50px 0}}@media (max-width: 480px){.eco{padding:20px 10px;margin:30px 10px}.mockup-eco{max-width:250px}.eco-text h1{font-size:1.5rem}}.living{background:linear-gradient(135deg,#4f8a92,#7ccbd6);padding:40px 20px;display:flex;justify-content:center;align-items:center;text-align:right;border-radius:15px;margin:70px 50px}.living-content{display:flex;align-items:center;gap:30px}.living-content .mockup-living{width:500px;height:auto;margin:0}.living-text h1{font-size:40px;color:#fff;margin-bottom:10px;margin-right:20px;text-align:right}.about-living{text-align:center}.about-living h2{font-size:35px;color:#4f8a92;margin-bottom:10px}.about-living p{max-width:1000px;margin:20px auto 100px;color:#555;background-color:#fff;padding:36px 20px;border-radius:10px;border:2px dashed #4F8A92}.living-header-gallery{border-radius:0 100px 100px 0;background-color:#4f8a92;display:flex;align-items:center;margin:50px 400px 50px 0}.living-header-gallery h1{margin:20px 0 20px 60px;color:#fff;font-size:35px}@media (max-width: 768px){.living{padding:20px 10px;flex-direction:column;text-align:center}.living-content{flex-direction:column;align-items:center;gap:20px}.living-content .mockup-living{width:100%;margin:0}.living-text h1{font-size:34px;text-align:justify}.about-living p{max-width:650px}}@media (max-width: 992px){.living-text h1{font-size:34px;text-align:justify}}.society{background:#61a3be;padding:100px 40px;display:flex;justify-content:center;align-items:center;text-align:right;border-radius:15px;margin:70px 50px}.society-content{display:flex;align-items:center;gap:30px}.society-content .mockup-society{width:450px;height:auto;margin-top:-40px;margin-bottom:-40px}.society-text h1{font-size:45px;color:#fff;margin-bottom:20px;margin-left:80px;margin-right:40px;text-align:right}.about-society{text-align:center}.about-society h2{font-size:35px;color:#61a3be;margin-bottom:10px}.about-society p{max-width:1000px;margin:20px auto 70px;color:#555;background-color:#fff;padding:36px 20px;border-radius:10px;border:2px dashed #61A3BE}.soc{background-color:#61a3be}@media (max-width: 768px){.society{padding:20px 10px;flex-direction:column;text-align:center}.society-content{flex-direction:column;align-items:center;gap:20px}.society-content .mockup-society{width:250px;height:auto}.society-text h1{font-size:36px;margin:10px 0;text-align:center}}@media (max-width: 992px){.society-content{gap:30px;margin-top:50px}.society-content .mockup-society{width:200px}.society-text h1{font-size:30px}.about-society p{max-width:600px;text-align:justify}}.Environment{background:linear-gradient(135deg,#bc4b2d,#db7b61);padding:40px 20px;display:flex;justify-content:center;align-items:center;text-align:right;border-radius:15px;margin:70px 50px}.Environment-content{display:flex;align-items:center;gap:30px}.Environment-content .mockup-Environment{width:450px;height:auto;margin-top:-40px;margin-bottom:-40px}.Environment-text h1{font-size:40px;color:#fff;margin-bottom:10px;margin-right:20px;text-align:right}.about-Environment{text-align:center}.about-Environment h2{font-size:35px;color:#bc4b2d;margin-bottom:10px}.about-Environment p{max-width:1000px;color:#555;background-color:#fff;padding:36px 20px;margin:20px auto 70px;border-radius:10px;border:2px dashed #bc4b2d}.header-gallery-envi{border-radius:0 100px 100px 0;background-color:#bc4b2d;display:flex;align-items:center;margin:50px 400px 50px 0}.header-gallery-envi h1{margin:20px 0 20px 60px;color:#fff;font-size:35px}.envi .title h1,.envi .step .number{color:#fff;background-color:#bc4b2d}.envi .step h2{color:#bc4b2d}@media (max-width: 992px){.Environment-content{gap:40px;margin-top:22px}.Environment-content .mockup-Environment{width:300px}.Environment-text h1{font-size:30px;margin-left:0;text-align:center}.about-Environment p{max-width:850px;text-align:justify;margin:20px auto 50px}}@media (max-width: 768px){.Environment{padding:20px 10px;flex-direction:column;text-align:center}.Environment-content{flex-direction:column;align-items:center;gap:20px}.Environment-content .mockup-Environment{width:250px;height:auto}.Environment-text h1{font-size:36px;text-align:center;margin:10px 0}.about-Environment p{max-width:600px;text-align:justify;margin:20px auto 50px}}.dokumen-section{padding:40px;background-color:#f9f9f9;border-radius:8px;box-shadow:0 4px 8px #0000001a;flex:1;height:100%}.dokumen-item{display:flex;align-items:center;margin-bottom:15px;background:#fff;padding:15px;gap:15px;border-radius:10px;box-shadow:0 2px 6px #00000014;transition:transform .2s,box-shadow .2s}.dokumen-item:hover{transform:scale(1.02);box-shadow:0 4px 12px #00000026}.dokumen-item img{width:60px;height:60px;object-fit:contain;border-radius:5px;background-color:#f3f4f6;padding:5px}.dokumen-info h3{font-size:18px;font-weight:600;color:#333;margin:0}.dokumen-date{font-size:14px;color:#6c757d;margin-top:5px}.download-btn{margin-left:auto;padding:10px 20px;background-color:#65c8d0;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;transition:background-color .2s}.download-btn:hover{background-color:#4f8a92}.download-btn i{margin-right:5px}.search-filter{margin-bottom:20px;display:flex;justify-content:space-between;align-items:center}.search-filter input{width:100%;max-width:400px;padding:10px 15px;font-size:14px;border:1px solid #ddd;border-radius:8px;box-shadow:inset 0 1px 3px #0000000d;transition:border-color .2s}.search-filter input:focus{border-color:#4f8a92;outline:none}.table-container{overflow-x:auto;margin-bottom:20px}table{width:100%;border-collapse:collapse;background-color:#fff;border-radius:8px;box-shadow:0 2px 4px #0000001a}table th,table td{padding:12px 15px;text-align:left;border-bottom:1px solid #e9ecef}table th{background-color:#f1f3f5;font-size:14px;font-weight:600;color:#495057;cursor:pointer;position:relative}table td{font-size:14px;color:#6c757d}table th:hover{background-color:#e0e7ff;color:#333}th.sortable:after{content:"↕";position:absolute;right:10px;opacity:0;transition:opacity .2s}th.sortable:hover:after{opacity:.5}th.sortable.sorted-asc:after{content:"↑";opacity:1}th.sortable.sorted-desc:after{content:"↓";opacity:1}.pagination-docs{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px}.pagination-docs button,.pagination-docs select{padding:8px 12px;border:1px solid #ddd;background-color:#fff;border-radius:6px;font-size:14px;cursor:pointer;transition:background-color .2s,color .2s}.pagination-docs button:hover,.pagination-docs select:hover{background-color:#4f8a92;color:#fff}.articles{background-color:#fff;margin-bottom:30px}.categories{display:flex;flex-wrap:wrap;justify-content:center;gap:40px;margin-bottom:30px;background-color:#eaf6f6;padding:30px;border-radius:0;box-sizing:border-box}.categories button{background-color:transparent;border:none;font-size:16px;font-weight:700;color:#4ba4a9;cursor:pointer;transition:all .3s ease}.categories button:hover{color:#276f72;border-bottom:2px solid #4BA4A9;transform:scale(1.1)}.categories button.active{color:#276f72;border-bottom:2px solid #276F72;font-weight:700}.article-grid{display:flex;flex-wrap:wrap;max-width:1080px;gap:20px;align-items:stretch;padding:30px 10px 10px;overflow:hidden;margin:0 auto;transition:max-height .3s ease}.article-grid.expanded{max-height:none;overflow:visible}.article-item{width:250px;height:265px;background-color:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 6px #0000001a;display:flex!important;flex-direction:column;justify-content:space-between;transition:transform .3s ease,box-shadow .3s ease;text-decoration:none;color:inherit}.article-item:hover{transform:translateY(-10px);box-shadow:0 6px 10px #0003}.article-item a{text-decoration:none;color:inherit}.article-item img{width:100%;height:150px;object-fit:cover}.article-item p{font-size:12px;font-weight:700;color:#333;margin:10px}.article-item span{font-size:12px;color:#444343;margin:0 10px 10px;display:block}.slider-nav{display:flex;justify-content:center;gap:10px;margin:20px}.slider-nav button,.page-btn{background-color:#4f8a92;color:#fff;border:none;padding:10px 15px;cursor:pointer;font-weight:700;border-radius:50px;transition:background-color .3s ease;margin:5px}.slider-nav button:hover,.page-btn:hover{background-color:#3b7077}.page-btn.active{background-color:#2c5256}.berita-populer{padding:50px;margin-bottom:30px;background-color:#fdfdfd}.berita-header{display:flex;justify-content:space-between;margin-bottom:50px}.header-content{display:flex;align-items:center;gap:20px}.header-text h2{font-size:2em;font-weight:700;color:#4f8a92;margin:0;line-height:1.2;text-transform:uppercase}.header-lines{display:flex;flex-direction:column;gap:20px}.header-lines span{height:6px;border-radius:0 10px 10px 0;transition:width .3s ease-in-out}.header-lines span:nth-child(1){width:30vw;background-color:#76b0b7}.header-lines span:nth-child(2){width:45vw;background-color:#609da5}.header-lines span:nth-child(3){width:60vw;background-color:#4f8a92}.artikel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px}.artikel-item{background-color:#f9f9f9;border-radius:10px;overflow:hidden;box-shadow:0 4px 6px #0000001a;transition:transform .3s ease}.artikel-item:hover{transform:translateY(-5px)}.artikel-item img{width:100%}.artikel-item p{font-size:.9em;font-weight:700;color:#333;margin:10px}.artikel-item span{font-size:.8em;color:#777;margin:0 10px 10px}@media (max-width: 768px){.header-text h2{font-size:1.5em}.article-grid{justify-content:center}.header-lines{gap:15px}.header-lines span{width:70%}}@media (max-width: 480px){.header-text h2{font-size:1.2em}.header-lines span{width:90%}}.article-content{padding:30px;max-width:800px;margin:auto;background:linear-gradient(to bottom,#d9d9d9,#fff);border-radius:10px;box-shadow:0 4px 6px #0000001a}.breadcrumb{font-size:14px;margin:20px auto;max-width:800px;color:#555}.breadcrumb a{color:#4f8a92;text-decoration:none}.breadcrumb a:hover{text-decoration:underline}.breadcrumb .current{color:#4f8a92;text-decoration:none;font-weight:700}.publish-date{text-align:right;font-size:.9em;color:#666;margin-bottom:20px}.article-title{font-size:2em;color:#333;margin:10px 0 30px;text-align:center}.author{font-size:.8em;color:#666;margin:0 0 10px;text-align:left}.social-icons-art{display:flex;justify-content:left;gap:5px;margin-bottom:40px}.social-icons-art a img{height:30px;width:auto}.intro{font-size:1.1em;line-height:1.5;color:#333;text-align:justify}.intro p{margin-bottom:1em}.intro ul{margin-left:1.5em;margin-bottom:1em;list-style-type:disc}.intro ul li{margin-bottom:.5em;line-height:1.2}.intro ol{margin-left:1.5em;margin-bottom:1em;list-style-type:decimal;color:#333}.intro ol li{margin-bottom:.5em;line-height:1.2;font-weight:400}.intro ol{counter-reset:list-counter}.intro ol li::marker{font-weight:700;color:#333}.related-articles{background-color:#f9f9f9;padding:30px;text-align:center;margin-top:50px}.title-container{display:flex;align-items:center;margin-bottom:20px}.title-container h3{font-size:2em;color:#333;margin:0;white-space:nowrap}.horizontal-line{flex-grow:1;height:3px;background-color:#333;margin-left:15px}.related-articles .related-item{display:inline-block;width:280px;margin:10px;text-align:left;background-color:#bcc0c2;border-radius:10px;overflow:hidden;box-shadow:0 4px 6px #0000001a;transition:transform .2s ease-in-out}.related-articles .related-item:hover{transform:scale(1.03)}.related-articles .related-item img{width:100%;height:auto}.related-articles .related-item p{font-size:.9em;font-weight:700;color:#fff;margin:10px}.related-articles .related-item span{display:block;font-size:.8em;color:#fff;margin:0 10px 10px}.footer{background-color:#4f98b2;color:#fff;padding:40px 20px 10px;font-size:14px;text-align:center}.footer-container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;max-width:1200px;margin:0 auto}.footer-left,.footer-middle,.footer-right{flex:1;min-width:200px;margin:10px;padding:10px;text-align:left}.footer-right{text-align:center;display:grid}.footer-left p,.footer-middle p,.footer-right p{margin:5px 0}.footer-logo{width:200px;margin-bottom:10px}.footer-middle h4{font-size:16px;font-weight:700;margin-bottom:10px}.social-icons{display:flex;gap:15px;justify-content:flex-start;margin-top:15px}.social-icons img{width:30px;height:30px}.app-logo{width:150px;height:100px;margin-bottom:10px}.app-badge{width:130px;margin-top:5px;margin-bottom:20px}.rating-emo{padding:0;margin:0;position:border-box}.container-emo{height:-webkit-fill-available;display:grid;place-items:center}.card-emo{width:223px;height:170px;text-align:center;border-radius:15px;padding:10px 25px;margin-bottom:31px;margin-left:1px;margin-top:10px}.card-emo h2{color:#fbffff;font-size:1rem}.wrapper{height:74px;overflow:hidden;position:absolute;margin-top:15px}.rating>input{display:none}.rating{display:flex;justify-content:center;height:120px;flex-direction:row-reverse;margin-top:-3px}.card-emo:after{content:"";position:absolute;width:150px;height:0;background-color:var( --color1);bottom:0;left:50%;border-radius:15px 15px 0 0;transform:translate(-50%);transition:height .5s}.card-emo:nth-child(2):after{background-color:var(--color2)}.card-emo:nth-child(3):after{background-color:var(--color3)}.icon{width:80px;height:80px;background:var(--iconOneBG);border-radius:50%;margin:0 auto 20px;border:1px solid #00000000;position:relative}.icon:after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;top:-1px;left:-1px;opacity:0;transition:opacity .4s ease-in-out;animation:circle .8s linear infinite}.rating>label{cursor:pointer;width:40px;margin-top:auto;transition:.4s;color:silver;font-size:1.6em}.emoji{display:flex;flex-direction:column;align-items:center;transition:.4s}.emoji div{font-size:4em}.rating>input:checked~label:hover,.rating>input:checked~label:hover~label,.rating>input:not(:checked)~label:hover,.rating>input:not(:checked)~label:hover~label,.rating>input:checked~label,.rating>input:checked~label~label{color:#ffcc24}#rate5:checked~.wrapper>.emoji{transform:translateY(-75px)}#rate4:checked~.wrapper>.emoji{transform:translateY(-150px)}#rate3:checked~.wrapper>.emoji{transform:translateY(-225px)}#rate2:checked~.wrapper>.emoji{transform:translateY(-300px)}#rate1:checked~.wrapper>.emoji{transform:translateY(-375px)}#rate5:hover~.wrapper>.emoji{transform:translateY(-75px)}#rate4:hover~.wrapper>.emoji{transform:translateY(-150px)}#rate3:hover~.wrapper>.emoji{transform:translateY(-225px)}#rate2:hover.wrapper>.emoji{transform:translateY(-300px)}#rate1:hover~.wrapper>.emoji{transform:translateY(-375px)}.footer-copyright{margin-top:20px;border-top:1px solid #ffffff;padding-top:10px;font-size:12px}@media (max-width: 768px){.footer-container{flex-direction:column;align-items:center}.footer-left,.footer-middle,.footer-right{text-align:center;margin:10px 0}.footer p{text-align:left}}