:root {
    --primary: #f57c00;
    --bg: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
}
html {
    scroll-behavior: smooth;
}

body {
    /* font-family: Arial, sans-serif;
    margin: 0;*/
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg);
    color: #000000;
    /*background-color: white;*/
}


.navbar {
    background-color: rgb(230, 84, 39);
    /*padding: 10px 20px;*/
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 7%;
    /*background-color: rgba(230, 84, 39);
    border-bottom: 1px solid #ff7f00;*/
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

    .navbar .navbar-logo {
        font-size: 1.3rem;
        font-weight: 700;
        color: #000000;
    }

    
    /*.navbar ul {*/
       
        /*list-style: none;
        display: flex;
        gap: 20px;
       
    }*/
    .navbar .navbar-nav a {
        display: inline-block;
        /*color: #000000;*/
        font-size: 1rem;
        margin: 0 0rem;
        background-color: #f4e3c1;
        color: #5a3e1b;
        padding: 5px 10px;
        /*margin: 0 1px;*/
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
    }
   /* .navbar a {
       
        background-color: #f4e3c1;
       
        color: #5a3e1b;
        padding: 10px 20px;
        margin: 0 0px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
    }*/

    /*.navbar li {
        background-color: #f4e3c1;
        border: 2px solid #5a3e1b;
        color: #5a3e1b;
        padding: 10px 20px;
        margin: 0 5px;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
    }*/
      /*  .navbar .navbar-nav a:hover {
            color: var(--primary);
        }*/

.navbar-nav a.active, .navbar-nav a:hover {
    color: white;
    background-color: RGB(72, 189, 255);
    transition: color 0.3s ease-in-out;
}

/*.navbar-nav a:hover {
    color: white;
    background-color: RGB(72, 189, 255);
    transition: color 0.3s ease-in-out;
}*/
    .navbar .navbar-nav a::after {
        content: '';
        display: block;
        padding-bottom: 0.5rem;
        border-bottom: 0.1rem solid var(--primary);
        transform: scaleX(0);
        /*transition: transform 0.3s ease-in-out;*/
    }
        /*.navbar a:after {
            content: '';
            display: block;
            padding-bottom: 0.5rem;
            border-bottom: 0.1rem solid var(--bg);
            transform: scaleX(0);*/
            /*transition: transform 0.3s ease-in-out;*/
        /*}*/

 .about-box-right h3 {
    color: white;
    /*background-color: RGB(72, 189, 255);*/
   
}
   
   
    

    .navbar .navbar-nav a:hover::after {
        transform: scaleX(1);
        transition: transform 0.3s ease-in-out;
    }

    .navbar .navbar-extra a {
        display: inline-block;
        color: #000000;
        font-size: 0.6rem;
        margin: 0 1rem;
    
    }

        .navbar .navbar-extra a:hover {
            color: var(--primary);
            /*background-color: #fbd7a3;*/
            /*transition: background-color 0.3s ease-in-out;*/
        }
#hamburger-menu {
    display: none;
    /*cursor: pointer;*/
}
/*hero*/
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-image: url('../img/alexander-wende-Hzkp3JPUxVY-unsplash.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.service-img {
    padding: 0rem 10% 2.3rem;
    /*flex: 1 1 45rem;*/
    /*justify-content: center;*/
    width: 90%;
    overflow: hidden;
    /*align-items: center;*/
    /*height: 100%;*/
    /*padding: 40px 20px;*/
}

.service-img2 {
    padding: 5rem 25% 25rem;
    /*flex: 1 1 45rem;*/
    /*width: 100%;*/
    width: 100%;
    overflow: hidden;
    /*height: 100%;*/
    /*padding: 40px 20px;*/
}

/*.about-img {*/
    /*padding: 0rem 10% 2.3rem;*/
    /*flex: 1 1 45rem;*/
    /*justify-content: center;*/
    /*width: 100%;*/
    /*overflow: hidden;*/
    /*align-items: center;*/
    /*height: 100%;*/
    /*padding: 40px 20px;*/
/*}*/

.part {
    padding: 7rem 7% 0.2rem;
    display: flex;
    justify-content: space-around;
   
    background-color: rgb(230, 90, 45);
    /*background-color: #ff7f00;*/
    /*background-color: #ff5f00;*/
}

.part-about {
    padding: 7rem 7% 0.2rem;
    /*display: flex;*/
    justify-content: space-around;
    background-color: rgb(230, 90, 45);
    /*background-color: #ff7f00;*/
    /*background-color: #ff5f00;*/
}

.part-2 {
    padding: 7rem 7% 25.4rem;
    display: flex;
    justify-content: space-around;
    /*padding: 40px 20px;*/
    background-color: rgb(230, 90, 45);
    /*background-color: rgb(255, 221, 199);*/
}

.part-3 {
    padding: 7rem 7% 20.4rem;
    justify-content: space-around;
    background-color: rgb(255, 221, 199);
    /*padding: 40px 20px;*/
    /*background-color: rgb(240, 225, 205);*/
}

.part-7 {
    padding: 7rem 7% 20.4rem;
    justify-content: space-around;
    background-color: rgb(255, 221, 199);
    /*padding: 40px 20px;*/
    /*background-color: rgb(240, 225, 205);*/
}

