/* HOME */

    .home-primary-btn:hover {
        background-color: rgba(255, 255, 255, 0);
    color: goldenrod;
    border: 1.5px solid goldenrod;
    }

    .home-secondary-btn:hover {
        background-color: rgb(255, 201, 64);
    color: black;
    border: 1.5px solid black;
    }

    /* Responsive */
        /* HP */
    @media (max-width: 560px) {
        nav ul {
            gap: 10px;
        }
        nav ul li a {
            font-size: 13px;
        }
        .home-hero-heading {
            font-size: 36px;
        }
        .home-hero-paragraph {
            width: 90%;
            height: auto;
            font-size: 10px;
            margin: 10px 20px;
        }
        .home-primary-btn, .home-secondary-btn {
            font-size: 13px;
        }
        .copy-paragraph {
            font-size: 13px;
        }
    }



/* SERVICES */
    /* Responsive */
        /* HP */
    @media (max-width: 480px) {
        .service-content {
            flex-direction: column-reverse;
            justify-content: center;
        }
        .service-content-img {
            margin: 0;
            margin-top: 200px;
        }
        .service-content-text {
            width: 90%;
            margin: 0;
        }
        .service-content-text h1 {
            font-size: 27px;
        }
        .service-content-text p {
            font-size: 13px;
        }
        .service-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* HP BESAR */
    @media (min-width: 480px) and (max-width: 768px) {
        .service-hero, .service-container {
            height: auto;
        }
        .service-content {
            flex-direction: column-reverse;
            justify-content: start;
        }
        .service-content-img {
            margin-top: 100px;
            margin-bottom: 0;
        }
        .service-content-text {
            width: 90%;
            margin: 0;
        }
        .service-content-text h1 {
            font-size: 27px;
        }
        .service-content-text p {
            font-size: 13px;
        }
        .service-icons {
            width: 450px;
            height: 450px;
        }
    }   
        /* TAB */
    @media (min-width:768px) and (max-width: 992px) {
        .service-hero, .service-container {
            height: auto;
        }
        .service-content {
            flex-direction: column-reverse;
            justify-content: start;
            background-color: rgba(137, 43, 226, 0);
        }
        .service-content-img {
            margin-top: 100px;
            margin-bottom: 0;
        }
        .service-content-text {
            width: 90%;
            margin: 0;
            margin-bottom: 100px;
        }
    }
        /* LAPTOP */
    @media (min-width:992px) and (max-width: 1200px) {
        .service-hero, .service-container {
            height: auto;
        }
        .service-content {
            margin-top: 80px;
            background-color: rgba(137, 43, 226, 0);
        }
        .service-content-img {
            margin: 50px 50px 50px;
        }
        .service-content-text {
            width: 90%;
            margin-right: 0;
        }
        .service-content-text h1 {
            font-size: 27px;
        }
        .service-content-text p {
            font-size: 13px;
        }
        .service-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* LAPTOP BESAR */
    @media (min-width:1200px) {
        .service-content-img {
            padding-right: 50px;
            margin-right: 50px;
        }
        .service-content-text {
            width: 90%;
            margin-right: 0;
            margin-left: 100px;
        }
    }



/* SERVICE LAW */

    .service-law-btn:hover {
        background-color: rgba(255, 255, 255, 0);
    color: rgb(82, 170, 252);
    border: 1.5px solid rgb(82, 170, 252);
    }
    /* Responsive */
        /* HP */
    @media (max-width: 480px) {
        .service-law-content {
            flex-direction: column;
            justify-content: center;
        }
        .service-law-img {
            margin-top: 300px;
            margin-bottom: 0;
        }
        .service-law-text {
            width: 90%;
            margin: 0;
        }
        .service-law-text h1 {
            font-size: 22px;
        }
        .service-law-text p {
            font-size: 13px;
        }
        .service-law-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* HP BESAR */
    @media (min-width: 480px) and (max-width: 768px) {
        .service-law-hero, .service-law-container {
            height: auto;
        }
        .service-law-content {
            flex-direction: column;
            justify-content: start;
        }
        .service-law-content-img {
            margin-top: 100px;
            margin-bottom: 0;
        }
        .service-law-text {
            width: 90%;
            margin: 0;
        }
        .service-law-text h1 {
            font-size: 27px;
        }
        .service-law-text p {
            font-size: 13px;
        }
        .service-law-icons {
            width: 450px;
            height: 450px;
        }
    }
        /* TAB */
    @media (min-width:768px) and (max-width: 992px) {
        .service-law-hero, .service-law-container {
            height: auto;
        }
        .service-law-content {
            flex-direction: column;
            justify-content: start;
            background-color: rgba(137, 43, 226, 0);
        }
        .service-law-img {
            margin: 0;
        }
        .service-law-text {
            width: 90%;
            margin: 0;
            margin-bottom: 100px;
        }
    }
        /* LAPTOP */
    @media (min-width:992px) and (max-width: 1200px) {
        .service-law-hero, .service-law-container {
            height: auto;
        }
        .service-law-content {
            margin-top: 80px;
        }
        .service-law-content-img {
            margin: 50px 50px 50px;
        }
        .service-law-text {
            width: 90%;
            margin-right: 0;
        }
        .service-law-text h1 {
            font-size: 27px;
        }
        .service-law-text p {
            font-size: 13px;
        }
        .service-law-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* LAPTOP BESAR */
    @media (min-width:1200px) {
        .service-law-img {
            padding-right: 50px;
            margin-right: 50px;
        }
        .service-law-text {
            width: 90%;
            margin-right: 50px;
            margin-left: 100px;
        }
    }



/* SERVICE CAFE */

    .service-cafe-btn:hover {
        background-color: rgba(255, 255, 255, 0);
    color: rgb(82, 170, 252);
    border: 1.5px solid rgb(82, 170, 252);
    }

    /* Responsive */
        /* HP */
    @media (max-width: 480px) {
        .service-cafe-hero {
            height: auto;
        }
        .service-cafe-content {
            flex-direction: column-reverse;
            justify-content: center;
        }
        .service-cafe-img {
            margin-top: 200px;
        }
        .service-cafe-text {
            width: 90%;
            margin: 0;
        }
        .service-cafe-text h1 {
            font-size: 23px;
        }
        .service-cafe-text p {
            font-size: 13px;
            margin-top: 0;
        }
        .service-cafe-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* HP BESAR */
    @media (min-width: 480px) and (max-width: 768px) {
        .service-cafe-hero, .service-cafe-container {
            height: auto;
        }
        .service-cafe-content {
            flex-direction: column-reverse;
            justify-content: start;
        }
        .service-cafe-content-img {
            margin-top: 100px;
            margin-bottom: 0;
        }
        .service-cafe-text {
            width: 90%;
            margin: 0;
        }
        .service-cafe-text h1 {
            font-size: 27px;
        }
        .service-cafe-text p {
            font-size: 13px;
        }
        .service-cafe-icons {
            width: 450px;
            height: 450px;
        }
    }
        /* TAB */
    @media (min-width:768px) and (max-width: 992px) {
        .service-cafe-hero, .service-cafe-container {
            height: auto;
        }
        .service-cafe-content {
            flex-direction: column-reverse;
            justify-content: start;
            background-color: rgba(137, 43, 226, 0);
        }
        .service-cafe-text {
            width: 90%;
            margin: 0;
            margin-bottom: 100px;
        }
    }
        /* LAPTOP */
    @media (min-width:992px) and (max-width: 1200px) {
        .service-cafe-hero, .service-cafe-container {
            height: auto;
        }
        .service-cafe-content {
            margin-top: 80px;
        }
        .service-cafe-content-img {
            margin: 50px 50px 50px;
        }
        .service-cafe-text {
            width: 90%;
            margin-right: 0;
        }
        .service-cafe-text h1 {
            font-size: 27px;
        }
        .service-cafe-text p {
            font-size: 13px;
        }
        .service-cafe-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* LAPTOP BESAR */
    @media (min-width:1200px) {
        .service-cafe-img {
            padding-right: 50px;
            margin-right: 50px;
        }
        .service-cafe-text {
            width: 90%;
            margin-right: 0;
            margin-left: 100px;
        }
    }



/* ABOUT */

    /* Responsive */
        /* HP */
    @media (max-width: 480px) {
        .about-hero, .about-container {
            height: auto;
        }
        .about-content {
            display: flex;
            flex-direction: column-reverse;
        }
        .about-img {
            margin: 0;
        }
        .about-text {
            width: 100%;
            margin: 0;
        }
        .about-text h1 {
            font-size: 23px;
        }
        .about-text p {
            font-size: 13px;
            margin: 0;
        }
        .about-img-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* HP BESAR */
    @media (min-width: 480px) and (max-width: 768px) {
        .about-hero, .about-container {
            height: auto;
        }
        .about-content {
            display: flex;
            flex-direction: column-reverse;
        }
        .about-img {
            margin: 0;
        }
        .about-text {
            width: 100%;
            margin: 0;
        }
        .about-text h1 {
            font-size: 23px;
        }
        .about-text p {
            font-size: 13px;
            margin: 0;
        }
        .about-img-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* TAB */
    @media (min-width:768px) and (max-width: 992px) {
        .about-hero, .about-container {
            height: auto;
        }
        .about-content {
            flex-direction: column-reverse;
            justify-content: center;
            background-color: rgba(137, 43, 226, 0);
        }
        .about-img {
            width: 100%;
        }
        .about-text {
            width: 100%;
            margin: 0;
            margin-bottom: 100px;
        }
    }
        /* LAPTOP */
    @media (min-width:992px) and (max-width: 1200px) {
        .about-hero, .about-container {
            height: auto;
        }
        .about-content {
            margin-top: 80px;
            display: flex;
        }
        .about-img {
            margin: 50px 50px 50px;
        }
        .about-text {
            width: 90%;
            margin-right: 0;
        }
        .about-text h1 {
            font-size: 27px;
        }
        .about-text p {
            font-size: 13px;
        }
        .about-img-icons {
            width: 300px;
            height: 300px;
        }
    }
        /* LAPTOP BESAR */
    @media (min-width:1200px) {
        .about-content {
            background-color: rgba(0, 255, 255, 0);
        }
        .about-img {
            display: flex;
            padding-right: 50px;
            margin-right: 50px;
            align-items: center;
        }
        .about-img-icons {
            background-color: #ffffff00;
        }
        .about-text {
            width: 100%;
            margin-right: 0;
            margin-left: 50px;
            align-content: center;
        }
    }