:root {
            --primary: #2fe1cf;
            --bg:white;
        }
        *{
            margin:0;
            padding: 0;
            box-sizing: border-box;
            border:none;
            text-decoration: none;
        }
        li{
            list-style: none;
        }
        body{
             font-family: 'Roboto', sans-serif;
             background-repeat: repeat;
             font-size: 1.3rem;
        }
        .navbar{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:1.3rem 7%;
            background-color: #8c52ff;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            position: fixed;
            height: 55px;
        }

        .navbar .navbar-logo{
            font-size: 1.4rem;
            font-weight: 700;
            color: white;
        }

        .navbar .navbar-logo span{
            color:yellow;
        }

        .navbar .navbar-nav a{
            color:white;
            display: inline-block;
            margin: 0 1rem;
        }

        .navbar .navbar-nav a:hover{
            color: var(--primary);
        }

        .navbar .navbar-nav a::after{
            content: '';
            display: block;
            padding-bottom: 0.5rem;
            border-bottom: 0.2rem solid var(--primary);
            transform: scaleX(0);
        }

        .navbar .navbar-nav a:hover::after{
            transform: scaleX(0.8);
            transition: 0.2s linear;
        }

        .navbar .navbar-extra a{
            color:#fff;
            margin: 0 0.5rem;
        }

        .navbar .navbar-extra a:hover{
            color:var(--primary);
        }

        #hamburger-menu{
            display: none;
        }

        /* Hero Section */
        .hero{
            min-height: 100vh;
            display:flex;
            align-items: center;
            background-image: url('../images/bg-allpages.jpeg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .hero::after{
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 30%;
            bottom: 0;
            background: linear-gradient(0deg, rgb(255, 255, 255) 5%, rgba(0,0,0,0) 50%);
        }
        .hero .content{
            padding: 1.3rem 7%;
            max-width: 60rem; 
        }
        .hero .content h1{
            font-size: 3em;
            color:yellow;
            text-shadow: 2px 2px 5px rgba(1, 1, 3, 0.7);
            line-height: 1.4;
        }
        .hero .content span{
            color: #A0C878;
        }
        .hero .content p{
            font-size: 1.3em;
            background-color:rgba(60, 179, 113,0.8);
            border-radius:7px;
            padding: 5px 10px;
            color: white;
            font-weight: 100;
        }
        .hero .content .cta{
            margin-top: 2rem;
            display: inline-block;
            padding: 1rem 3rem;
            font-size: 1.4rem;
            color:white;
            border-radius: 7px;
            background-color: #8c52ff;
            transition: 0.3 ease-in;
        }
        .hero .content .cta:hover{
            background-color: yellow;
            color:black;
        }

        .sambutan{
            padding: 4rem 7% 0rem;
        }
        .sambutan .row{
            display: flex;
        }
        .sambutan .row .sambutan-img{
            flex: 1 1 35rem;
        }
        .sambutan .row .sambutan-img img{
            width: 75%;
            border-radius:65%;
            margin:0px 10%;
            box-shadow: 1px 3px 2px rgb(190, 190, 190);
        }
        .sambutan .row .content{
            flex: 1 1 60rem;
            background:linear-gradient(90deg, #ffffff,#a9caf3);
            padding: 10px 15px;
            border-radius: 10px;
        }
        .sambutan .row .content h2{
            font-size: 2.6rem;
            margin-bottom: 2rem;
        }

        .sambutan .row .content p{
            text-align: justify;
            line-height: 2rem;
        }
        .about, .perangkat, .berita, .partner, .gallery, .sejarah, .inovasi{
            padding: 4rem 7% 1.3rem;
        }
        .per{
            background-color: #ddedeb;
        }
        .brand{
            padding: 4rem 7% 1.3rem;
            text-align: center;
            background-size: cover;
            margin-top: 35px;
        }
        .brand img{
            width: 100px;
        }
       
        .about h2, .inovasi h2, .perangkat h2, .berita h2, .gallery h2, .partner h2, .sejarah h2, .sejarah .wraper-all h2{
            text-align: center;
            font-size: 2.6rem;
            margin-bottom: 2rem;
        }
        .partner{
            padding: 4rem 7%;
            background:linear-gradient(180deg, #ffffff, #8c52ff);
        }
       .about h2 span, .perangkat h2 span, .berita h2 span, .gallery h2 span, .partner  h2 span, .sejarah h2 span{
            color:var(--primary);
            border-bottom:3px solid grey;
        }
        .sambutan h2{
            color:#1e80d1;
        }
        .about .row{
            display: flex;
        }
        .about .row .content{
             flex: 1 1 60rem;
            background:linear-gradient(90deg,#3afb84,  #ffffff);
            padding: 10px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .about .row .about-img{
            flex: 1 1 35rem;
        }
        .about .row .about-img img{
            width: 100%;
            border-radius: 5px;
        }
         .about .row .content{
            flex: 1 1 40rem;
            padding: 0 2rem;
            line-height: 1.6;
            text-align: justify;
        }

        /* Section Perangkat dan Staf */

        .perangkat p{
            text-align: center;
            max-width: 40rem;
            margin:auto;
           
        }

        .perangkat .row{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 2rem;
            gap: 2rem;
        }
        .perangkat-card{
            width:200px;
            background-color: white;
            text-align: center;
            border-bottom:3px solid blueviolet;
            padding: 10px;
            box-shadow: 1px 1px 5px #d3d3d3;
            transition: 0.2s ease;
        }
         .perangkat-card:hover{
            transform: scale(1.1);
        }
        .perangkat .row .perangkat-card img{
            width:100%;
            height: 200px;
            border-radius: 2px;
        }
        .perangkat .row .perangkat-card p,h4{
            line-height: 1.8rem;
            font-size: 1.2rem;
        }
        .perangkat .row .perangkat-card h4{
            line-height: 2.2rem;
            font-size: 1.5rem;
            color:green;
        }
         .ip{
            width: 16px;
            height: 16px;
            color:blueviolet;
            margin:0.4rem;
        }
          .iv{
            width: 3rem;
            height:3rem;
            color:rgb(255, 255, 255);
            margin:0.4rem;
            font-weight: 100;
        }
        a.layanan-tombol{
                background-color: rgb(124, 84, 234);
                border-radius: 8px;
                padding: 7px 10px 2px;
                color:black
        }

        /* Section Invosi */
        .inovasi .row{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap:2rem;
        }
        .inovasi .row .inovasi-card{
           text-align: center;
            border-radius: 15px;
            background-color:#b862f5;
            width: 150px;
            padding: 10px;
            transition: 0.2s ease;
            border:2px solid rgb(0, 249, 8);
            color:white;
            font-weight: bold;
        }
         .inovasi .row .inovasi-card:hover{
            background-color:#f595db;
            transform: scale(1.1);
        }

        /* Section inovasi End */

        /*BERITA */
        .berita .row{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap:2rem;
        }

        .berita .row .berita-card{
            background-color:#ffffff;
            width: 300px;
            padding: 10px;
            transition: 0.2s ease;
        }
         .berita .row .berita-card i{
            size: 16px;
        }
        .ico{
            width:16px;
            height:16px;
        }
       
        .berita .row .berita-card img{
            width:100%;
            border-radius: 5px;
        }
        .berita .row .berita-card p{
            line-height: 2rem;
        }
        .berita .row .berita-card a{
            color: green;
        }
        .berita .row .berita-card p.tglberita{
            font-size: 1rem;
            margin-right: 5px;
            color :orangered;
            font-weight: bold;
        }
        .bfoot{
            background-color: #eaf6de;
            padding:5px 10px;
            border-bottom-right-radius:5px;
            border-bottom-left-radius:5px;
        }
        .berita .row .berita-card a:hover{
            color:var(--primary);
            transform: scale(1.1);
        }
        .berita .row .berita-card:hover{
            transform: scale(1.1);
        }

        /*GALLERY*/
        .gallery .row-gallery{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 2rem;
            gap: 2rem;
        }
        .gallery .row-gallery .gallery-card{
            background-color: white;
            border:1.5px solid #8c52ff;
            width:340px;
            padding: 0.5rem;
            transition: 0.2s ease;
        }
         .gallery .row-gallery .gallery-card:hover{
            transform:scale(1.05);
            box-shadow: 1px 1px 5px rgb(184, 59, 247);
            opacity: 0.8;
        }
        .gallery .row-gallery .gallery-card img{ 
            width:100%;
            height: 100%;
        }
        .gallery-btn{
            padding: 1rem 2rem;
            background-color: #a079f5;
            border-radius: 20px;
            color:white;
            font-weight:bold;
            transition: 0.3s ease-in;
        }
         .gallery-btn:hover{
            padding: 1rem 2rem;
            background-color: #afddf9;
            color:#024a0b;
            transform: scale(1.1);
        }
        .camera{
			color:red;
		}
		.camerai{
			height:2rem;
			width: 2rem;
			font-weight:bold;
		}
        /*GALLERY END*/

        /*PARTNER DESA*/
        .partner .row{
           text-align: center;
        }
        .partner .row img{
            background-color: white;
            margin: 5px;
            width:100%;
            height:100px;
            padding: 10px;
            width: 100px;
            border:1px solid grey;
            border-radius: 3px;
            transition: 0.2s ease;
        }
        .partner .row img:hover{
            box-shadow: 1px 1px 5px grey;
            transform: scale(1.1);
        }
        
        /* Maps */
        .maps{
            border-top: 2px solid #7cc5e9;
        }
        /* Maps End */

        /* Foo */
        .foot{
            padding-top: 3rem;
            background-color: #09122C;
        }
        .foot .row{
            padding:1.3rem 7%;
            display: flex;
            gap:30px;
            justify-content: space-between;
            font-size: 1.2rem;
            line-height: 1.7rem;
        }
        .foot .row h3{
            font-size: 1.7rem;
            line-height: 3rem;
            color:var(--primary)
        }
        .foot .row button{
            margin-top: 1.6rem;
            padding:1rem 5%;
            background-color: #41c6b1;
            border-radius: 3px;
            float:right;
        }
        .foot .row .left {
            background-color:#096B68;
            padding: 10px 15px;
            width: 500px;
            border-radius: 4px;
            line-height: 1.9rem;
            color: white;
        }
        .center{ 
            width: 380px; line-height: 1.9rem;
            color:white
        }
        .right a{
            line-height: 2rem;
            color: white;
        }
         .right a:hover{
            color: var(--primary);
        }

         /* SLIDER*/
        #container{
            width:100%;
            overflow:hidden;
            box-sizing: border-box;
        }

        #slider{
            width:100%;
            height:450px;
            position:relative;
            overflow:hidden;
            float:left;
            box-sizing: border-box;
        }

        #slider img{
            width:100%;
        }

        .slide{
            position:absolute;
        }
         .slide h1{
            font-size: 3em;
            color:yellow;
            text-shadow: 2px 2px 5px rgba(1, 1, 3, 0.7);
            line-height: 1.4;
        }
        .slide span{
            color: #A0C878;
        }
        .slide-copy{
            padding: 1.3rem 7%;
            max-width: 70rem; 
            position:absolute;
            bottom:50%;
            left: 7%;
            padding:20px;
            background:#41c6b1;
            background-color:rgba(60, 179, 113,0.8);
            color: white;
            border-radius: 10px;
        }
        /* SLIDER END*/

        /*NAVIGASI SEMUA HALAMAN*/
        table, th, tr,td{
            border:1px solid grey;
            border-collapse: collapse;
            padding: 7px 12px;
        }
         .input{
            width: 100%;
            border:1px solid grey;
            padding: 7px 12px;
        }
        .footer{
            display: flex;
            border-top:2px solid black;
            background-color: #09122C;
            padding:1.3rem 7%;
            font-size: 1.2rem;
            color:#2A4759;
        }
        .footer .footer-row{
            padding: 10px;
        }
    
        /*MENU DROPDOWN*/
        .navbar-nav ul{
            display: inline-block;
        }
        .navbar-nav ul li{
            list-style: none;
        }
        ul.dropdown{
            display: NONE;
            transition: 0.4s ease-in;
            -moz-animation-delay: 0.4;
        }
        ul li:hover ul.dropdown{
            display: block;
            background-color:#8c52ff;;
            position: absolute;
            border-radius: 5px;
            z-index: 999;
        }
        ul.dropdown li a{
            padding: 7px 7px;
        }
        .sosmedi{
            margin:5px;
            width: 1.7rem;
            height: 1.7rem;
            color:#98f428;
        }
        .sosmed{
            font-weight: bold;
            color:rgb(247, 227, 44);
            margin-top: 5px;
        }

        /* Media Queries */
        /* Laptop */
        @media (max-width:1366px){
            html{
                font-size: 75%;
            }
        }

        /* Tablet */
        @media (max-width:758px){
            html {
                font-size: 62.5%;
            }

            #hamburger-menu{
                display: inline-block;
            }
            button{
                font-size: 62.5%;
            }
          
            .navbar .navbar-nav{
                position: absolute;
                top: 100%;
                right: -100%;
                background-color:rgba(106, 90, 205,0.9);
                width: 25rem;
                height: 100vh;
                transition: 0.3s;
            }

            .navbar .navbar-nav.active {
                right: 0;
            }
            .navbar .navbar-nav a{
                display: block;
                margin: 1.5rem;
                padding:0.5rem;
                box-sizing: border-box;
                color:white;
            }
            
            #slider{
                width:100%;
                height:140px;
            }

            .brand img{
                width:60px;
            }
            .sambutan .row{
                display: block;
                align-items: center;
                text-align: center;
            }
            .sambutan .row .sambutan-img img{
            width:60%;
            }
            .about .row{
                flex-wrap: wrap;
            }

            .about .row .content{
                padding: 0;
            }

            .perangkat .gbr img{
                display:inline-block;
            }
            .foot .row{
                display: block;
                justify-content: center;
            }
            .left{
                width: 100%;
            }
        }

        /* Mobile Phone */
        @media (max-width:450px){
            html{
                font-size: 55%;
            }
            .foot .row .left{
                 width: 100%;
            }
            .perangkat-card{
                width: 150px;
                height: 250px;
            }
             .perangkat .row .perangkat-card img{
            width:100%;
            height: 150px;
        }