.part-4 {
    /*display: flex;*/
    justify-content: space-around;
    /*padding: 40px 20px;*/
    background-color: rgb(230, 216, 190);
}

.part-4 h2 {
    color: #f57c00
}

.part-5 {
    padding: 6rem 7% 2.4rem;
    justify-content: space-around;
    /*padding: 40px 20px;*/
    background-color: #333;
    color: white;
}

 .part-4  {
    padding: 6rem 7% 2.4rem;
    display: flex;
    /*margin-bottom: 0.8rem;*/
    /*justify-content: space-between;
    align-items: center;*/
    max-width: 100%;
}

.part-6 {
    padding: 6rem 7% 0.4rem;
    /*display: flex;*/
    justify-content: space-around;
    /*padding: 40px 20px;*/
    background-color: rgb(230, 90, 45);
    /*background-color: rgb(255, 221, 199);*/
}
.coverage {
    justify-content: space-around;
    background-color: rgb(255, 244, 225);
    /*padding: 40px 20px;*/
    /*background-color: rgb(240, 225, 205);*/
}

.clients {
    justify-content: space-around;
    background-color: rgb(255, 229, 199);
    /*padding: 40px 20px;*/
    /*background-color: rgb(240, 225, 205);*/
}
.service-box, .beranda-box {
    background-color: rgb(230, 90, 45);
    padding: 1rem 7% 2rem;
    /*border-radius: 8px;*/
    width: 90%;
    /*height: auto;*/
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

.beranda-box-img {
    /*background-color: rgb(230, 90, 45);*/
    padding: 1rem 7% 2rem;
    width: 100%;
    height: 200px;
    background-image: url('../img/logodelima.png');
    background-repeat: no-repeat;
    background-size: 100% 92%;
}
.karir1-box-img {
    width: 100%;
    height: 900px;
    background-image: url('../img/hire1.jpeg'), url('../img/nopic.png');
    background-repeat: no-repeat;
    background-size: 100% 92%;
}
.karir2-box-img {
    width: 100%;
    height: 900px;
    background-image: url('../img/hire2.jpeg'), url('../img/nopic.png');
    background-repeat: no-repeat;
    background-size: 100% 92%;
}
.karir3-box-img {
    width: 100%;
    height: 900px;
    background-image: url('../img/hire3.jpeg'), url('../img/nopic.png');
    background-repeat: no-repeat;
    background-size: 100% 92%;
}
.karir4-box-img {
    width: 100%;
    height: 900px;
    background-image: url('../img/hire4.jpeg'), url('../img/nopic.png');
    background-repeat: no-repeat;
    background-size: 100% 92%;
}
.karir5-box-img {
    width: 100%;
    height: 900px;
    background-image: url('../img/hire5.jpeg'), url('../img/nopic.png');
    background-repeat: no-repeat;
    background-size: 100% 92%;
}

.about-box img {
    background-color: rgb(230, 90, 45);
    padding: 1rem 7% 2rem;
    /*border-radius: 8px;*/
    width: 90%;
    height: auto;
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

.service-box h1 {
    color: black;
}

.beranda-box h1, .part-6 h1 {
    color: var(--bg);
    text-align: center;
}

.service-box p, .service-box h3, .beranda-box h3 {
    /*padding-left: 7px;*/
    color: #fbd7a3;
}

.service-box-right {
    background-color: rgb(230, 90, 45);
    padding: 1rem 0% 2rem;
    /*border-radius: 8px;*/
    width: 70%;
    height: auto;
    background-image: url('../img/pictlogo.png');
    background-repeat: no-repeat;
    background-size: 100% 92%;
    /*height: auto;*/
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

.about-box-right {
    background-color: rgb(230, 90, 45);
    padding: 1rem 0% 2rem;
    /*border-radius: 8px;*/
    width: 180%;
    /*height: auto;*/
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

.service-img img, .service-img2 img, .service-box img,
.service-box-right img {
    max-width: 100%;
    /*left: 100%;*/
    height: auto;
    /*display: block;*/
}
/*.coverage-img img {
    max-width: 50%;
    
    height: auto;
    
}*/
/*.service-box-right img {
    width: 100%;
    height: auto;
}*/
 .category {
    padding: 0rem 7% 0.4rem;
    display: flex;
}

.category-blackbox {
    /*background-color: rgb(255, 221, 199);*/
    padding: 5rem 2% 2rem;
    /*border-radius: 8px;*/
    width: 90%;
    /*display: flex;*/
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

.timcategory-box {
    background-color: rgb(255, 221, 199);
    padding: 0rem 2% 2rem;
    /*border-radius: 8px;*/
    width: 90%;
    /*display: flex;*/
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

.category-box {
    background-color: rgb(255, 221, 199);
    /*padding: 5rem 2% 2rem;*/
    border-radius: 8px;
    width: 90%;
    /*display: flex;*/
    /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
}

    .category-box h3 {
        color: #ff6f00;
        margin-bottom: 12px;
        /*text-align-last:center;*/
    }

    .category-box ul, .service-box ul {
        list-style: disc;
        padding-left: 20px;
    }

.coverage, .clients {
    padding: 5rem 0% 0.1rem;
    
}

.coverage-img {
    max-width: 90%;
    height: 750px;
    background-image: url('../img/coverarean.png');
    background-repeat: no-repeat;
    background-size: 90% 70%;
    background-position: right;
}

.coverageclient-img {
    max-width: 100%;
    height: 750px;
    background-image: url('../img/clients.png');
    background-repeat: no-repeat;
    background-size: 100% 70%;
}

    .coverage h2, .clients h2 {
        /*font-size: 1.1em;*/
        color: var(--primary);
        text-align: center;
    }

.part-3 h2, .part-3 h1, .part-7 h1 {
    /*font-size: 1.1em;*/
    padding: 0rem 7% 0.4rem;
    color: var(--primary);
    /*text-align: left;*/
}

.part-7 h2 {
    /*font-size: 1.1em;*/
    /*padding: 0rem 7% 0.4rem;*/
    color: var(--primary);
    /*text-align: left;*/
}

.part-3 p {
    /*font-size: 1.1em;*/
    padding: 0rem 7% 0.4rem;
    color: black;
    /*text-align: left;*/
}

.part-about h1 {
    /*font-size: 1.1em;*/
    padding: 0rem 7% 0.4rem;
    color: var(--bg);
    /*text-align: left;*/
}
.category-box h2 {
    /*font-size: 1.1em;*/
    /*padding: 0rem 7% 0.4rem;*/
    color: black;
    /*text-align-last: left;*/
}

.client-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}

    .client-logos img {
        width: 120px;
        height: auto;
    }

.part-5 h2, .part-5 h3 {
    color: var(--bg);
    text-align: center;
}
    footer {
    background-color: #333;
    color: white;
    padding: 20px;
    text-align: center;
}

section:nth-child(odd) {
    /*background: var(--bg);*/
}

/* media queries */

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

  
     .part-6 {
        padding: 5rem 10% 5rem;
        /*flex: 1 1 45rem;*/
        /*width: 100%;*/
        width: 100%;
        overflow: hidden;
        /*height: 100%;*/
        /*padding: 40px 20px;*/
    }
    .service-img2 {
        padding: 6rem 10% 25rem;
        /*flex: 1 1 45rem;*/
        /*width: 100%;*/
        width: 100%;
        /*overflow: hidden;*/
        /*height: 100%;*/
        /*padding: 40px 20px;*/
    }
        .service-img img, .service-img2 img, .part-6 img, .service-box {
            width: 100%;
            /*left: 100%;*/
            height: auto;
            /*display: block;*/
        }

}

/*Tablet*/
@media (max-width: 768px) {
    html {
        font-size: 62.5%;
    }
    .whatsapp-icon {
        width: 50px;
        height: 50px;
    }
    #hamburger-menu {
        /*padding : 0 35rem;*/
        display: inline-block;
    }

    .navbar .navbar-nav {
        position: absolute;
        top: 100%;
        left : -100%;
        /*background-color: #f4e3c1;*/
        
        width: 20rem;
        height: 100vh;
    }

        .navbar .navbar-nav.active {
            
            left: 0;
            
        }

        .navbar .navbar-nav a {
           
            display: block;
            margin: 1rem;
            padding: 0.5rem;
            font-size: 1.1rem;
            
        }

            .navbar .navbar-nav a::after {
                transform-origin: 0 0;
            }

            .navbar .navbar-nav a:hover::after {
                transform: scaleX(0.2);
            }
    .category-blackbox {
        /*background-color: rgb(255, 221, 199);*/
        padding: 5rem 2% 2rem;
        /*border-radius: 8px;*/
        width: 70%;
        /*display: flex;*/
        /*box-shadow: 0 0 10px rgba(0,0,0,0.1);*/
    }
    /*.about .row, .commit .row, .contact .row,*/
    .service-img, .service-img2, .category-blackbox {
        flex-wrap: wrap;
    }

        /* .contact .row {
        flex-wrap:wrap;
    }*/

    /*.contact .row form {
        padding-top: 0;
    }

    .contact .row .map {
        height: 20rem;
    }*/

        .service-img img,
        .service-img2 img {
            width: 100%;
            /*height: auto;
    border-radius: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
        }
    /*.coverage-img img {
        width: 50%;
     
    }*/

    .service-img2 {
        /*width: 100%;*/
        padding: 0.5rem 0rem;
    }

    /*.coverage-img img {*/
        /*width: 100%;*/
        /*padding: 42.5rem 20rem;
    }*/

    /*.visi .vision-img img {
        width: 100%;
        padding: 0.5rem 0rem;
    }*/
}


/*mobile phone*/
@media (max-width: 450px) {
    html {
        font-size: 55%;
    }


    .service-img2, .coverage-img, .service-img, .part-3,
    .category {
        width: 80%;
        padding: 1rem 0rem;
    }
    .service-box {
        padding: 1rem 7% 10.4rem;
        width: 100%;
    }

    .part-6 {
        padding: 8rem 7% 75.4rem;
        width: 100%;
    }
}