*{
      margin: 0;
      padding: 0;
      outline: 0;
      box-sizing: border-box;
      font-family: Arial, Helvetica, sans-serif;
      scroll-behavior: smooth;    
 }

 .navbar {
    width: 100vw;
    height: 10vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color: rgb(150, 90, 247);
} 

.logo {
    margin-left: 20px;
   
}

.logo a{
    font-size: 2rem;
    font-weight: bold;
    text-decoration: none;
    color: whitesmoke;
}
.menu {
    margin-right: 20px;
    display: flex;
}

.menu li {
    list-style: none;
    margin-left: 20px;    
}
 
.menu li a {
    font-size: 15pt;
    color:#ffffff;
    text-decoration: none;
}

nav .menu {
            display: flex;
            gap: 0.5rem;
            list-style: none;
        }

        nav .menu a {
            color: #ffffff;
            text-decoration: none;
            position: relative;
            padding: 0.5rem 0;
            transition: color 0.3s ease;
        }

        nav .menu a::after {
            content: "";
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #c3e91c;
            transition: width 0.3s ease;
        }

        nav .menu a:hover::after {
            width: 100%;
        }

        /* Responsive menu */
        #menu-toggle {
            display: none;
        }

        .menu-icon {
            display: none;
            cursor: pointer;
            width: 30px;
            height: 20px;
            flex-direction: column;
            justify-content: space-between;
        }

        .menu-icon span {
            height: 3px;
            background: white;
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .menu-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        @media (max-width: 768px) {
            .menu {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                flex-direction: column;
                background-color: #1e293b;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.4s ease;
            }

            #menu-toggle:checked+.menu-icon+.menu {
                max-height: 300px;
            }

            .menu-icon {
                display: flex; 
            }

            .navbar {
                width: 80%;
                height: 3%;
            }

            .logo a {
                font-size: 12pt;
            }

        section {
            display: flex;
            height: 100vh;
            width: 150vw;
            align-items: center;
            justify-content: center; 
            color: aliceblue;
            font-size: 30px;
        }

            #about {
                width: 90%;
                height: 30%;
                padding-top: 30%;
            }

            .content {
                width: 20%;
                height: 30%;
            }

            div.text h2 {
                font-size: 15pt;
                margin-top: 5%;
                margin-left: 13%;
            }

            div.gambar {
                width: 268vw;
                padding-top: 10%;
                background-size: cover;
            }

            div.about img {
                width: 20%;
                height: 20%;
            }

            #identitas {
                width: 240vw;
            }

            #services {
                width: 240vw;
            }

            #portofolio {
                width: 270vw;
            }

            #portofolio .folio {
                width: 100%;
                margin-top: 100%;
            }  
            
            #portofolio .porto{
                width: 230vw;
                margin-right: 100%;
                margin-top: 10%;
            }

            #portofolio .folio h1 {
                font-size: 20pt;
                font-weight: bold;
                width: 200%;
                margin-left: 40%;
            }

            #portofolio .folio h6 {
                font-size: 10pt;
                width: 200%;
                margin-left: 40%;
            }

            #clients {
                width: 240vw;
            }

            div.my-clients {
                margin-right: 50%;
            }

            #skill {
                width: 240vw;
            }

            #skill .formFeedback {
                width: 70%;
            }

            div.work1 {
                width: 60vw;
                height: 30vh;
                background-color: rgb(254, 255, 255);
            }

            div.work2 {
                width: 60vw;
                background-color: rgb(254, 255, 255);
            }

            div.work3 {
                width: 60vw;
                background-color: rgb(254, 255, 255);
            }

            div.work4 {
                width: 60vw;
                background-color: rgb(254, 255, 255);
            }

            div.work2 h2 {
                width: 240vw;
            }

            div.work2 h3 {
                margin-right: 30%;
            }

            div.work3 h3 {
                margin-right: 30%;
            }

            div.work2 h4 {
                margin-left: 30%;
            }

            div.work3 h4 {
                margin-left: 45%;
            }

            div.work4 h4 {
                margin-left: 50%;
            }

            div.contact-form button{
                margin-right: 20%;
            }

            #contact {
                width: 270vw;
            }

            div.container8 {
                margin-top: 40%;
                margin-left: 20%;
            }

            div.phone1 {
                width: 60vw;
            }

            div.phone2 {
                width: 70vw;
            }

            div.phone3 {
                width: 60vw;
            }

            div.phone3 p {
                width: 100%;
                margin-left: 10%;
            }

            div.phone2 p {
                margin-left: 10%;
            }

            #map {
                width: 270vw;
            }
        }

section {
    display: flex;
    height: 90vh;
    width: 100vw;
    align-items: center;
    justify-content: center; 
    color: aliceblue;
    font-size: 30px;
}

#About {
    background-color: rgba(rgb(104, 16, 245));
    width: 100%;
    height: 90vh;
}

.content {
    width: 100%;
    height: 100vh;
    /* background-color: aqua; */
    gap: 3%;
}

.profile_picture {
    height: auto;
    width: 100%;
}

.gambar {
    background: url(laptop.png);
    width: 100vw;
    height: 95vh;
    background-size: cover;
}

.text img {
    width: 15%;
    height: 10%;
    margin-top: 10%;
    border-radius: 80px;
    margin-left: 20%;
}

h2 {
    font-size: 30pt;
    margin-left: 5%;
    margin-bottom: 15%;
}

.text {
    padding-top: 8%;
    margin-left: 30%;
}

.tulis1 {
    color: rgb(142, 81, 241);
    margin-bottom: 3%;
    font-size: 38pt;
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
}

.teks h5 {
    color: rgb(52, 51, 51);
    font-size: 20pt;
    padding-bottom: 3%;
}

.teks p {
    color: grey;
    width: 100%;
    font-size: 10pt;
    margin-bottom: 20%;
}

#identitas {
    background-color: rgb(255, 255, 255);
    padding-top: 10%;
}

.container {
    margin-top: 3vh;
    display: flex;
    margin-right: 30%;
    width: 50%;
    height: 70vh;
}

.ability {
    width: 50%;
    height: 70vh;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 13%;
}

.abb h6 {
    width: 100%;
    font-size: 13pt;
    color: rgb(35, 34, 34);
    margin-right: 10%;
}

.abb {
    width: 100%;
    height: auto;
}

.list1 {
    width: 500%;
    height: auto;
    margin-left: 50%;
   
}

.hr1 {
    width: 90%;
    height: 50%;
    background-color:  rgb(142, 81, 241);
    font-weight: bolder;
    padding-bottom: 2%;
    border-radius: 20%;
}


.list2 {
    width: 500%;
    height: auto;
    margin-left: 50%;
    margin-top: 50%;
}

.hr2 {
    width: 65%;
    height: 50%;
    background-color: rgb(142, 81, 241);
    font-weight: bolder;
    padding-bottom: 2%;
    border-radius: 20%;
}

.list3 {
    width: 500%;
    height: auto;
    margin-left: 50%;
    margin-top: 50%;
}

.hr3 {
    width: 80%;
    height: 50%;
    background-color: rgb(142, 81, 241);
    font-weight: bolder;
    padding-bottom: 2%;
    border-radius: 20%;
}

.list4 {
    width: 500%;
    height: auto;
    margin-left: 50%;
    margin-top: 50%;
}

.hr4 {
    width: 50%;
    height: 50%;
    background-color: rgb(142, 81, 241);
    font-weight: bolder;
    padding-bottom: 2%;
    border-radius: 20%;
}

.container1 {
    text-align: center;
    padding: 20px;
    max-width: 900px;
    margin: auto;
}

#icon {
    text-align: center;
    width: 60%;
    height: 50%;
    margin-left: 20%;
    padding-bottom: 10%;
}

/* AI baris 233-270 */

.container1 h1 {
    color: rgb(142, 81, 241);
    font-size: 30pt;
    margin-bottom: 5px;
}

.container1 p {
    color: #666;
    font-size: 12pt;
    margin-bottom: 100px;
}

.services-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-left: 5%;
    padding-bottom: 50%;
}

.service-item {
    background-color: #fff;
    padding: 40px 30px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    text-align: left;
}

.service-item h2 {
    color: #000;
    font-size: 18pt;
    margin-bottom: 10px;
    text-align: center;
}

.service-item p {
    color: #777;
    margin-bottom: 0;
    font-size: 12pt;
}

#portofolio {
    width: 100%;
    height: 100%;
}

.porto {
    display: grid;
    width: 100%;
    height: 100%;
    gap: 20px;
    margin-top: 5%;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(3, 1fr);
}

.porto a {
    flex: 1 1 25%;
    display: block;
    width: 25%;
    height: 100%;
    margin-left: 20%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.folio {
    text-align: center;
    padding: 20px;
    max-width: 900px;
    margin: auto;
    margin-top: 30%;
}

.folio h1 {
    font-size: 30pt;
    color: rgb(142, 81, 241);
    font-family: Arial, Helvetica, sans-serif;
    margin-left: 10%;
}

.folio h6 {
    font-size: 12pt;
    color: #666;
    align-items: center;
    margin-left: 5%;
}

.kalku {
    width: 50%;
    height: 30%;
    background: none;
}

.kalku-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.status {
    width: 60%;
    height: 30%;
    background: none;
}

.status-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.spin {
    width: 50%;
    height: 30%;
    background: none;
}

.spin-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.web {
    width: 50%;
    height: 30%;
    background: none;
}

.web-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.solar {
    width: 50%;
    height: 30%;
    background: none;
}

.solar-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.tabel {
    width: 50%;
    height: 30%;
    background: none;
}

.tabel-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.sudoku {
    width: 50%;
    height: 30%;
    background: none;
}

.sudoku-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.cross {
    width: 50%;
    height: 30%;
    background: none;
}

.cross-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.flip {
    width: 50%;
    height: 30%;
    background: none;
}

.flip-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.reg {
    width: 50%;
    height: 30%;
    background: none;
}

.reg-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.swot {
    width: 50%;
    height: 30%;
    background: none;
}

.swot-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.asas {
    width: 50%;
    height: 30%;
    background: none;
}

.asas-img {
    width: 300%;
    height: 90%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* #clients {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 80%;
    padding-bottom: 8%;
} */

.container2 h2 {
    width: 100%;
    color: rgb(142, 81, 241);
    font-size: 24pt;
    margin-top: 10%;
    margin-left: 25%;
    position: relative;
}

.my-clients {
    display: grid;
    width: 150%;
    grid-template-columns: repeat(5, 1fr);
    margin-right: 40%;
}

.client1 h5{
    margin-right: 10%;
    color: #666;
    font-size: 20pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.client2 h5{
    color: #666;
    font-size: 20pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.client3 h5{
    color: #666;
    font-size: 20pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.client4 h5{
    color: #666;
    font-size: 20pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.client5 h5{
    color: #666;
    font-size: 20pt;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.containerContact {
    margin-top: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    height: 70vh;
}

.formFeedback {
    width: 50%;
    height: 70vh;
}

.textContact {
    width: 50%;
    height: 70vh;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 13%;
}

.textContact .background {
    padding: 3%;
    width: 100%;
    height: 130%;

}

.teknik1 {
    width: 100%;
    height: auto;
    margin-left: 38%;
}

.img1 {
    width: 40%;
    height: 60%;
    padding-right: 20%; 
}

.garis1 {
    width: 50%;
    font-weight: bold;
}

.img2 {
    width: 40%;
    height: 60%;
    padding-right: 20%; 
    margin-top: 15%;
}

.garis2 {
    width: 50%;
    font-weight: bold;
}

.img3 {
    width: 40%;
    height: 60%;
    padding-right: 20%; 
    margin-top: 15%;
}

.garis3 {
    width: 50%;
    font-weight: bold;
}

.garis-gambar {
    width: 5%;
    height: 15%;
}

.tulis {
    color: rgb(142, 81, 241);
}

.textContact h1 {
    padding-top: 5%;
    color: #022640;
    text-align: center;
    margin-bottom: 20px;
}

.textContact .alamat {
    width: 80%;
    height: 10%;
    /* background-color: #e12f02; */
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 12%;
    display: flex;
    justify-content: start;
    gap: 5%;
}

.textContact .alamat .icon {
    width: 20%;
    height: 100%;
    /* background-color: #cf0a87; */
}

.textContact .alamat .description {
    height: 100%;
    font-size: 14pt;
    color: #ffffff;
    font-weight: bold;
}

.textContact .alamat2 {
    width: 80%;
    height: 10%;
    /* background-color: #e12f02; */
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 12%;
    display: flex;
    justify-content: start;
    gap: 5%;
}

.textContact .alamat2 .icon {
    width: 10%;
    height: 100%;
    /* background-color: #cf0a87; */
}

.tulisan1 p{
    font-size: 12pt;
    color: #7d7c7c;
    margin-bottom: 2%;
}

.tulisan1 h4 {
    font-size: 15pt;
    color: rgb(142, 81, 241);
}


.textContact .alamat2 .description {
    width: 80%;
    height: 100%;
    font-size: 14pt;
    color: #ffffff;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: bold;
} 

.textContact .alamat3 {
    width: 80%;
    height: 10%;
    /* background-color: #e12f02; */
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 12%;
    display: flex;
    justify-content: start;
    gap: 5%;
}

.tulisan1 h6 {
    color: #2b2a2a;
    font-size: 12pt;
    margin-bottom: 10%;
}

.textContact .alamat3 .icon {
    width: 10%;
    height: 100%;
    /* background-color: #cf0a87; */
}

.textContact .alamat3 .description {
    width: 80%;
    height: 100%;
    font-size: 14pt;
    color: #ffffff;
    display: flex;
    justify-content: start;
    align-items: center;
    font-weight: bold;
} 

.formFeedback form input {
    width: 360px;
    height: 30pt;
    font-size: 14pt;
    margin-left: 5vw;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: transparent;
    border: none;
    color: #ffffff;
    border-bottom: 2px solid rgb(255, 255, 255);
}

.formFeedback textarea {
    resize: none;
    margin-top: 20px;
    background-color: transparent;
    outline: none;
    color: #fff;
    font-size: 14pt;
    margin-left: 5vw;
}

.formFeedback form button {
    margin-left: 5vw;
    margin-top: 20px;
    width: 360px;
    height: 40px;
    color: #ffffff;
    background-color: rgba(255, 255, 255,0);
    border-radius: 20px;
    border: 2px solid #fff;
}

.formFeedback form button:hover {
    background-color: #65ff12;
    color: #000000;
    font-weight: bold;
    cursor: pointer;
    border-color: 2px solid #022640;
}

#work {
    background-color: rgb(255, 255, 255);
    width: 100%;
    height: 80%;
    padding-bottom: 5%;
}

.container6 {
    width: 80%;
    height: 40%;
    color: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-left: 12%;
    position: relative;
    margin-top: 5%;
}

.work1 h2{
    font-size: 40pt;
}

.work1 h3 {
    font-size: 24pt;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(142, 81, 241);
    position: absolute;
    padding: 2px 6px;
    top: 20px;
    left: 100px;
}

.work1 h4 {
    color: #2b2a2a;
    font-size: 15pt;
    position: absolute;
    top: 70px;
    margin-left: 4%;
}

.work2 h2{
    font-size: 40pt;
    margin-right: 100%;
}

.work2 h3 {
    font-size: 24pt;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(142, 81, 241);
    position: absolute;
    padding: 2px 6px;
    top: 20px;
    left: 340px;
}

.work2 h4 {
    color: #2b2a2a;
    font-size: 15pt;
    position: absolute;
    top: 70px;
    margin-left: 4%;
}

.work3 h2{
    font-size: 40pt;
}

.work3 h3 {
    font-size: 24pt;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(142, 81, 241);
    position: absolute;
    padding: 2px 6px;
    top: 20px;
    left: 600px;
}

.work3 h4 {
    color: #2b2a2a;
    font-size: 15pt;
    position: absolute;
    top: 70px;
    margin-left: 5%;
}

.work4 h2{
    font-size: 40pt;
}

.work4 h3 {
    font-size: 24pt;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: rgb(142, 81, 241);
    position: absolute;
    padding: 2px 6px;
    top: 20px;
    left: 830px;
}

.work4 h4 {
    color: #2b2a2a;
    font-size: 15pt;
    position: absolute;
    top: 70px;
    margin-left: 5%;
}

.tks {
    width: 50%;
    font-size: 25pt;
    color: rgb(142, 81, 241);
    text-align: center;
    font-weight: bold;
    margin-left: 25%;
    margin-top: 15%;
}

.tks1 {
    width: 50%;
    font-size: 18pt;
    color: #444343;
    font-style: initial;
    text-align: center;
    margin-left: 25%;
    margin-top: 2%;
}

.tks2 {
    width: 70%;
    font-size: 11pt;
    color: #5e5d5d;
    font-style: initial;
    text-align: center;
    margin-left: 15%;
    margin-top: 2%;
}

.contact-form {
    width: 80%;
    height: 70vh;
    margin-left: 13%;
}

.contact-form input {
    width: 360px;
    height: 30pt;
    font-size: 12pt;
    margin-left: 5vw;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: transparent;
    color: #181717;
    text-decoration: none;
    padding-left: 1.5%;
    border: 1px solid #000;
}

.contact-form textarea {
    width: 86%;
    height: 40vh;
    resize: none;
    margin-top: 20px;
    background-color: transparent;
    outline: none;
    color: #3e3e3e;
    font-size: 12pt;
    padding-left: 1.5%;
    padding-top: 1%;
    margin-left: 5vw;
    border: 1px solid #000;
}

.contact-form button {
    width: 13%;
    height: 9%;
    font-size: 14pt;
    background-color: rgb(142, 81, 241);
    color: #fff;
    border: none;
    margin-left: 7%;
    margin-top: 2%;
    cursor: pointer;
    border-radius: 10px;
}

.contact-form button:hover {
    width: 13%;
    height: 9%;
    font-size: 14pt;
    background-color: rgb(179, 140, 242);
    color: #f3eded;
    border: none;
    margin-left: 7%;
    margin-top: 2%;
    cursor: pointer;
    border-radius: 10px;
}

#email {
    width: 100%;
    height: 50%;
    padding-top: 15%;
}

.container8 {
    width: 70%;
    height: 40%;
    color: rgb(255, 255, 255);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    margin-left: 10%;
    
}

.phone1 h6{
    font-size: 12pt;
    margin-left: 10%;
    color: rgb(137, 135, 135);
}

.phone1 p {
    font-size: 12pt;
    color: rgb(142, 81, 241);
    position: absolute;
    padding: 2px 6px;
    margin-top: 2%;
    margin-left: 2%;
    font-weight: bold;
}

.phone2 h6{
    font-size: 12pt;
    margin-left: 10%;
    color: rgb(137, 135, 135);
}

.phone2 p {
    font-size: 12pt;
    color: rgb(142, 81, 241);
    position: absolute;
    padding: 2px 6px;
    margin-top: 2%;
    margin-left: 2%;
    font-weight: bold;
}

.phone3 h6{
    font-size: 12pt;
    margin-left: 10%;
    color: rgb(137, 135, 135);
}

.phone3 p {
    font-size: 12pt;
    color: rgb(142, 81, 241);
    position: absolute;
    padding: 2px 6px;
    margin-top: 2%;
    margin-left: 2%;
    font-weight: bold;
}

iframe {
    width: 100%;
    height: 80%;
    margin-top: 30%;
}